@fluentui/react-avatar 9.0.3 → 9.1.0

package/SPEC-AvatarGroup.md

@@ -28,16 +28,33 @@ There's only one existent component similar to AvatarGroup in v8 `Facepile`. v0
 ## Sample Code
 
 ```jsx
-import { AvatarGroup, Avatar } from '@fluentui/react-avatar';
+const names = [
+  'Johnie McConnell',
+  'Allan Munger',
+  'Erik Nason',
+  'Kristin Patterson',
+  'Daisy Phillips',
+  'Carole Poland',
+  'Carlos Slattery',
+  'Robert Tolbert',
+  'Kevin Sturgis',
+  'Charlotte Waltson',
+  'Elliot Woodward',
+];
+
+const AvatarGroup = () => {
+  const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
 
-const App = () => {
   return (
-    <AvatarGroup layout="spread" size={32}>
-      <Avatar color="colorful" name="Katri Athokas" />
-      <Avatar color="colorful" name="Elvia Atkins" />
-      <Avatar color="colorful" name="Cameron Evans" />
-      <Avatar color="colorful" name="Wanda Howard" />
-      <Avatar color="colorful" name="Mona Kane" />
+    <AvatarGroup {...props}>
+      {inlineItems.map(name => (
+        <AvatarGroupItem name={name} key={name} />
+      ))}
+      <AvatarGroupPopover>
+        {overflowItems.map(name => (
+          <AvatarGroupItem name={name} key={name} />
+        ))}
+      </AvatarGroupPopover>
     </AvatarGroup>
   );
 };
@@ -49,79 +66,77 @@ There are three layout variants in AvatarGroup:
 
 - Spread layout (Default): Avatars are spaced evenly.
 - Stack layout: Avatars are overlapped evenly.
-- Pie layout: For the pie layout there can be a minimum of two Avatars and a maximum of three. This layout does not overflow and provides a popover for more details.
-
-  - If the size of the avatar group is `36` or smaller then only the first letter of the initials will be displayed.
-  - `maxAvatars` will be ignored when using this layout.
-
-- The `spread` and `stack` layouts have a maximum of 5 avatars before overflowing by default, which can be overridden via the `maxAvatars` prop.
+- Pie layout: Avatars are "cut" in a pie design. When there are two Avatars inline, the Avatars will be cut in half and placed side by side. When there are three Avatars inline, the first Avatar will be cut in half and other two will be downscaled by 50%.
+  - The pie layout must have 3 or less Avatars inline and all Avatars must repeat in the `AvatarGroupPopover`. This is handled by `partitionAvatarGroupItems`.
+- If `partitionAvatarGroupItems` is used, the `spread` and `stack` layouts will have a maximum of 5 avatars before overflowing by default. This can be overridden via the `maxAvatars` option in `partitionAvatarGroupItems`.
 
 ## API
 
-See [AvatarGroup.types.ts](./src/components/AvatarGroup/AvatarGroup.types.ts) for more details.
+See [AvatarGroup.types.ts](./src/components/AvatarGroup/AvatarGroup.types.ts), [AvatarGroupPopover.types.ts](./src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts) and [AvatarGroupItem.types.ts](./src/components/AvatarGroupItem/AvatarGroupItem.types.ts) for more details.
 
 - `size`: Group size will override the children's current size. This is to ensure that the `AvatarGroup`'s spacing is correct because it changes depending on the group size.
-- `popoverSurface`: All Avatars in `popoverSurface` will have a size of 24 and will be encased in a div to apply stylings.
-- Avatar `color`: AvatarGroup's colors will follow the order below, but they can be overriden by providing a color specific color on a given avatar.
+- `AvatarGroupPopover`: All Avatars in `AvatarGroupPopover` will have a size of 24 and have a wrapper to apply stylings.
+- AvatarGroupItem `color`: Can be overridden by providing a specific color on a given avatar.
 
 #### Color override example:
 
-In this example, the first Avatar will have a `darkRed` color, while all the other avatars will follow the default color order.
+In this example, the first AvatarGroupItem will have a `darkRed` color, while all the other Avatars have their color assigned by Avatar.
 
 ```jsx
 <AvatarGroup>
-  <Avatar color="darkRed" name="Katri Athokas" />
-  <Avatar name="Elvia Atkins" />
-  <Avatar name="Cameron Evans" />
-  <Avatar name="Wanda Howard" />
-  <Avatar name="Mona Kane" />
+  <AvatarGroupItem color="darkRed" name="Katri Athokas" />
+  <AvatarGroupItem name="Elvia Atkins" />
+  <AvatarGroupItem name="Cameron Evans" />
+  <AvatarGroupItem name="Wanda Howard" />
+  <AvatarGroupItem name="Mona Kane" />
 </AvatarGroup>
 ```
 
-#### Color order:
-
-|                       |                    |                       |
-| --------------------- | ------------------ | --------------------- |
-| Avatar 1: Red         | Avatar 2: Blue     | Avatar 3: Purple      |
-| Avatar 4: Forest      | Avatar 5: Pink     | Avatar 6: Lavender    |
-| Avatar 7: Teal        | Avatar 8: Gold     | Avatar 9: Cranberry   |
-| Avatar 10: Cornflower | Avatar 11: Lilac   | Avatar 12: Anchor     |
-| Avatar 13: Dark Green | Avatar 14: Pumpkin | Avatar 15: Dark Red   |
-| Avatar 16: Mink       | Avatar 17: Grape   | Avatar 18: Platinum   |
-| Avatar 19: Royal Blue | Avatar 20: Brown   | Avatar 21: Peach      |
-| Avatar 22: Steel      | Avatar 23: Navy    | Avatar 24: Seafoam    |
-| Avatar 25: Magenta    | Avatar 26: Beige   | Avatar 27: Light Teal |
-| Avatar 28: Gold       | Avatar 29: Plum    | Avatar 30: Marigold   |
-
 ## Structure
 
 - _**Public**_
 
 ```jsx
 <AvatarGroup layout="spread" size={32}>
-  <Avatar name="Katri Athokas" />
-  <Avatar name="Elvia Atkins" />
-  <Avatar name="Cameron Evans" />
-  <Avatar name="Wanda Howard" />
-  <Avatar name="Mona Kane" />
+  <AvatarGroupItem name="Katri Athokas" />
+  <AvatarGroupItem name="Elvia Atkins" />
+  <AvatarGroupItem name="Cameron Evans" />
+  <AvatarGroupItem name="Wanda Howard" />
+  <AvatarGroupPopover>
+    <AvatarGroupItem name="Mona Kane" />
+    <AvatarGroupItem name="Kristin Patterson" />
+    <AvatarGroupItem name="Elliot Woodward" />
+    <AvatarGroupItem name="Charlotte Waltson" />
+  </AvatarGroupPopover>
 </AvatarGroup>
 ```
 
 - _**Internal**_
 
 ```jsx
+// AvatarGroup
+<AvatarGroupProvider value={contextValues.avatarGroup}>
+  <slots.root {...slotProps.root} />
+</AvatarGroupProvider>
+
+// AvatarGroupPopover
+<slots.root {...(slotProps.root as PopoverProps)}>
+  <PopoverTrigger>
+    <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>
+      <slots.triggerButton {...slotProps.triggerButton} />
+    </slots.tooltip>
+  </PopoverTrigger>
+  <slots.popoverSurface {...slotProps.popoverSurface}>
+    <AvatarGroupProvider value={contextValues.avatarGroup}>
+      <slots.content {...slotProps.content} />
+    </AvatarGroupProvider>
+  </slots.popoverSurface>
+</slots.root>
+
+// AvatarGroupItem
 <slots.root {...slotProps.root}>
-  {state.root.children}
-  {slots.popoverSurface && slots.popoverTrigger && slotProps.popoverSurface.children && (
-    <Popover trapFocus size="small">
-      <PopoverTrigger>
-        <Tooltip content={state.tooltipContent} relationship="description" appearance="inverted">
-          <slots.popoverTrigger {...slotProps.popoverTrigger} />
-        </Tooltip>
-      </PopoverTrigger>
-      <slots.popoverSurface {...slotProps.popoverSurface} />
-    </Popover>
-  )}
+  <slots.avatar {...slotProps.avatar} />
+  {state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}
 </slots.root>
 ```
 
@@ -129,46 +144,49 @@ In this example, the first Avatar will have a `darkRed` color, while all the oth
 
 ```html
 <div className="fui-AvatarGroup" role="group">
-  <Avatar />
-  <Avatar />
-  <Avatar />
-  <Avatar />
-  <button>+1</button>
-</div>
-
-// on document.body
-<div class="fui-AvatarGroup__popoverSurface" role="complementary">
-  <div class="fui-AvatarGroup__popoverSurfaceItem">
+  <div class="fui-AvatarGroupItem">
     <Avatar />
-    <label />
   </div>
-  <!-- ... -->
-  <div class="fui-AvatarGroup__popoverSurfaceItem">
+  <div class="fui-AvatarGroupItem">
     <Avatar />
-    <label />
   </div>
+  <button>+1</button>
+</div>
+
+// on document.body
+<div class="fui-AvatarGroupPopover" role="dialog" aria-label="Overflow">
+  <ul>
+    <li class="fui-AvatarGroupItem">
+      <Avatar />
+      <label />
+    </li>
+    <li class="fui-AvatarGroupItem">
+      <Avatar />
+      <label />
+    </li>
+  </ul>
 </div>
 ```
 
 ## Migration
 
-See [MIGRATION-AvatarGroup.md](MIGRATION-AvatarGroup.md) for details.
+See [v8 to v9 migration guide](https://react.fluentui.dev/?path=/docs/concepts-upgrading-from-v8-components-avatargroup-upgrade--page) for details.
 
 ## Behaviors
 
 _Explain how the component will behave in use, including:_
 
-- _Component States_
-  - Overflowed state: When there are more Avatars than the `maxAvatars`, an overflow indicator will be rendered that can be clicked to look at the rest of the avatars.
-    - `Pie` layout: since `maxAvatars` is ignored, the overflow indicator will be rendered strictly when there's more than three avatars.
-- _Interaction_
-  - _Keyboard_: Overflow indicator can be interacted with the keyboard and when enter is pressed a popover that traps focus will be rendered.
-  - _Cursor_ and _Touch_: When overflow indicator is clicked, the popover is displayed with the avatars that overflow. When the overflow indicator is hovered, a tooltip will read the number of people overflowed (`{numOverflowAvatars} more people` by default).
+- _AvatarGroupPopover Component States_
+
+  - _Keyboard_: `triggerButton` can be interacted with the keyboard and when enter is pressed a popover that traps focus on the PopoverSurface will be rendered.
+  - _Cursor_ and _Touch_: When overflow indicator is clicked, the popover is displayed with the avatars that overflow. When the overflow indicator is hovered, a tooltip will read `View more people.`.
+  - _Screen readers_:
+    - When the `triggerButton` is focused, its content will be read.
+
+- _AvatarGroupItem Component States_
   - _Screen readers_:
-    - `Avatar`: logic is handled by `Avatar` component.
-    - `AvatarGroup`:
-      - When a label is used alongside `AvatarGroup` and focused, all Avatars are read. If the overflow indicator is rendered, the popover localized text is read.
-      - Avatars can be focused and the name will be read. To get to the Avatars in the overflow menu, the Popover must be triggered, which will in turn set focus on it and let the user traverse through the set of overflowed Avatars.
+    - When AvatarGroupItem is rendered inline, logic is handled by `Avatar` component.
+    - When AvatarGroupItem is rendered inside AvatarGroupPopover, the label is disabled via `aria-label` and `Avatar` will handle the screen reader.
 
 ## Accessibility
 
@@ -176,10 +194,10 @@ Base accessibility information is included in the design document. After the spe
 
 - There's no native element for this component.
 
-- `AvatarGroup` will have a role of `group` and slots will be handled by their respective slot type.
-- Only the overflow indicator will be focusable by the keyboard. After the overflow indicator is pressed, the popover will handle focus using the `trapFocus` prop.
+- `AvatarGroup` will have a role of `group`.
+- Only the `popoverTrigger` will be focusable by the keyboard.
 - There are no live-regions in `AvatarGroup`.
-- A Tooltip will appear when the overflow indicator is hovered or focused.
-  - Screen reader: when overflow indicator is rendered and focused, screen reader will read the content of the tooltip.
-  - Tooltip cannot be focused itself.
-- Focus will only be trapped when the overflow indicator is triggered.
+- A Tooltip will appear when the `popoverTrigger` is hovered or focused.
+- Focus will only be trapped when the `popoverTrigger` is triggered.
+- The label rendered along with the Avatar inside AvatarGroupPopover is disabled via `aria-label`.
+- A `<ul>` with role list is rendered inside the PopoverSurface.

package/dist/index.d.ts

@@ -2,13 +2,18 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { PopoverSurface } from '@fluentui/react-popover';
+import type { PopoverProps } from '@fluentui/react-popover';
+import type { PopoverSurface } from '@fluentui/react-popover';
 import { PresenceBadge } from '@fluentui/react-badge';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { TooltipProps } from '@fluentui/react-tooltip';
+import type { TooltipProps } from '@fluentui/react-tooltip';
 
 export declare const Avatar: ForwardRefComponent<AvatarProps>;
 
@@ -22,6 +27,14 @@ export declare const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
 
 export declare const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots>;
 
+export declare type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {
+    isOverflow?: boolean;
+};
+
+export declare type AvatarGroupContextValues = {
+    avatarGroup: AvatarGroupContextValue;
+};
+
 /**
  * The AvatarGroupItem component represents a single person or entity.
  * AvatarGroupItem should only be used in an AvatarGroup component.
@@ -36,7 +49,7 @@ export declare const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSl
 export declare type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;
 
 export declare type AvatarGroupItemSlots = {
-    root: NonNullable<Slot<'div'>>;
+    root: NonNullable<Slot<'div', 'li'>>;
     /**
      * Avatar that represents a person or entity.
      */
@@ -58,71 +71,93 @@ export declare type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots>
      * @default false
      */
     isOverflowItem?: boolean;
-    nonOverflowAvatarsCount: number;
     layout: AvatarGroupProps['layout'];
     size: AvatarSizes;
 };
 
 /**
- * AvatarGroup Props
+ * The AvatarGroupPopover component provides a button with a Popover containing the children provided.
  */
-export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
-    /**
-     * Layout the Avatars should be displayed as.
-     * @default spread
-     */
-    layout?: 'spread' | 'stack' | 'pie';
-    /**
-     * Maximum number of Avatars to be displayed before overflowing.
-     * Note: if pie layout is used, `maxAvatars` will be ignored.
-     * @default 5
-     */
-    maxAvatars?: number;
+export declare const AvatarGroupPopover: React_2.FC<AvatarGroupPopoverProps>;
+
+export declare const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots>;
+
+/**
+ * AvatarGroupPopover Props
+ */
+export declare type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {
     /**
-     * Whether the overflow indicator should render an icon instead of the number of overflowed avatars.
-     * Note: The overflowIndicator will default to `icon` when the size is less than 24.
+     * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.
+     * Note: The indicator will default to `icon` when the size is less than 24.
      * @default count
      */
-    overflowIndicator?: 'count' | 'icon';
+    indicator?: 'count' | 'icon';
     /**
-     * Size of the avatars.
-     * @default 32
+     * Number of AvatarGroupItems that will be rendered.
+     *
+     * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the
+     * children, this is not possible and therefore it has do be added manually.
      */
-    size?: AvatarSizes;
+    count?: number;
+    children: React_2.ReactNode;
 };
 
-export declare type AvatarGroupSlots = {
-    root: NonNullable<Slot<'div'>>;
+export declare type AvatarGroupPopoverSlots = {
+    root: NonNullable<Slot<PopoverProps>>;
     /**
-     * Popover trigger slot that can be used to change the overflow indicator.
+     * Button that triggers the Popover.
      */
-    overflowButton?: NonNullable<Slot<'button'>>;
+    triggerButton: NonNullable<Slot<'button'>>;
     /**
-     * List that contains the overflow AvatarGroupItems.
+     * List that contains the overflowed AvatarGroupItems.
      */
-    overflowContent?: NonNullable<Slot<'div'>>;
+    content: NonNullable<Slot<'ul'>>;
     /**
-     * PopoverSurface that contains the overflow content.
+     * PopoverSurface that contains the content.
      */
-    overflowSurface?: NonNullable<Slot<typeof PopoverSurface>>;
+    popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;
+    /**
+     * Tooltip shown when triggerButton is hovered.
+     */
+    tooltip: NonNullable<Slot<TooltipProps>>;
 };
 
 /**
- * State used in rendering AvatarGroup
+ * State used in rendering AvatarGroupPopover
  */
-export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size' | 'overflowIndicator'>> & {
+export declare type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'indicator'>> & {
+    popoverOpen: boolean;
+    layout: AvatarGroupProps['layout'];
+    size: AvatarSizes;
+};
+
+/**
+ * AvatarGroup Props
+ */
+export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
     /**
-     * Whether there are more Avatars than `maxAvatars`.
-     * @default false
+     * Layout the AvatarGroupItems should be displayed as.
+     * @default spread
      */
-    hasOverflow: boolean;
+    layout?: 'spread' | 'stack' | 'pie';
     /**
-     * Tooltip content for the overflow indicator.
+     * Size of the AvatarGroupItems.
+     * @default 32
      */
-    tooltipContent: TooltipProps['content'];
-    nonOverflowAvatarsCount: number;
+    size?: AvatarSizes;
+};
+
+export declare const AvatarGroupProvider: Provider<AvatarGroupContextValue> & FC<ProviderProps<AvatarGroupContextValue>>;
+
+export declare type AvatarGroupSlots = {
+    root: NonNullable<Slot<'div'>>;
 };
 
+/**
+ * State used in rendering AvatarGroup
+ */
+export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;
+
 /**
  * A specific named color for the Avatar
  */
@@ -259,18 +294,41 @@ export declare function getInitials(displayName: string | undefined | null, isRt
     firstInitialOnly?: boolean;
 }): string;
 
+/**
+ * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.
+ *
+ * @param options - Configure the partition options
+ *
+ * @returns Two arrays split into inline items and overflow items based on maxInlineItems.
+ */
+export declare const partitionAvatarGroupItems: <T>(options: PartitionAvatarGroupItemsOptions<T>) => {
+    inlineItems: T[];
+    overflowItems: readonly T[];
+};
+
+export declare type PartitionAvatarGroupItemsOptions<T> = {
+    items: readonly T[];
+    layout?: 'spread' | 'stack' | 'pie';
+    maxInlineItems?: number;
+};
+
 export declare const renderAvatar_unstable: (state: AvatarState) => JSX.Element;
 
 /**
  * Render the final JSX of AvatarGroup
  */
-export declare const renderAvatarGroup_unstable: (state: AvatarGroupState) => JSX.Element;
+export declare const renderAvatarGroup_unstable: (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => JSX.Element;
 
 /**
  * Render the final JSX of AvatarGroupItem
  */
 export declare const renderAvatarGroupItem_unstable: (state: AvatarGroupItemState) => JSX.Element;
 
+/**
+ * Render the final JSX of AvatarGroupPopover
+ */
+export declare const renderAvatarGroupPopover_unstable: (state: AvatarGroupPopoverState, contextValues: AvatarGroupContextValues) => JSX.Element;
+
 export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
 /**
@@ -284,6 +342,10 @@ export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<H
  */
 export declare const useAvatarGroup_unstable: (props: AvatarGroupProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupState;
 
+export declare const useAvatarGroupContext_unstable: <T>(selector: ContextSelector<AvatarGroupContextValue, T>) => T;
+
+export declare const useAvatarGroupContextValues: (state: AvatarGroupState) => AvatarGroupContextValues;
+
 /**
  * Create the state required to render AvatarGroupItem.
  *
@@ -300,6 +362,21 @@ export declare const useAvatarGroupItem_unstable: (props: AvatarGroupItemProps,
  */
 export declare const useAvatarGroupItemStyles_unstable: (state: AvatarGroupItemState) => AvatarGroupItemState;
 
+/**
+ * Create the state required to render AvatarGroupPopover.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,
+ * before being passed to renderAvatarGroupPopover_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupPopover
+ */
+export declare const useAvatarGroupPopover_unstable: (props: AvatarGroupPopoverProps) => AvatarGroupPopoverState;
+
+/**
+ * Apply styling to the AvatarGroupPopover slots based on the state
+ */
+export declare const useAvatarGroupPopoverStyles_unstable: (state: AvatarGroupPopoverState) => AvatarGroupPopoverState;
+
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */

package/lib/AvatarGroupPopover.js

@@ -0,0 +1,2 @@
+export * from './components/AvatarGroupPopover/index';
+//# sourceMappingURL=AvatarGroupPopover.js.map

package/lib/AvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupPopover.js","sourceRoot":"../src/","sources":["AvatarGroupPopover.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/AvatarGroupPopover/index';\n"]}

package/lib/components/Avatar/useAvatar.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';
 import { getInitials } from '../../utils/index';
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useMergedEventCallbacks } from '@fluentui/react-utilities';
 export const useAvatar_unstable = (props, ref) => {
   var _a;
 
@@ -71,12 +70,9 @@ export const useAvatar_unstable = (props, ref) => {
     }
   }); // Hide the image if it fails to load and restore it on a successful load
 
-  const imageOnError = useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onError, () => setImageHidden(true));
-  const imageOnLoad = useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onLoad, () => setImageHidden(undefined));
-
   if (image) {
-    image.onError = imageOnError;
-    image.onLoad = imageOnLoad;
+    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));
+    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));
   }
 
   const badge = resolveShorthand(props.badge, {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,WAAT,QAA4B,mBAA5B;AAEA,SAAS,aAAT,QAA8B,uBAA9B;AACA,SAAS,aAAT,QAA8B,uBAA9B;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,uBAAT,QAAwC,2BAAxC;AAEA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAiE;;;EACjG,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EACA,MAAM;IAAE,IAAF;IAAQ,IAAI,GAAG,EAAf;IAAmB,KAAK,GAAG,UAA3B;IAAuC,MAAM,GAAG,OAAhD;IAAyD,gBAAgB,GAAG,MAA5E;IAAoF;EAApF,IAAmG,KAAzG;EACA,IAAI;IAAE,KAAK,GAAG;EAAV,IAAwB,KAA5B,CAHiG,CAKjG;;EACA,IAAI,KAAK,KAAK,UAAd,EAA0B;IACxB,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA,EAAA,GAAA,UAAU,KAAA,IAAV,IAAA,UAAU,KAAA,KAAA,CAAV,GAAA,UAAA,GAAc,IAAd,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,EAAlB,GAAsB,EAAvB,CAAX,GAAwC,YAAY,CAAC,MAAtD,CAApB;EACD;;EAED,MAAM,MAAM,GAAG,KAAK,CAAC,SAAD,CAApB;EAEA,MAAM,IAAI,GAAwB,qBAAqB,CACrD,MADqD,EAErD;IACE,IAAI,EAAE,KADR;IAEE,EAAE,EAAE,MAFN;IAGE;IACA,GAAG,KAJL;IAKE;EALF,CAFqD;EASrD;EAAyB,CAAC,MAAD,CAT4B,CAAvD,CAZiG,CAwBjG;;EACA,IAAI,QAAQ,GAA4B,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;IACvE,QAAQ,EAAE,IAD6D;IAEvE,YAAY,EAAE;MACZ,QAAQ,EAAE,WAAW,CAAC,IAAD,EAAO,GAAG,KAAK,KAAf,EAAsB;QAAE,gBAAgB,EAAE,IAAI,IAAI;MAA5B,CAAtB,CADT;MAEZ,EAAE,EAAE,MAAM,GAAG;IAFD;EAFyD,CAAjB,CAAxD,CAzBiG,CAiCjG;;EACA,IAAI,IAAI,GAAwB,SAAhC;;EACA,IAAI,EAAC,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAE,QAAX,CAAJ,EAAyB;IACvB,QAAQ,GAAG,SAAX;IACA,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MAClC,QAAQ,EAAE,IADwB;MAElC,YAAY,EAAE;QACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CADE;QAEZ,eAAe;MAFH;IAFoB,CAAb,CAAvB;EAOD;;EAED,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAiC,SAAjC,CAAtC;EACA,MAAM,KAAK,GAAyB,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IAChE,YAAY,EAAE;MACZ,GAAG,EAAE,EADO;MAEZ,IAAI,EAAE,cAFM;MAGZ,eAAe,IAHH;MAIZ,MAAM,EAAE;IAJI;EADkD,CAAd,CAApD,CA/CiG,CAwDjG;;EACA,MAAM,YAAY,GAAG,uBAAuB,CAAC,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,OAAR,EAAiB,MAAM,cAAc,CAAC,IAAD,CAArC,CAA5C;EACA,MAAM,WAAW,GAAG,uBAAuB,CAAC,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,MAAR,EAAgB,MAAM,cAAc,CAAC,SAAD,CAApC,CAA3C;;EACA,IAAI,KAAJ,EAAW;IACT,KAAK,CAAC,OAAN,GAAgB,YAAhB;IACA,KAAK,CAAC,MAAN,GAAe,WAAf;EACD;;EAED,MAAM,KAAK,GAAyB,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IAChE,YAAY,EAAE;MACZ,IAAI,EAAE,YAAY,CAAC,IAAD,CADN;MAEZ,EAAE,EAAE,MAAM,GAAG;IAFD;EADkD,CAAd,CAApD,CAhEiG,CAuEjG;;EACA,IAAI,CAAC,IAAI,CAAC,YAAD,CAAL,IAAuB,CAAC,IAAI,CAAC,iBAAD,CAAhC,EAAqD;IACnD,IAAI,IAAJ,EAAU;MACR,IAAI,CAAC,YAAD,CAAJ,GAAqB,IAArB,CADQ,CAGR;;MACA,IAAI,KAAJ,EAAW;QACT,IAAI,CAAC,iBAAD,CAAJ,GAA0B,IAAI,CAAC,EAAL,GAAU,GAAV,GAAgB,KAAK,CAAC,EAAhD;MACD;IACF,CAPD,MAOO,IAAI,QAAJ,EAAc;MACnB;MACA,IAAI,CAAC,iBAAD,CAAJ,GAA0B,QAAQ,CAAC,EAAT,IAAe,KAAK,GAAG,MAAM,KAAK,CAAC,EAAf,GAAoB,EAAxC,CAA1B;IACD;EACF;;EAED,OAAO;IACL,IADK;IAEL,KAFK;IAGL,MAHK;IAIL,gBAJK;IAKL,KALK;IAOL,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,QAAQ,EAAE,MAFA;MAGV,IAAI,EAAE,MAHI;MAIV,KAAK,EAAE,KAJG;MAKV,KAAK,EAAE;IALG,CAPP;IAeL,IAfK;IAgBL,QAhBK;IAiBL,IAjBK;IAkBL,KAlBK;IAmBL;EAnBK,CAAP;AAqBD,CA3GM;;AA6GP,MAAM,YAAY,GAAI,IAAD,IAA8B;EACjD,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACd,OAAO,aAAP;EACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,OAAP;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,QAAP;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,OAAP;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,aAAP;EACD,CAFM,MAEA;IACL,OAAO,MAAP;EACD;AACF,CAdD;;AAgBA,MAAM,YAAY,GAAuB,CACvC,UADuC,EAEvC,WAFuC,EAGvC,KAHuC,EAIvC,SAJuC,EAKvC,OALuC,EAMvC,UANuC,EAOvC,MAPuC,EAQvC,OARuC,EASvC,OATuC,EAUvC,QAVuC,EAWvC,SAXuC,EAYvC,YAZuC,EAavC,YAbuC,EAcvC,MAduC,EAevC,OAfuC,EAgBvC,MAhBuC,EAiBvC,YAjBuC,EAkBvC,YAlBuC,EAmBvC,MAnBuC,EAoBvC,UApBuC,EAqBvC,QArBuC,EAsBvC,OAtBuC,EAuBvC,OAvBuC,EAwBvC,MAxBuC,EAyBvC,SAzBuC,EA0BvC,MA1BuC,EA2BvC,OA3BuC,EA4BvC,MA5BuC,EA6BvC,UA7BuC,EA8BvC,QA9BuC,CAAzC;;AAiCA,MAAM,WAAW,GAAI,GAAD,IAAwB;EAC1C,IAAI,QAAQ,GAAG,CAAf;;EACA,KAAK,IAAI,GAAG,GAAW,GAAG,CAAC,MAAJ,GAAa,CAApC,EAAuC,GAAG,IAAI,CAA9C,EAAiD,GAAG,EAApD,EAAwD;IACtD,MAAM,EAAE,GAAG,GAAG,CAAC,UAAJ,CAAe,GAAf,CAAX;IACA,MAAM,KAAK,GAAG,GAAG,GAAG,CAApB;IACA,QAAQ,IAAI,CAAC,EAAE,IAAI,KAAP,KAAiB,EAAE,IAAK,IAAI,KAA5B,CAAZ,CAHsD,CAGL;EAClD;;EAED,OAAO,QAAP;AACD,CATD","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useMergedEventCallbacks } from '@fluentui/react-utilities';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  const imageOnError = useMergedEventCallbacks(image?.onError, () => setImageHidden(true));\n  const imageOnLoad = useMergedEventCallbacks(image?.onLoad, () => setImageHidden(undefined));\n  if (image) {\n    image.onError = imageOnError;\n    image.onLoad = imageOnLoad;\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,cAAhC,EAAgD,gBAAhD,EAAkE,KAAlE,QAA+E,2BAA/E;AACA,SAAS,WAAT,QAA4B,mBAA5B;AAEA,SAAS,aAAT,QAA8B,uBAA9B;AACA,SAAS,aAAT,QAA8B,uBAA9B;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAEA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAiE;;;EACjG,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EACA,MAAM;IAAE,IAAF;IAAQ,IAAI,GAAG,EAAf;IAAmB,KAAK,GAAG,UAA3B;IAAuC,MAAM,GAAG,OAAhD;IAAyD,gBAAgB,GAAG,MAA5E;IAAoF;EAApF,IAAmG,KAAzG;EACA,IAAI;IAAE,KAAK,GAAG;EAAV,IAAwB,KAA5B,CAHiG,CAKjG;;EACA,IAAI,KAAK,KAAK,UAAd,EAA0B;IACxB,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA,EAAA,GAAA,UAAU,KAAA,IAAV,IAAA,UAAU,KAAA,KAAA,CAAV,GAAA,UAAA,GAAc,IAAd,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,EAAlB,GAAsB,EAAvB,CAAX,GAAwC,YAAY,CAAC,MAAtD,CAApB;EACD;;EAED,MAAM,MAAM,GAAG,KAAK,CAAC,SAAD,CAApB;EAEA,MAAM,IAAI,GAAwB,qBAAqB,CACrD,MADqD,EAErD;IACE,IAAI,EAAE,KADR;IAEE,EAAE,EAAE,MAFN;IAGE;IACA,GAAG,KAJL;IAKE;EALF,CAFqD;EASrD;EAAyB,CAAC,MAAD,CAT4B,CAAvD,CAZiG,CAwBjG;;EACA,IAAI,QAAQ,GAA4B,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;IACvE,QAAQ,EAAE,IAD6D;IAEvE,YAAY,EAAE;MACZ,QAAQ,EAAE,WAAW,CAAC,IAAD,EAAO,GAAG,KAAK,KAAf,EAAsB;QAAE,gBAAgB,EAAE,IAAI,IAAI;MAA5B,CAAtB,CADT;MAEZ,EAAE,EAAE,MAAM,GAAG;IAFD;EAFyD,CAAjB,CAAxD,CAzBiG,CAiCjG;;EACA,IAAI,IAAI,GAAwB,SAAhC;;EACA,IAAI,EAAC,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAE,QAAX,CAAJ,EAAyB;IACvB,QAAQ,GAAG,SAAX;IACA,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MAClC,QAAQ,EAAE,IADwB;MAElC,YAAY,EAAE;QACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CADE;QAEZ,eAAe;MAFH;IAFoB,CAAb,CAAvB;EAOD;;EAED,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAiC,SAAjC,CAAtC;EACA,MAAM,KAAK,GAAyB,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IAChE,YAAY,EAAE;MACZ,GAAG,EAAE,EADO;MAEZ,IAAI,EAAE,cAFM;MAGZ,eAAe,IAHH;MAIZ,MAAM,EAAE;IAJI;EADkD,CAAd,CAApD,CA/CiG,CAwDjG;;EACA,IAAI,KAAJ,EAAW;IACT,KAAK,CAAC,OAAN,GAAgB,cAAc,CAAC,KAAK,CAAC,OAAP,EAAgB,MAAM,cAAc,CAAC,IAAD,CAApC,CAA9B;IACA,KAAK,CAAC,MAAN,GAAe,cAAc,CAAC,KAAK,CAAC,MAAP,EAAe,MAAM,cAAc,CAAC,SAAD,CAAnC,CAA7B;EACD;;EAED,MAAM,KAAK,GAAyB,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IAChE,YAAY,EAAE;MACZ,IAAI,EAAE,YAAY,CAAC,IAAD,CADN;MAEZ,EAAE,EAAE,MAAM,GAAG;IAFD;EADkD,CAAd,CAApD,CA9DiG,CAqEjG;;EACA,IAAI,CAAC,IAAI,CAAC,YAAD,CAAL,IAAuB,CAAC,IAAI,CAAC,iBAAD,CAAhC,EAAqD;IACnD,IAAI,IAAJ,EAAU;MACR,IAAI,CAAC,YAAD,CAAJ,GAAqB,IAArB,CADQ,CAGR;;MACA,IAAI,KAAJ,EAAW;QACT,IAAI,CAAC,iBAAD,CAAJ,GAA0B,IAAI,CAAC,EAAL,GAAU,GAAV,GAAgB,KAAK,CAAC,EAAhD;MACD;IACF,CAPD,MAOO,IAAI,QAAJ,EAAc;MACnB;MACA,IAAI,CAAC,iBAAD,CAAJ,GAA0B,QAAQ,CAAC,EAAT,IAAe,KAAK,GAAG,MAAM,KAAK,CAAC,EAAf,GAAoB,EAAxC,CAA1B;IACD;EACF;;EAED,OAAO;IACL,IADK;IAEL,KAFK;IAGL,MAHK;IAIL,gBAJK;IAKL,KALK;IAOL,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,QAAQ,EAAE,MAFA;MAGV,IAAI,EAAE,MAHI;MAIV,KAAK,EAAE,KAJG;MAKV,KAAK,EAAE;IALG,CAPP;IAeL,IAfK;IAgBL,QAhBK;IAiBL,IAjBK;IAkBL,KAlBK;IAmBL;EAnBK,CAAP;AAqBD,CAzGM;;AA2GP,MAAM,YAAY,GAAI,IAAD,IAA8B;EACjD,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACd,OAAO,aAAP;EACD,CAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,OAAP;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,QAAP;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,OAAP;EACD,CAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;IACrB,OAAO,aAAP;EACD,CAFM,MAEA;IACL,OAAO,MAAP;EACD;AACF,CAdD;;AAgBA,MAAM,YAAY,GAAuB,CACvC,UADuC,EAEvC,WAFuC,EAGvC,KAHuC,EAIvC,SAJuC,EAKvC,OALuC,EAMvC,UANuC,EAOvC,MAPuC,EAQvC,OARuC,EASvC,OATuC,EAUvC,QAVuC,EAWvC,SAXuC,EAYvC,YAZuC,EAavC,YAbuC,EAcvC,MAduC,EAevC,OAfuC,EAgBvC,MAhBuC,EAiBvC,YAjBuC,EAkBvC,YAlBuC,EAmBvC,MAnBuC,EAoBvC,UApBuC,EAqBvC,QArBuC,EAsBvC,OAtBuC,EAuBvC,OAvBuC,EAwBvC,MAxBuC,EAyBvC,SAzBuC,EA0BvC,MA1BuC,EA2BvC,OA3BuC,EA4BvC,MA5BuC,EA6BvC,UA7BuC,EA8BvC,QA9BuC,CAAzC;;AAiCA,MAAM,WAAW,GAAI,GAAD,IAAwB;EAC1C,IAAI,QAAQ,GAAG,CAAf;;EACA,KAAK,IAAI,GAAG,GAAW,GAAG,CAAC,MAAJ,GAAa,CAApC,EAAuC,GAAG,IAAI,CAA9C,EAAiD,GAAG,EAApD,EAAwD;IACtD,MAAM,EAAE,GAAG,GAAG,CAAC,UAAJ,CAAe,GAAf,CAAX;IACA,MAAM,KAAK,GAAG,GAAG,GAAG,CAApB;IACA,QAAQ,IAAI,CAAC,EAAE,IAAI,KAAP,KAAiB,EAAE,IAAK,IAAI,KAA5B,CAAZ,CAHsD,CAGL;EAClD;;EAED,OAAO,QAAP;AACD,CATD","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}