@fluentui/react-avatar 9.11.0 → 9.11.1

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Wed, 01 Apr 2026 15:50:19 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.11.1)
+
+Thu, 23 Apr 2026 11:59:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.11.0..@fluentui/react-avatar_v9.11.1)
+
+### Patches
+
+- fix: drop unnecessary dependencies from base hooks ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
+- fix: prevent spreading of custom props on html element ([PR #36017](https://github.com/microsoft/fluentui/pull/36017) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-badge to v9.5.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-popover to v9.14.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tooltip to v9.10.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
 ## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.11.0)
 
-Wed, 01 Apr 2026 15:50:19 GMT 
+Wed, 01 Apr 2026 15:52:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.10.4..@fluentui/react-avatar_v9.11.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { PopoverProps } from '@fluentui/react-popover';
 import type { PopoverSurface } from '@fluentui/react-popover';
-import { PresenceBadge } from '@fluentui/react-badge';
+import type { PresenceBadge } from '@fluentui/react-badge';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
 import * as React_2 from 'react';

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\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"}
+{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import type { 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/useAvatar.js

@@ -31,10 +31,8 @@ export const useAvatar_unstable = (props, ref)=>{
             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);
+    if (state.icon && !state.icon.hasOwnProperty('children')) {
+        state.icon.children = /*#__PURE__*/ React.createElement(PersonRegular, null);
     }
     const badge = slot.optional(props.badge, {
         defaultProps: {
@@ -95,7 +93,7 @@ export const useAvatar_unstable = (props, ref)=>{
  * 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 { name, image: imageProp, initials: initialsProp, ...rest } = props;
     const baseId = useId('avatar-');
     const root = slot.always({
         role: 'img',
@@ -106,7 +104,7 @@ export const useAvatar_unstable = (props, ref)=>{
         elementType: 'span'
     });
     const [imageHidden, setImageHidden] = React.useState(undefined);
-    let image = slot.optional(props.image, {
+    let image = slot.optional(imageProp, {
         defaultProps: {
             alt: '',
             role: 'presentation',
@@ -125,7 +123,7 @@ export const useAvatar_unstable = (props, ref)=>{
         image.onLoad = mergeCallbacks(image.onLoad, ()=>setImageHidden(undefined));
     }
     // Resolve the initials slot, defaulted to getInitials
-    let initials = slot.optional(props.initials, {
+    let initials = slot.optional(initialsProp, {
         renderByDefault: true,
         defaultProps: {
             children: getInitials(name, dir === 'rtl'),

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 { 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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"}
+{"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 && !state.icon.hasOwnProperty('children')) {\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, image: imageProp, initials: initialsProp, ...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(imageProp, {\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(initialsProp, {\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","hasOwnProperty","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","image","imageProp","initialsProp","baseId","always","role","imageHidden","setImageHidden","useState","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}

package/lib/components/AvatarGroup/useAvatarGroup.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render AvatarGroup.

package/lib/components/AvatarGroup/useAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n  AvatarGroupProps,\n  AvatarGroupState,\n} from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { size = defaultAvatarGroupSize, ...baseProps } = props;\n  const state = useAvatarGroupBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n  return {\n    size,\n    ...state,\n  };\n};\n\n/**\n * Create the base state to render AvatarGroup, without design-specific props.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLDivElement of AvatarGroup\n */\nexport const useAvatarGroupBase_unstable = (\n  props: AvatarGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): AvatarGroupBaseState => {\n  const { layout = 'spread' } = props;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'group',\n      ...props,\n      ref,\n    }),\n    { elementType: 'div' },\n  );\n  return { layout, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","size","defaultAvatarGroupSize","baseProps","state","useAvatarGroupBase_unstable","layout","root","always","role","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAQ3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,OAAOC,sBAAsB,EAAE,GAAGC,WAAW,GAAGJ;IACxD,MAAMK,QAAQC,4BAA4BF,WAAWH;IAErD,OAAO;QACLC;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,8BAA8B,CACzCN,OACAC;IAEA,MAAM,EAAEM,SAAS,QAAQ,EAAE,GAAGP;IAE9B,MAAMQ,OAAOV,KAAKW,MAAM,CACtBZ,yBAAyB,OAAO;QAC9Ba,MAAM;QACN,GAAGV,KAAK;QACRC;IACF,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEJ;QAAQK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACrD,EAAE;AAEF,OAAO,MAAML,yBAAyB,GAAG"}
+{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n  AvatarGroupProps,\n  AvatarGroupState,\n} from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { size = defaultAvatarGroupSize, ...baseProps } = props;\n  const state = useAvatarGroupBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n  return {\n    size,\n    ...state,\n  };\n};\n\n/**\n * Create the base state to render AvatarGroup, without design-specific props.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLDivElement of AvatarGroup\n */\nexport const useAvatarGroupBase_unstable = (\n  props: AvatarGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): AvatarGroupBaseState => {\n  const { layout = 'spread' } = props;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'group',\n      ...props,\n      ref,\n    }),\n    { elementType: 'div' },\n  );\n  return { layout, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","size","defaultAvatarGroupSize","baseProps","state","useAvatarGroupBase_unstable","layout","root","always","role","elementType","components"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAQ3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,OAAOC,sBAAsB,EAAE,GAAGC,WAAW,GAAGJ;IACxD,MAAMK,QAAQC,4BAA4BF,WAAWH;IAErD,OAAO;QACLC;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,8BAA8B,CACzCN,OACAC;IAEA,MAAM,EAAEM,SAAS,QAAQ,EAAE,GAAGP;IAE9B,MAAMQ,OAAOV,KAAKW,MAAM,CACtBZ,yBAAyB,OAAO;QAC9Ba,MAAM;QACN,GAAGV,KAAK;QACRC;IACF,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEJ;QAAQK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACrD,EAAE;AAEF,OAAO,MAAML,yBAAyB,GAAG"}

package/lib/components/AvatarGroup/useAvatarGroupContextValues.js

@@ -1,9 +1,14 @@
+'use client';
+import * as React from 'react';
 export const useAvatarGroupContextValues = (state)=>{
     const { layout, size } = state;
-    const avatarGroup = {
+    const avatarGroup = React.useMemo(()=>({
+            layout,
+            size
+        }), [
         layout,
         size
-    };
+    ]);
     return {
         avatarGroup
     };

package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"mappings":"AAEA,OAAO,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup = React.useMemo<AvatarGroupContextValue>(\n    () => ({\n      layout,\n      size,\n    }),\n    [layout, size],\n  );\n\n  return { avatarGroup };\n};\n"],"names":["React","useAvatarGroupContextValues","state","layout","size","avatarGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAcL,MAAMM,OAAO,CAC/B,IAAO,CAAA;YACLH;YACAC;QACF,CAAA,GACA;QAACD;QAAQC;KAAK;IAGhB,OAAO;QAAEC;IAAY;AACvB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\nexport type AvatarGroupItemBaseProps = AvatarGroupItemProps;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n\nexport type AvatarGroupItemBaseState = Omit<AvatarGroupItemState, 'size'>;\n"],"names":[],"mappings":"AAyCA,WAA0E"}
+{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\nexport type AvatarGroupItemBaseProps = AvatarGroupItemProps;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n\nexport type AvatarGroupItemBaseState = Omit<AvatarGroupItemState, 'size'>;\n"],"names":[],"mappings":"AAyCA,WAA0E"}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { Avatar } from '../Avatar/Avatar';
 import { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
 import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';

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 {\n  AvatarGroupItemBaseProps,\n  AvatarGroupItemBaseState,\n  AvatarGroupItemProps,\n  AvatarGroupItemState,\n} 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 state = useAvatarGroupItemBase_unstable(props, ref);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const size = groupSize ?? defaultAvatarGroupSize;\n\n  return {\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n    },\n    avatar: slot.always(props.avatar, {\n      defaultProps: { size, color: 'colorful', ...state.avatar },\n      elementType: Avatar,\n    }),\n  };\n};\n\n/**\n * Create the base state required to render AvatarGroupItem, without default slot props or component types.\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 * @returns AvatarGroupItem state without default slot props or component types\n */\nexport const useAvatarGroupItemBase_unstable = (\n  props: AvatarGroupItemBaseProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemBaseState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\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 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    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: 'span',\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        ...avatarSlotProps,\n      },\n      elementType: 'span',\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","state","useAvatarGroupItemBase_unstable","groupSize","ctx","size","components","avatar","always","defaultProps","color","elementType","groupIsOverflow","isOverflow","layout","style","className","overflowLabel","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","root","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;AAQvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IACrD,MAAMG,YAAYT,+BAA+BU,CAAAA,MAAOA,IAAIC,IAAI;IAChE,MAAMA,OAAOF,sBAAAA,uBAAAA,YAAaR;IAE1B,OAAO;QACLU;QACA,GAAGJ,KAAK;QACRK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,MAAMK,UAAU;YACnBC,QAAQf;QACV;QACAe,QAAQX,KAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBAAEJ;gBAAMK,OAAO;gBAAY,GAAGT,MAAMM,MAAM;YAAC;YACzDI,aAAanB;QACf;IACF;AACF,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,MAAMU,kCAAkC,CAC7CH,OACAC;IAEA,MAAMY,kBAAkBlB,+BAA+BU,CAAAA,MAAOA,IAAIS,UAAU;IAC5E,MAAMC,SAASpB,+BAA+BU,CAAAA,MAAOA,IAAIU,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,iBAAiB,GAAGnB;IAChE,MAAMoB,wBAAwBtB,oBAAoBJ;IAElD,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBb;QAChBE;QACAR,YAAY;YACVoB,MAAMd,kBAAkB,OAAO;YAC/BL,QAAQ;YACRU,eAAe;QACjB;QACAS,MAAM9B,KAAKY,MAAM,CAACT,MAAM2B,IAAI,EAAE;YAC5BjB,cAAc;gBACZM;gBACAC;YACF;YACAL,aAAaC,kBAAkB,OAAO;QACxC;QACAL,QAAQX,KAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBACZT;gBACA,GAAGkB,eAAe;YACpB;YACAP,aAAa;QACf;QACAM,eAAerB,KAAKY,MAAM,CAACS,eAAe;YACxCR,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfkB,UAAU5B,MAAM6B,IAAI;YACtB;YACAjB,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport type * 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 {\n  AvatarGroupItemBaseProps,\n  AvatarGroupItemBaseState,\n  AvatarGroupItemProps,\n  AvatarGroupItemState,\n} 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 state = useAvatarGroupItemBase_unstable(props, ref);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const size = groupSize ?? defaultAvatarGroupSize;\n\n  return {\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n    },\n    avatar: slot.always(props.avatar, {\n      defaultProps: { size, color: 'colorful', ...state.avatar },\n      elementType: Avatar,\n    }),\n  };\n};\n\n/**\n * Create the base state required to render AvatarGroupItem, without default slot props or component types.\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 * @returns AvatarGroupItem state without default slot props or component types\n */\nexport const useAvatarGroupItemBase_unstable = (\n  props: AvatarGroupItemBaseProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemBaseState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\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 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    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: 'span',\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        ...avatarSlotProps,\n      },\n      elementType: 'span',\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":["Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","state","useAvatarGroupItemBase_unstable","groupSize","ctx","size","components","avatar","always","defaultProps","color","elementType","groupIsOverflow","isOverflow","layout","style","className","overflowLabel","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","root","children","name"],"mappings":"AAAA;AAGA,SAASA,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;AAQvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IACrD,MAAMG,YAAYT,+BAA+BU,CAAAA,MAAOA,IAAIC,IAAI;IAChE,MAAMA,OAAOF,sBAAAA,uBAAAA,YAAaR;IAE1B,OAAO;QACLU;QACA,GAAGJ,KAAK;QACRK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,MAAMK,UAAU;YACnBC,QAAQf;QACV;QACAe,QAAQX,KAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBAAEJ;gBAAMK,OAAO;gBAAY,GAAGT,MAAMM,MAAM;YAAC;YACzDI,aAAanB;QACf;IACF;AACF,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,MAAMU,kCAAkC,CAC7CH,OACAC;IAEA,MAAMY,kBAAkBlB,+BAA+BU,CAAAA,MAAOA,IAAIS,UAAU;IAC5E,MAAMC,SAASpB,+BAA+BU,CAAAA,MAAOA,IAAIU,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,iBAAiB,GAAGnB;IAChE,MAAMoB,wBAAwBtB,oBAAoBJ;IAElD,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBb;QAChBE;QACAR,YAAY;YACVoB,MAAMd,kBAAkB,OAAO;YAC/BL,QAAQ;YACRU,eAAe;QACjB;QACAS,MAAM9B,KAAKY,MAAM,CAACT,MAAM2B,IAAI,EAAE;YAC5BjB,cAAc;gBACZM;gBACAC;YACF;YACAL,aAAaC,kBAAkB,OAAO;QACxC;QACAL,QAAQX,KAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBACZT;gBACA,GAAGkB,eAAe;YACpB;YACAP,aAAa;QACf;QACAM,eAAerB,KAAKY,MAAM,CAACS,eAAe;YACxCR,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfkB,UAAU5B,MAAM6B,IAAI;YACtB;YACAjB,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
 import { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;AAGA,SAASA,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\nexport type AvatarGroupPopoverBaseProps = AvatarGroupPopoverProps;\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n\nexport type AvatarGroupPopoverBaseState = Omit<AvatarGroupPopoverState, 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\nexport type AvatarGroupPopoverBaseProps = AvatarGroupPopoverProps;\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n\nexport type AvatarGroupPopoverBaseState = Omit<AvatarGroupPopoverState, 'size'>;\n"],"names":[],"mappings":"AAiEA,WAAgF"}

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <state.root>\n      <PopoverTrigger disableButtonEnhancement>\n        <state.tooltip>\n          <state.triggerButton />\n        </state.tooltip>\n      </PopoverTrigger>\n      <state.popoverSurface>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <state.content />\n        </AvatarGroupProvider>\n      </state.popoverSurface>\n    </state.root>\n  );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,mBAAmB,QAAQ,oCAAoC;AAGxE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEAJ,YAAqCG;IAErC,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACJ;gBAAeK,wBAAwB;0BACtC,cAAA,KAACH,MAAMI,OAAO;8BACZ,cAAA,KAACJ,MAAMK,aAAa;;;0BAGxB,KAACL,MAAMM,cAAc;0BACnB,cAAA,KAACV;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,cAAA,KAACR,MAAMS,OAAO;;;;;AAKxB,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <state.root>\n      <PopoverTrigger disableButtonEnhancement>\n        <state.tooltip>\n          <state.triggerButton />\n        </state.tooltip>\n      </PopoverTrigger>\n      <state.popoverSurface>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <state.content />\n        </AvatarGroupProvider>\n      </state.popoverSurface>\n    </state.root>\n  );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,mBAAmB,QAAQ,oCAAoC;AAGxE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEAJ,YAAqCG;IAErC,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACJ;gBAAeK,wBAAwB;0BACtC,cAAA,KAACH,MAAMI,OAAO;8BACZ,cAAA,KAACJ,MAAMK,aAAa;;;0BAGxB,KAACL,MAAMM,cAAc;0BACnB,cAAA,KAACV;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,cAAA,KAACR,MAAMS,OAAO;;;;;AAKxB,EAAE"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js

@@ -81,11 +81,11 @@ import { Tooltip } from '@fluentui/react-tooltip';
         layout,
         popoverOpen,
         components: {
-            root: Popover,
+            root: 'div',
             triggerButton: 'button',
             content: 'ul',
-            popoverSurface: PopoverSurface,
-            tooltip: Tooltip
+            popoverSurface: 'div',
+            tooltip: 'div'
         },
         root: slot.always({
             // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport {\n  OnOpenChangeData,\n  OpenPopoverEvents,\n  Popover,\n  type PopoverProps,\n  PopoverSurface,\n} from '@fluentui/react-popover';\nimport type {\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n  const state = useAvatarGroupPopoverBase_unstable({\n    indicator,\n    ...baseProps,\n  });\n\n  if (layout === 'pie') {\n    state.triggerButton.children = null;\n  } else if (indicator === 'icon') {\n    state.triggerButton.children = <MoreHorizontalRegular />;\n  }\n\n  return {\n    size,\n    ...state,\n\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      root: Popover,\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: state.popoverSurface,\n      elementType: PopoverSurface,\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: state.tooltip,\n      elementType: Tooltip,\n    }),\n  };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'count') {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n\n    components: {\n      root: Popover,\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(\n      {\n        // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n        children: <></>,\n        size: 'small',\n        trapFocus: true,\n        ...restOfProps,\n        open: popoverOpen,\n        onOpenChange: handleOnPopoverChange,\n      },\n      { elementType: 'div' },\n    ),\n    triggerButton: slot.always(props.triggerButton, {\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n      elementType: 'ul',\n    }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n      elementType: 'div',\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,oCAAoC;AACnF,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,oBAAoB,EAAEC,IAAI,QAAQ,4BAA4B;AACvE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAGEC,OAAO,EAEPC,cAAc,QACT,0BAA0B;AAOjC,SAASC,OAAO,QAAQ,0BAA0B;AAElD;;;;;;;CAOC,GACD,OAAO,MAAMC,iCAAiC,CAACC;QAChCT;IAAb,MAAMU,OAAOV,CAAAA,kCAAAA,+BAA+BW,CAAAA,MAAOA,IAAID,IAAI,eAA9CV,6CAAAA,kCAAmDC;IAChE,MAAMW,SAASZ,+BAA+BW,CAAAA,MAAOA,IAAIC,MAAM;IAC/D,MAAM,EAAEC,YAAYH,OAAO,KAAK,SAAS,OAAO,EAAE,GAAGI,WAAW,GAAGL;IAEnE,MAAMM,QAAQC,mCAAmC;QAC/CH;QACA,GAAGC,SAAS;IACd;IAEA,IAAIF,WAAW,OAAO;QACpBG,MAAME,aAAa,CAACC,QAAQ,GAAG;IACjC,OAAO,IAAIL,cAAc,QAAQ;QAC/BE,MAAME,aAAa,CAACC,QAAQ,iBAAG,oBAACd;IAClC;IAEA,OAAO;QACLM;QACA,GAAGK,KAAK;QAERI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,MAAMI,UAAU;YACnBC,MAAMf;YACNgB,gBAAgBf;YAChBgB,SAASf;QACX;QACAa,MAAMjB,KAAKoB,MAAM,CAACR,MAAMK,IAAI,EAAkB;YAAEI,aAAanB;QAAQ;QACrEgB,gBAAgBlB,KAAKoB,MAAM,CAACd,MAAMY,cAAc,EAAE;YAChDI,cAAcV,MAAMM,cAAc;YAClCG,aAAalB;QACf;QACAgB,SAASnB,KAAKoB,MAAM,CAACd,MAAMa,OAAO,EAAE;YAClCG,cAAcV,MAAMO,OAAO;YAC3BE,aAAajB;QACf;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMS,qCAAqC,CAACP;IACjD,MAAMG,SAASZ,+BAA+BW,CAAAA,MAAOA,IAAIC,MAAM;IAC/D,MAAM,EAAEC,YAAY,OAAO,EAAEa,QAAQ3B,MAAM4B,QAAQ,CAACD,KAAK,CAACjB,MAAMS,QAAQ,CAAC,EAAEA,QAAQ,EAAE,GAAGU,aAAa,GAAGnB;IAExG,MAAM,CAACoB,aAAaC,eAAe,GAAG5B,qBAAqB;QACzDa,OAAON,MAAMsB,IAAI;QACjBC,cAAcvB,MAAMwB,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAwB,CAACC,GAAsBC;YACnDT;SAAAA,4BAAAA,YAAYU,YAAY,cAAxBV,gDAAAA,+BAAAA,aAA2BQ,GAAGC;QAC9BP,eAAeO,KAAKN,IAAI;IAC1B;IAEA,IAAIQ;IACJ,IAAI3B,WAAW,OAAO;QACpB2B,wBAAwB;IAC1B,OAAO,IAAI1B,cAAc,SAAS;QAChC0B,wBAAwBb,QAAQ,KAAK,QAAQ,CAAC,CAAC,EAAEA,OAAO;IAC1D;IAEA,OAAO;QACLA;QACAb;QACAD;QACAiB;QAEAV,YAAY;YACVC,MAAMf;YACNY,eAAe;YACfuB,SAAS;YACTnB,gBAAgBf;YAChBgB,SAASf;QACX;QACAa,MAAMjB,KAAKoB,MAAM,CACf;YACE,oGAAoG;YACpGL,wBAAU;YACVR,MAAM;YACN+B,WAAW;YACX,GAAGb,WAAW;YACdG,MAAMF;YACNS,cAAcH;QAChB,GACA;YAAEX,aAAa;QAAM;QAEvBP,eAAed,KAAKoB,MAAM,CAACd,MAAMQ,aAAa,EAAE;YAC9CQ,cAAc;gBACZP,UAAUqB;gBACVG,MAAM;YACR;YACAlB,aAAa;QACf;QACAgB,SAASrC,KAAKoB,MAAM,CAACd,MAAM+B,OAAO,EAAE;YAClCf,cAAc;gBACZP;gBACAyB,MAAM;YACR;YACAnB,aAAa;QACf;QACAH,gBAAgBlB,KAAKoB,MAAM,CAACd,MAAMY,cAAc,EAAE;YAChDI,cAAc;gBACZ,cAAc;gBACdmB,UAAU;YACZ;YACApB,aAAa;QACf;QACAF,SAASnB,KAAKoB,MAAM,CAACd,MAAMa,OAAO,EAAE;YAClCG,cAAc;gBACZe,SAAS;gBACTK,cAAc;YAChB;YACArB,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-popover';\nimport { Popover, type PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type {\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n  const state = useAvatarGroupPopoverBase_unstable({\n    indicator,\n    ...baseProps,\n  });\n\n  if (layout === 'pie') {\n    state.triggerButton.children = null;\n  } else if (indicator === 'icon') {\n    state.triggerButton.children = <MoreHorizontalRegular />;\n  }\n\n  return {\n    size,\n    ...state,\n\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      root: Popover,\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: state.popoverSurface,\n      elementType: PopoverSurface,\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: state.tooltip,\n      elementType: Tooltip,\n    }),\n  };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'count') {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n\n    components: {\n      root: 'div',\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: 'div',\n      tooltip: 'div',\n    },\n    root: slot.always(\n      {\n        // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n        children: <></>,\n        size: 'small',\n        trapFocus: true,\n        ...restOfProps,\n        open: popoverOpen,\n        onOpenChange: handleOnPopoverChange,\n      },\n      { elementType: 'div' },\n    ),\n    triggerButton: slot.always(props.triggerButton, {\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n      elementType: 'ul',\n    }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n      elementType: 'div',\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"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"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js

@@ -1,8 +1,10 @@
+'use client';
+import * as React from 'react';
 export const useAvatarGroupPopoverContextValues_unstable = (state)=>{
-    const avatarGroup = {
-        isOverflow: true,
-        size: 24
-    };
+    const avatarGroup = React.useMemo(()=>({
+            isOverflow: true,
+            size: 24
+        }), []);
     return {
         avatarGroup
     };

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n  state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","isOverflow","size"],"mappings":"AAGA,OAAO,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport type { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n  state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n  const avatarGroup = React.useMemo<AvatarGroupContextValue>(\n    () => ({\n      isOverflow: true,\n      size: 24,\n    }),\n    [],\n  );\n\n  return { avatarGroup };\n};\n"],"names":["React","useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","useMemo","isOverflow","size"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,8CAA8C,CACzDC;IAEA,MAAMC,cAAcH,MAAMI,OAAO,CAC/B,IAAO,CAAA;YACLC,YAAY;YACZC,MAAM;QACR,CAAA,GACA,EAAE;IAGJ,OAAO;QAAEH;IAAY;AACvB,EAAE"}

package/lib/contexts/AvatarGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAyB,mCAAmC;AAItG;;;CAGC,GACD,OAAO,MAAMC,qBAAuDF,cAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAEjE,OAAO,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAE/D,OAAO,MAAMC,iCAAiC,CAAIC,WAChDP,mBAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF;;;CAGC,GACD,OAAO,MAAMC,qBAAuDF,cAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAEjE,OAAO,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAE/D,OAAO,MAAMC,iCAAiC,CAAIC,WAChDP,mBAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}

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\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":""}
+{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import type { 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/useAvatar.js

@@ -53,10 +53,8 @@ const useAvatar_unstable = (props, ref)=>{
             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);
+    if (state.icon && !state.icon.hasOwnProperty('children')) {
+        state.icon.children = /*#__PURE__*/ _react.createElement(_reacticons.PersonRegular, null);
     }
     const badge = _reactutilities.slot.optional(props.badge, {
         defaultProps: {
@@ -115,7 +113,7 @@ const useAvatar_unstable = (props, ref)=>{
 };
 const useAvatarBase_unstable = (props, ref)=>{
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const { name, ...rest } = props;
+    const { name, image: imageProp, initials: initialsProp, ...rest } = props;
     const baseId = (0, _reactutilities.useId)('avatar-');
     const root = _reactutilities.slot.always({
         role: 'img',
@@ -126,7 +124,7 @@ const useAvatarBase_unstable = (props, ref)=>{
         elementType: 'span'
     });
     const [imageHidden, setImageHidden] = _react.useState(undefined);
-    let image = _reactutilities.slot.optional(props.image, {
+    let image = _reactutilities.slot.optional(imageProp, {
         defaultProps: {
             alt: '',
             role: 'presentation',
@@ -145,7 +143,7 @@ const useAvatarBase_unstable = (props, ref)=>{
         image.onLoad = (0, _reactutilities.mergeCallbacks)(image.onLoad, ()=>setImageHidden(undefined));
     }
     // Resolve the initials slot, defaulted to getInitials
-    let initials = _reactutilities.slot.optional(props.initials, {
+    let initials = _reactutilities.slot.optional(initialsProp, {
         renderByDefault: true,
         defaultProps: {
             children: (0, _index.getInitials)(name, dir === 'rtl'),

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 { 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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"}
+{"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 && !state.icon.hasOwnProperty('children')) {\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, image: imageProp, initials: initialsProp, ...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(imageProp, {\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(initialsProp, {\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","hasOwnProperty","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","image","imageProp","initialsProp","baseId","always","role","imageHidden","setImageHidden","useState","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}

package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js

@@ -20,8 +20,6 @@ _export(exports, {
         return useAvatarGroup_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const useAvatarGroup_unstable = (props, ref)=>{
     const { size = defaultAvatarGroupSize, ...baseProps } = props;

package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n  AvatarGroupProps,\n  AvatarGroupState,\n} from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { size = defaultAvatarGroupSize, ...baseProps } = props;\n  const state = useAvatarGroupBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n  return {\n    size,\n    ...state,\n  };\n};\n\n/**\n * Create the base state to render AvatarGroup, without design-specific props.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLDivElement of AvatarGroup\n */\nexport const useAvatarGroupBase_unstable = (\n  props: AvatarGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): AvatarGroupBaseState => {\n  const { layout = 'spread' } = props;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'group',\n      ...props,\n      ref,\n    }),\n    { elementType: 'div' },\n  );\n  return { layout, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","size","defaultAvatarGroupSize","baseProps","state","useAvatarGroupBase_unstable","layout","root","always","role","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;0BAqDaO;;;+BAjBAG;;;2BAhBAP;;;;;iEAlBU,QAAQ;gCACgB,4BAA4B;AAiBpE,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,OAAOC,sBAAsB,EAAE,GAAGC,WAAW,GAAGJ;IACxD,MAAMK,QAAQC,4BAA4BF,WAAWH;IAErD,OAAO;QACLC;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAQK,MAAMC,8BAA8B,CACzCN,OACAC;IAEA,MAAM,EAAEM,SAAS,QAAQ,EAAE,GAAGP;IAE9B,MAAMQ,OAAOV,oBAAAA,CAAKW,MAAM,KACtBZ,wCAAAA,EAAyB,OAAO;QAC9Ba,MAAM;QACN,GAAGV,KAAK;QACRC;IACF,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEJ;QAAQK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACrD,EAAE;AAEK,MAAML,yBAAyB,GAAG"}
+{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  AvatarGroupBaseProps,\n  AvatarGroupBaseState,\n  AvatarGroupProps,\n  AvatarGroupState,\n} from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n  const { size = defaultAvatarGroupSize, ...baseProps } = props;\n  const state = useAvatarGroupBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n  return {\n    size,\n    ...state,\n  };\n};\n\n/**\n * Create the base state to render AvatarGroup, without design-specific props.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLDivElement of AvatarGroup\n */\nexport const useAvatarGroupBase_unstable = (\n  props: AvatarGroupBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): AvatarGroupBaseState => {\n  const { layout = 'spread' } = props;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'group',\n      ...props,\n      ref,\n    }),\n    { elementType: 'div' },\n  );\n  return { layout, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","size","defaultAvatarGroupSize","baseProps","state","useAvatarGroupBase_unstable","layout","root","always","role","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;0BAqDaM;;;+BAjBAG;;;2BAhBAP;;;;gCAjBkC,4BAA4B;AAiBpE,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,OAAOC,sBAAsB,EAAE,GAAGC,WAAW,GAAGJ;IACxD,MAAMK,QAAQC,4BAA4BF,WAAWH;IAErD,OAAO;QACLC;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAQK,MAAMC,8BAA8B,CACzCN,OACAC;IAEA,MAAM,EAAEM,SAAS,QAAQ,EAAE,GAAGP;IAE9B,MAAMQ,OAAOV,oBAAAA,CAAKW,MAAM,KACtBZ,wCAAAA,EAAyB,OAAO;QAC9Ba,MAAM;QACN,GAAGV,KAAK;QACRC;IACF,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEJ;QAAQK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACrD,EAAE;AAEK,MAAML,yBAAyB,GAAG"}

package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -8,12 +9,17 @@ Object.defineProperty(exports, "useAvatarGroupContextValues", {
         return useAvatarGroupContextValues;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const useAvatarGroupContextValues = (state)=>{
     const { layout, size } = state;
-    const avatarGroup = {
+    const avatarGroup = _react.useMemo(()=>({
+            layout,
+            size
+        }), [
         layout,
         size
-    };
+    ]);
     return {
         avatarGroup
     };

package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup: AvatarGroupContextValue = {\n    layout,\n    size,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"mappings":";;;;;;;;;;AAEO,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n  const { layout, size } = state;\n\n  const avatarGroup = React.useMemo<AvatarGroupContextValue>(\n    () => ({\n      layout,\n      size,\n    }),\n    [layout, size],\n  );\n\n  return { avatarGroup };\n};\n"],"names":["React","useAvatarGroupContextValues","state","layout","size","avatarGroup","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAcL,OAAMM,OAAO,CAC/B,IAAO,CAAA;YACLH;YACAC;SACF,CAAA,EACA;QAACD;QAAQC;KAAK;IAGhB,OAAO;QAAEC;IAAY;AACvB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\nexport type AvatarGroupItemBaseProps = AvatarGroupItemProps;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n\nexport type AvatarGroupItemBaseState = Omit<AvatarGroupItemState, 'size'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n  root: NonNullable<Slot<'div', 'li'>>;\n\n  /**\n   * Avatar that represents a person or entity.\n   */\n  avatar: NonNullable<Slot<typeof Avatar>>;\n\n  /**\n   * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n   * The content of the label, by default, is the `name` prop from the `avatar` slot.\n   */\n  overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\nexport type AvatarGroupItemBaseProps = AvatarGroupItemProps;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n  /**\n   * Whether the Avatar is an overflow item.\n   *\n   * @default false\n   */\n  isOverflowItem?: boolean;\n\n  layout: AvatarGroupProps['layout'];\n  size: AvatarSize;\n};\n\nexport type AvatarGroupItemBaseState = Omit<AvatarGroupItemState, 'size'>;\n"],"names":[],"mappings":""}

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

@@ -17,8 +17,6 @@ _export(exports, {
         return useAvatarGroupItem_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _Avatar = require("../Avatar/Avatar");
 const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
 const _useAvatarGroup = require("../AvatarGroup/useAvatarGroup");

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 {\n  AvatarGroupItemBaseProps,\n  AvatarGroupItemBaseState,\n  AvatarGroupItemProps,\n  AvatarGroupItemState,\n} 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 state = useAvatarGroupItemBase_unstable(props, ref);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const size = groupSize ?? defaultAvatarGroupSize;\n\n  return {\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n    },\n    avatar: slot.always(props.avatar, {\n      defaultProps: { size, color: 'colorful', ...state.avatar },\n      elementType: Avatar,\n    }),\n  };\n};\n\n/**\n * Create the base state required to render AvatarGroupItem, without default slot props or component types.\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 * @returns AvatarGroupItem state without default slot props or component types\n */\nexport const useAvatarGroupItemBase_unstable = (\n  props: AvatarGroupItemBaseProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemBaseState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\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 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    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: 'span',\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        ...avatarSlotProps,\n      },\n      elementType: 'span',\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","state","useAvatarGroupItemBase_unstable","groupSize","ctx","size","components","avatar","always","defaultProps","color","elementType","groupIsOverflow","isOverflow","layout","style","className","overflowLabel","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","root","children","name"],"mappings":"AAAA;;;;;;;;;;;;mCAyDaW;eAAAA;;+BAjCAJ;;;;;iEAtBU,QAAQ;wBACR,mBAAmB;oCACyB,oCAAoC;gCAChE,gCAAgC;gCAClD,4BAA4B;sCACb,mCAAmC;AAiBhE,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IACrD,MAAMG,gBAAYT,kDAAAA,EAA+BU,CAAAA,MAAOA,IAAIC,IAAI;IAChE,MAAMA,OAAOF,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaR,sCAAAA;IAE1B,OAAO;QACLU;QACA,GAAGJ,KAAK;QACRK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,MAAMK,UAAU;YACnBC,QAAQf,cAAAA;QACV;QACAe,QAAQX,oBAAAA,CAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBAAEJ;gBAAMK,OAAO;gBAAY,GAAGT,MAAMM,MAAM;YAAC;YACzDI,aAAanB,cAAAA;QACf;IACF;AACF,EAAE;AAYK,wCAAwC,CAC7CO,OACAC;IAEA,MAAMY,kBAAkBlB,sDAAAA,EAA+BU,CAAAA,MAAOA,IAAIS,UAAU;IAC5E,MAAMC,aAASpB,kDAAAA,EAA+BU,CAAAA,MAAOA,IAAIU,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,iBAAiB,GAAGnB;IAChE,MAAMoB,4BAAwBtB,yCAAAA,EAAoBJ,sCAAAA;IAElD,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBb;QAChBE;QACAR,YAAY;YACVoB,MAAMd,kBAAkB,OAAO;YAC/BL,QAAQ;YACRU,eAAe;QACjB;QACAS,MAAM9B,oBAAAA,CAAKY,MAAM,CAACT,MAAM2B,IAAI,EAAE;YAC5BjB,cAAc;gBACZM;gBACAC;YACF;YACAL,aAAaC,kBAAkB,OAAO;QACxC;QACAL,QAAQX,oBAAAA,CAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBACZT;gBACA,GAAGkB,eAAe;YACpB;YACAP,aAAa;QACf;QACAM,eAAerB,oBAAAA,CAAKY,MAAM,CAACS,eAAe;YACxCR,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfkB,UAAU5B,MAAM6B,IAAI;YACtB;YACAjB,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport type * 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 {\n  AvatarGroupItemBaseProps,\n  AvatarGroupItemBaseState,\n  AvatarGroupItemProps,\n  AvatarGroupItemState,\n} 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 state = useAvatarGroupItemBase_unstable(props, ref);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const size = groupSize ?? defaultAvatarGroupSize;\n\n  return {\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n    },\n    avatar: slot.always(props.avatar, {\n      defaultProps: { size, color: 'colorful', ...state.avatar },\n      elementType: Avatar,\n    }),\n  };\n};\n\n/**\n * Create the base state required to render AvatarGroupItem, without default slot props or component types.\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 * @returns AvatarGroupItem state without default slot props or component types\n */\nexport const useAvatarGroupItemBase_unstable = (\n  props: AvatarGroupItemBaseProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemBaseState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\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 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    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: 'span',\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        ...avatarSlotProps,\n      },\n      elementType: 'span',\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":["Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","state","useAvatarGroupItemBase_unstable","groupSize","ctx","size","components","avatar","always","defaultProps","color","elementType","groupIsOverflow","isOverflow","layout","style","className","overflowLabel","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","root","children","name"],"mappings":"AAAA;;;;;;;;;;;;mCAyDaU;eAAAA;;+BAjCAJ;;;;wBArBU,mBAAmB;oCACyB,oCAAoC;gCAChE,gCAAgC;gCAClD,4BAA4B;sCACb,mCAAmC;AAiBhE,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IACrD,MAAMG,gBAAYT,kDAAAA,EAA+BU,CAAAA,MAAOA,IAAIC,IAAI;IAChE,MAAMA,OAAOF,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaR,sCAAAA;IAE1B,OAAO;QACLU;QACA,GAAGJ,KAAK;QACRK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,MAAMK,UAAU;YACnBC,QAAQf,cAAAA;QACV;QACAe,QAAQX,oBAAAA,CAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBAAEJ;gBAAMK,OAAO;gBAAY,GAAGT,MAAMM,MAAM;YAAC;YACzDI,aAAanB,cAAAA;QACf;IACF;AACF,EAAE;AAYK,wCAAwC,CAC7CO,OACAC;IAEA,MAAMY,sBAAkBlB,kDAAAA,EAA+BU,CAAAA,MAAOA,IAAIS,UAAU;IAC5E,MAAMC,aAASpB,kDAAAA,EAA+BU,CAAAA,MAAOA,IAAIU,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,iBAAiB,GAAGnB;IAChE,MAAMoB,wBAAwBtB,6CAAAA,EAAoBJ,sCAAAA;IAElD,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBb;QAChBE;QACAR,YAAY;YACVoB,MAAMd,kBAAkB,OAAO;YAC/BL,QAAQ;YACRU,eAAe;QACjB;QACAS,MAAM9B,oBAAAA,CAAKY,MAAM,CAACT,MAAM2B,IAAI,EAAE;YAC5BjB,cAAc;gBACZM;gBACAC;YACF;YACAL,aAAaC,kBAAkB,OAAO;QACxC;QACAL,QAAQX,oBAAAA,CAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBACZT;gBACA,GAAGkB,eAAe;YACpB;YACAP,aAAa;QACf;QACAM,eAAerB,oBAAAA,CAAKY,MAAM,CAACS,eAAe;YACxCR,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfkB,UAAU5B,MAAM6B,IAAI;YACtB;YACAjB,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "AvatarGroupPopover", {
         return AvatarGroupPopover;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover");
 const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");

package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0CACmB,6BAA6B;oDACnB,uCAAuC;qCACvD,kCAAkC;uCAC/B,0BAA0B;mDACpB,uCAAuC;AAMrF,MAAMM,qBAAwDC,CAAAA;IACnE,MAAMC,YAAQJ,qDAAAA,EAA+BG;IAC7C,MAAME,oBAAgBP,+EAAAA,EAA4CM;QAElEH,uEAAAA,EAAqCG;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n  const state = useAvatarGroupPopover_unstable(props);\n  const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n  useAvatarGroupPopoverStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n  return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;0CAGkD,6BAA6B;oDACnB,uCAAuC;qCACvD,kCAAkC;uCAC/B,0BAA0B;mDACpB,uCAAuC;AAMrF,MAAMK,qBAAwDC,CAAAA;IACnE,MAAMC,YAAQJ,qDAAAA,EAA+BG;IAC7C,MAAME,oBAAgBP,+EAAAA,EAA4CM;QAElEH,uEAAAA,EAAqCG;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

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

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\nexport type AvatarGroupPopoverBaseProps = AvatarGroupPopoverProps;\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n\nexport type AvatarGroupPopoverBaseState = Omit<AvatarGroupPopoverState, 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n  root: NonNullable<Slot<PopoverProps>>;\n\n  /**\n   * Button that triggers the Popover.\n   */\n  triggerButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * List that contains the overflowed AvatarGroupItems.\n   */\n  content: NonNullable<Slot<'ul'>>;\n\n  /**\n   * PopoverSurface that contains the content.\n   */\n  popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n  /**\n   * Tooltip shown when triggerButton is hovered.\n   */\n  tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n  /**\n   * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n   * Note: The indicator will default to `icon` when the size is less than 24.\n   * @default count\n   */\n  indicator?: 'count' | 'icon';\n\n  /**\n   * Number of AvatarGroupItems that will be rendered.\n   *\n   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n   * children, this is not possible and therefore it has do be added manually.\n   */\n  count?: number;\n\n  children: React.ReactNode;\n};\n\nexport type AvatarGroupPopoverBaseProps = AvatarGroupPopoverProps;\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n  Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n    popoverOpen: boolean;\n    layout: AvatarGroupProps['layout'];\n    size: AvatarSize;\n  };\n\nexport type AvatarGroupPopoverBaseState = Omit<AvatarGroupPopoverState, 'size'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <state.root>\n      <PopoverTrigger disableButtonEnhancement>\n        <state.tooltip>\n          <state.triggerButton />\n        </state.tooltip>\n      </PopoverTrigger>\n      <state.popoverSurface>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <state.content />\n        </AvatarGroupProvider>\n      </state.popoverSurface>\n    </state.root>\n  );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":";;;;+BAaaG;;;;;;4BAZb,iCAAiD;oCACb,oCAAoC;gCAG5C,4BAA4B;8BAEzB,0BAA0B;AAMlD,0CAA0C,CAC/CC,OACAC;QAEAJ,2BAAAA,EAAqCG;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACJ,4BAAAA,EAAAA;gBAAeK,wBAAwB,EAAA;0BACtC,WAAA,OAAA,eAAA,EAACH,MAAMI,OAAO,EAAA;8BACZ,WAAA,OAAA,eAAA,EAACJ,MAAMK,aAAa,EAAA,CAAA;;;8BAGxB,eAAA,EAACL,MAAMM,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACV,uCAAAA,EAAAA;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,WAAA,OAAA,eAAA,EAACR,MAAMS,OAAO,EAAA,CAAA;;;;;AAKxB,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <state.root>\n      <PopoverTrigger disableButtonEnhancement>\n        <state.tooltip>\n          <state.triggerButton />\n        </state.tooltip>\n      </PopoverTrigger>\n      <state.popoverSurface>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <state.content />\n        </AvatarGroupProvider>\n      </state.popoverSurface>\n    </state.root>\n  );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":";;;;+BAaaG;;;;;;4BAZb,iCAAiD;oCACb,oCAAoC;gCAG5C,4BAA4B;8BAEzB,0BAA0B;AAMlD,0CAA0C,CAC/CC,OACAC;QAEAJ,2BAAAA,EAAqCG;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACJ,4BAAAA,EAAAA;gBAAeK,wBAAwB,EAAA;0BACtC,WAAA,OAAA,eAAA,EAACH,MAAMI,OAAO,EAAA;8BACZ,WAAA,OAAA,eAAA,EAACJ,MAAMK,aAAa,EAAA,CAAA;;;8BAGxB,eAAA,EAACL,MAAMM,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACV,uCAAAA,EAAAA;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,WAAA,OAAA,eAAA,EAACR,MAAMS,OAAO,EAAA,CAAA;;;;;AAKxB,EAAE"}

package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js

@@ -87,11 +87,11 @@ const useAvatarGroupPopoverBase_unstable = (props)=>{
         layout,
         popoverOpen,
         components: {
-            root: _reactpopover.Popover,
+            root: 'div',
             triggerButton: 'button',
             content: 'ul',
-            popoverSurface: _reactpopover.PopoverSurface,
-            tooltip: _reacttooltip.Tooltip
+            popoverSurface: 'div',
+            tooltip: 'div'
         },
         root: _reactutilities.slot.always({
             // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.

package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport {\n  OnOpenChangeData,\n  OpenPopoverEvents,\n  Popover,\n  type PopoverProps,\n  PopoverSurface,\n} from '@fluentui/react-popover';\nimport type {\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n  const state = useAvatarGroupPopoverBase_unstable({\n    indicator,\n    ...baseProps,\n  });\n\n  if (layout === 'pie') {\n    state.triggerButton.children = null;\n  } else if (indicator === 'icon') {\n    state.triggerButton.children = <MoreHorizontalRegular />;\n  }\n\n  return {\n    size,\n    ...state,\n\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      root: Popover,\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: state.popoverSurface,\n      elementType: PopoverSurface,\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: state.tooltip,\n      elementType: Tooltip,\n    }),\n  };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'count') {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n\n    components: {\n      root: Popover,\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(\n      {\n        // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n        children: <></>,\n        size: 'small',\n        trapFocus: true,\n        ...restOfProps,\n        open: popoverOpen,\n        onOpenChange: handleOnPopoverChange,\n      },\n      { elementType: 'div' },\n    ),\n    triggerButton: slot.always(props.triggerButton, {\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n      elementType: 'ul',\n    }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n      elementType: 'div',\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"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"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-popover';\nimport { Popover, type PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type {\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n  const state = useAvatarGroupPopoverBase_unstable({\n    indicator,\n    ...baseProps,\n  });\n\n  if (layout === 'pie') {\n    state.triggerButton.children = null;\n  } else if (indicator === 'icon') {\n    state.triggerButton.children = <MoreHorizontalRegular />;\n  }\n\n  return {\n    size,\n    ...state,\n\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      root: Popover,\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: state.popoverSurface,\n      elementType: PopoverSurface,\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: state.tooltip,\n      elementType: Tooltip,\n    }),\n  };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'count') {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n\n    components: {\n      root: 'div',\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: 'div',\n      tooltip: 'div',\n    },\n    root: slot.always(\n      {\n        // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n        children: <></>,\n        size: 'small',\n        trapFocus: true,\n        ...restOfProps,\n        open: popoverOpen,\n        onOpenChange: handleOnPopoverChange,\n      },\n      { elementType: 'div' },\n    ),\n    triggerButton: slot.always(props.triggerButton, {\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n      elementType: 'ul',\n    }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n      elementType: 'div',\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"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"}

package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -8,11 +9,13 @@ Object.defineProperty(exports, "useAvatarGroupPopoverContextValues_unstable", {
         return useAvatarGroupPopoverContextValues_unstable;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const useAvatarGroupPopoverContextValues_unstable = (state)=>{
-    const avatarGroup = {
-        isOverflow: true,
-        size: 24
-    };
+    const avatarGroup = _react.useMemo(()=>({
+            isOverflow: true,
+            size: 24
+        }), []);
     return {
         avatarGroup
     };

package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n  state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","isOverflow","size"],"mappings":";;;;;;;;;;AAGO,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport type { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n  state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n  const avatarGroup = React.useMemo<AvatarGroupContextValue>(\n    () => ({\n      isOverflow: true,\n      size: 24,\n    }),\n    [],\n  );\n\n  return { avatarGroup };\n};\n"],"names":["React","useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","useMemo","isOverflow","size"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,MAAMC,8CAA8C,CACzDC;IAEA,MAAMC,cAAcH,OAAMI,OAAO,CAC/B,IAAO,CAAA;YACLC,YAAY;YACZC,MAAM;SACR,CAAA,EACA,EAAE;IAGJ,OAAO;QAAEH;IAAY;AACvB,EAAE"}

package/lib-commonjs/contexts/AvatarGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;sBAUaE;;;uBAMAG;;;kCAEAE;;;;sCAhBsD,mCAAmC;AAQ/F,MAAML,yBAAuDF,mCAAAA,EAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAE1D,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAExD,MAAMC,iCAAiC,CAAIC,eAChDP,wCAAAA,EAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;sBAUaE;;;uBAMAG;;;kCAEAE;;;;sCAhBqC,mCAAmC;AAQ9E,MAAML,yBAAuDF,mCAAAA,EAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAE1D,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAExD,MAAMC,iCAAiC,CAAIC,eAChDP,wCAAAA,EAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.11.0",
+  "version": "9.11.1",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,16 +15,16 @@
     "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.5.1",
-    "@fluentui/react-context-selector": "^9.2.15",
+    "@fluentui/react-badge": "^9.5.2",
+    "@fluentui/react-context-selector": "^9.2.16",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-popover": "^9.14.1",
+    "@fluentui/react-popover": "^9.14.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-tabster": "^9.26.14",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-tooltip": "^9.10.0",
-    "@fluentui/react-utilities": "^9.26.2",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-tooltip": "^9.10.1",
+    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },