@fluentui/react-avatar 9.0.0-rc.9 → 9.0.2

package/CHANGELOG.md

@@ -1,12 +1,141 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Mon, 23 May 2022 12:10:26 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Jul 2022 17:03:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.2)
+
+Thu, 14 Jul 2022 17:03:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.1..@fluentui/react-avatar_v9.0.2)
+
+### Patches
+
+- chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
+- fix: Remove override of role=list in AvatarGroup's PopoverSurface and fix trapFocus when Popover is triggered. ([PR #23823](https://github.com/microsoft/fluentui/pull/23823) by esteban.230@hotmail.com)
+- fix: Fixing focus indicator for pie layouts. ([PR #23860](https://github.com/microsoft/fluentui/pull/23860) by esteban.230@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.1 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-popover to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-tabster to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+
+## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.1)
+
+Tue, 28 Jun 2022 17:39:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0..@fluentui/react-avatar_v9.0.1)
+
+### Patches
+
+- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+- Bump @fluentui/react-popover to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+- Bump @fluentui/react-tabster to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0)
+
+Tue, 28 Jun 2022 15:14:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.13..@fluentui/react-avatar_v9.0.0)
+
+### Patches
+
+- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-popover to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+
+### Changes
+
+- fix: Fix wrong border radius for outline in webkit browsers. ([PR #23576](https://github.com/microsoft/fluentui/pull/23576) by esteban.230@hotmail.com)
+- Adding AvatarGroupItem implementation and AvatarGroup context. ([PR #23310](https://github.com/microsoft/fluentui/pull/23310) by esteban.230@hotmail.com)
+- chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
+- chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
+- docs: Adding AvatarGroup stories. ([PR #23493](https://github.com/microsoft/fluentui/pull/23493) by esteban.230@hotmail.com)
+- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
+- PresenceBadge accessibility: fix placement of aria-label, sort out Avatar usage and examples ([PR #23256](https://github.com/microsoft/fluentui/pull/23256) by sarah.higley@microsoft.com)
+- Adding layout styles to AvatarGroupItem. ([PR #23468](https://github.com/microsoft/fluentui/pull/23468) by esteban.230@hotmail.com)
+- chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector. ([PR #23681](https://github.com/microsoft/fluentui/pull/23681) by Humberto.Morimoto@microsoft.com)
+- Adding layout styles and overflow button styles to AvatarGroup. ([PR #23437](https://github.com/microsoft/fluentui/pull/23437) by esteban.230@hotmail.com)
+- fix: Fixing focus indicator and adding a focus ring to root for the pie layout. ([PR #23528](https://github.com/microsoft/fluentui/pull/23528) by esteban.230@hotmail.com)
+- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
+- chore: Added warning for AvatarGroup to check if children are of type AvatarGroupItem and for AvatarGroupItem to check if it's being used inside an AvatarGroup. ([PR #23498](https://github.com/microsoft/fluentui/pull/23498) by esteban.230@hotmail.com)
+
+## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.13)
+
+Thu, 23 Jun 2022 14:25:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.12..@fluentui/react-avatar_v9.0.0-rc.13)
+
+### Changes
+
+- Bump @fluentui/react-badge to v9.0.0-rc.13 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.11 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+
+## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.12)
+
+Tue, 31 May 2022 21:28:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.11..@fluentui/react-avatar_v9.0.0-rc.12)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
+- updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
+- Creating AvatarGroupItem component. ([PR #23287](https://github.com/microsoft/fluentui/pull/23287) by esteban.230@hotmail.com)
+- Adding .beta to AvatarGroup stories so it's not shown in the docsite. ([PR #23216](https://github.com/microsoft/fluentui/pull/23216) by esteban.230@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.12 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+
+## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.11)
+
+Thu, 26 May 2022 21:01:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.10..@fluentui/react-avatar_v9.0.0-rc.11)
+
+### Changes
+
+- fix react-avatar: use initials as a fallback label even when no id is manually defined ([PR #23258](https://github.com/microsoft/fluentui/pull/23258) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.11 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+
+## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.10)
+
+Mon, 23 May 2022 18:56:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.9..@fluentui/react-avatar_v9.0.0-rc.10)
+
+### Changes
+
+- BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
+- Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
+- Bump @fluentui/react-badge to v9.0.0-rc.10 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-button to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-popover to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+
 ## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.9)
 
-Mon, 23 May 2022 12:10:26 GMT 
+Mon, 23 May 2022 12:14:00 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.8..@fluentui/react-avatar_v9.0.0-rc.9)
 
 ### Changes

package/MIGRATION-AvatarGroup.md

@@ -0,0 +1,35 @@
+# AvatarGroup Migration
+
+## Migration from v0
+
+`v0` does not have a component similar to `AvatarGroup`.
+
+## Migration from v8
+
+AvatarGroup and Facepile have similar APIs, but the main difference is how they interact with AvatarGroupItem/Persona. AvatarGroup receives AvatarGroupItems as children and places them in their respective place, this means AvatarGroup has no control over AvatarGroupItem. `size` is the only property of AvatarGroupItem that is modified by AvatarGroup to make all AvatarGroupItems the same size. Face adding functionality is not supported.
+
+Avatars must not be used inside an AvatarGroup, instead AvatarGroupItems are used since it has extra functionality used only in AvatarGroups. This includes adding a label when the AvatarGroupItem is rendered in the overflow Popover and specific styling for each layout.
+
+AvatarGroup has extra functionality that Facepile does not have, this includes:
+ - When the AvatarGroupItems are overflowing, a Popover is rendered that contains all the overflowed AvatarGroupItems. The Popover is triggered when the overflow button is clicked.
+ - AvatarGroup supports three layouts: `spread` (default), `stack`, and `pie`.
+
+## Property mapping
+
+| v8 `Facepile`            | v9 `AvatarGroup`                                         |
+| ------------------------ | -------------------------------------------------------- |
+| `personas`               | `children`                                               |
+| `addButtonProps`         | -                                                        |
+| `className`              | `className`                                              |
+| `getPersonaProps`        | `AvatarGroupItem`'s props                                |
+| `maxDisplayablePersonas` | `maxAvatars`                                             |
+| `onRenderPersona`        | Render function for the AvatarGroupItem                  |
+| `onRenderPersonaCoin`    | Render function for the `avatar` slot in AvatarGroupItem |
+| `onRenderPersonaWrapper` | -                                                        |
+| `overflowButtonProps`    | `overflowButton` slot props                              |
+| `overflowButtonType`     | `overflowIndicator`                                      |
+| `overflowPersonas`       | -                                                        |
+| `personaSize`            | `size`                                                   |
+| `showAddButton`          | -                                                        |
+| `showTooltip`            | -                                                        |
+| `styles`                 | (theme)                                                  |

package/README-AvatarGroup.md

@@ -0,0 +1,39 @@
+# @fluentui/react-avatar
+
+**React AvatarGroup component for [Fluent UI](https://dev.microsoft.com/fluentui)**
+
+The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement of individual Avatars in a spread, stack, or pie layout.
+
+## STATUS: WIP 🚧
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
+
+To import AvatarGroup and AvatarGroupItem:
+
+```js
+import { AvatarGroup, AvatarGroupItem } from '@fluentui/react-avatar';
+```
+
+Once the AvatarGroup component graduates to a production release, the component will be available at:
+
+```js
+import { AvatarGroup, AvatarGroupItem } from '@fluentui/react-components';
+```
+
+### Examples
+
+```jsx
+<AvatarGroup>
+  <AvatarGroupItem name="Katri Athokas" />
+  <AvatarGroupItem name="Elvia Atkins" />
+  <AvatarGroupItem name="Cameron Evans" />
+  <AvatarGroupItem name="Wanda Howard" />
+  <AvatarGroupItem name="Mona Kane" />
+  <AvatarGroupItem name="Allan Munger" />
+  <AvatarGroupItem name="Daisy Phillips" />
+  <AvatarGroupItem name="Robert Tolbert" />
+  <AvatarGroupItem name="Kevin Sturgis" />
+</AvatarGroup>
+```

package/README.md

@@ -1,23 +1,13 @@
 # @fluentui/react-avatar
 
-**React Avatar components for [Fluent UI](https://dev.microsoft.com/fluentui)**
+**React Avatar components for [Fluent UI](https://react.fluentui.dev/)**
 
 The Avatar component represents a person or entity. It displays the person's image, initials, or an icon, and can be either circular or square.
 
-## STATUS: WIP 🚧
-
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
-
 ## Usage
 
 To import Avatar:
 
-```js
-import { Avatar } from '@fluentui/react-avatar';
-```
-
-Once the Avatar component graduates to a production release, the component will be available at:
-
 ```js
 import { Avatar } from '@fluentui/react-components';
 ```
@@ -42,3 +32,18 @@ With active state indication:
 <Avatar name="Daisy Phillips" active={true} activeAppearance="ring-shadow" />
 <Avatar name="Robin Counts" active={false} activeAppearance="ring-shadow" />
 ```
+
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-avatar` from the list.
+
+### Specification
+
+See [SPEC.md](./SPEC.md).
+
+### Migration Guide
+
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Avatar implementation.

package/SPEC.md

@@ -95,141 +95,7 @@ From [Avatar.types.tsx](https://github.com/microsoft/fluentui/blob/master/packag
 
 ### Props
 
-```ts
-export type AvatarSlots = {
-  root: Slot<'span'>;
-
-  /**
-   * The Avatar's image.
-   *
-   * Usage e.g.: `image={{ src: '...' }}`
-   */
-  image?: Slot<'img'>;
-
-  /**
-   * (optional) Custom initials.
-   *
-   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
-   * using the `getInitials` function.
-   *
-   * The initials are displayed when there is no image (including while the image is loading).
-   */
-  initials?: Slot<'span'>;
-
-  /**
-   * Icon to be displayed when the avatar doesn't have an image or initials.
-   *
-   * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
-   */
-  icon?: Slot<'span'>;
-
-  /**
-   * Badge to show the avatar's presence status.
-   */
-  badge?: Slot<typeof PresenceBadge>;
-};
-
-export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
-  /**
-   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
-   *
-   * The name will be used to determine the initials displayed when there is no icon, as well as provided to
-   * accessibility tools.
-   */
-  name?: string;
-
-  /**
-   * Size of the avatar in pixels.
-   *
-   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
-   * based on design guidelines for the Avatar control.
-   *
-   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
-   * to override the rendered size.
-   *
-   * For example, to set the avatar to 45px in size:
-   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`
-   *
-   * @defaultvalue 32
-   */
-  size?: 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
-
-  /**
-   * The avatar can have a circular or square shape.
-   * @defaultvalue circular
-   */
-  shape?: 'circular' | 'square';
-
-  /**
-   * Optional activity indicator
-   * * active: the avatar will be decorated according to activeAppearance
-   * * inactive: the avatar will be reduced in size and partially transparent
-   * * unset: normal display
-   *
-   * @defaultvalue unset
-   */
-  active?: 'active' | 'inactive' | 'unset';
-
-  /**
-   * The appearance when `active="active"`
-   *
-   * @defaultvalue ring
-   */
-  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';
-
-  /**
-   * The color when displaying either an icon or initials.
-   * * neutral (default): gray
-   * * brand: color from the brand palette
-   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
-   * * [AvatarNamedColor]: a specific color from the theme
-   *
-   * @defaultvalue neutral
-   */
-  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
-
-  /**
-   * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
-   * Use this when a name is not available, but there is another unique identifier that can be used instead.
-   */
-  idForColor?: string | undefined;
-};
-
-/**
- * A specific named color for the Avatar
- */
-export type AvatarNamedColor =
-  | 'darkRed'
-  | 'cranberry'
-  | 'red'
-  | 'pumpkin'
-  | 'peach'
-  | 'marigold'
-  | 'gold'
-  | 'brass'
-  | 'brown'
-  | 'forest'
-  | 'seafoam'
-  | 'darkGreen'
-  | 'lightTeal'
-  | 'teal'
-  | 'steel'
-  | 'blue'
-  | 'royalBlue'
-  | 'cornflower'
-  | 'navy'
-  | 'lavender'
-  | 'purple'
-  | 'grape'
-  | 'lilac'
-  | 'pink'
-  | 'magenta'
-  | 'plum'
-  | 'beige'
-  | 'mink'
-  | 'platinum'
-  | 'anchor';
-```
+See API at [Avatar.types.ts](./src/components/Avatar/Avatar.types.ts).
 
 ## Structure
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { Button } from '@fluentui/react-button';
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -11,20 +12,57 @@ import { TooltipProps } from '@fluentui/react-tooltip';
 
 export declare const Avatar: ForwardRefComponent<AvatarProps>;
 
-/**
- * @deprecated Use `avatarClassNames.root` instead.
- */
-export declare const avatarClassName = "fui-Avatar";
-
 export declare const avatarClassNames: SlotClassNames<AvatarSlots>;
 
 /**
- * AvatarGroup component - TODO: add more docs
+ * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
+ * of individual Avatars in a spread, stack, or pie layout.
  */
 export declare const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
 
 export declare const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots>;
 
+/**
+ * The AvatarGroupItem component represents a single person or entity.
+ * AvatarGroupItem should only be used in an AvatarGroup component.
+ */
+export declare const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps>;
+
+export declare const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots>;
+
+/**
+ * AvatarGroupItem Props
+ */
+export declare type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;
+
+export declare type AvatarGroupItemSlots = {
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * Avatar that represents a person or entity.
+     */
+    avatar: NonNullable<Slot<typeof Avatar>>;
+    /**
+     * Label used for the name of the AvatarGroupItem when rendered as an overflow item.
+     * The content of the label, by default, is the `name` prop from the `avatar` slot.
+     */
+    overflowLabel: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering AvatarGroupItem
+ */
+export declare type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
+    /**
+     * Whether the Avatar is an overflow item.
+     *
+     * @default false
+     */
+    isOverflowItem?: boolean;
+    nonOverflowAvatarsCount: number;
+    layout: AvatarGroupProps['layout'];
+    size: AvatarSizes;
+};
+
 /**
  * AvatarGroup Props
  */
@@ -36,57 +74,59 @@ export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
     layout?: 'spread' | 'stack' | 'pie';
     /**
      * Maximum number of Avatars to be displayed before overflowing.
-     * NOTE: if pie layout is used, `maxAvatars` will be ignored.
+     * Note: if pie layout is used, `maxAvatars` will be ignored.
      * @default 5
      */
     maxAvatars?: number;
     /**
      * Whether the overflow indicator should render an icon instead of the number of overflowed avatars.
-     * @default false
+     * Note: The overflowIndicator will default to `icon` when the size is less than 24.
+     * @default count
      */
-    overflowIndicator?: 'number-overflowed' | 'icon';
+    overflowIndicator?: 'count' | 'icon';
     /**
      * Size of the avatars.
      * @default 32
      */
     size?: AvatarSizes;
-    /**
-     * Strings for localizing text in the tooltip.
-     */
-    strings?: AvatarGroupStrings;
 };
 
 export declare type AvatarGroupSlots = {
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
      * Popover trigger slot that can be used to change the overflow indicator.
      */
-    popoverTrigger?: Slot<typeof Button>;
+    overflowButton?: NonNullable<Slot<'button'>>;
     /**
-     * Popover surface that will be displayed when the popover is triggered.
+     * List that contains the overflow AvatarGroupItems.
      */
-    popoverSurface?: Slot<typeof PopoverSurface>;
+    overflowContent?: NonNullable<Slot<'div'>>;
+    /**
+     * PopoverSurface that contains the overflow content.
+     */
+    overflowSurface?: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 /**
  * State used in rendering AvatarGroup
  */
-export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & {
-    tooltipContent: TooltipProps['content'];
-};
-
-declare type AvatarGroupStrings = {
+export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size' | 'overflowIndicator'>> & {
+    /**
+     * Whether there are more Avatars than `maxAvatars`.
+     * @default false
+     */
+    hasOverflow: boolean;
     /**
-     * Text applied to the overflow indicator's tooltip.
-     * Can include the token "\{numOverflowedAvatars\}" which will be replaced with the number of overflowed avatars.
+     * Tooltip content for the overflow indicator.
      */
-    tooltipContent: string;
+    tooltipContent: TooltipProps['content'];
+    nonOverflowAvatarsCount: number;
 };
 
 /**
  * A specific named color for the Avatar
  */
-export declare type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
+export declare type AvatarNamedColor = 'dark-red' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'dark-green' | 'light-teal' | 'teal' | 'steel' | 'blue' | 'royal-blue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
 
 /**
  * Properties for Avatar
@@ -209,6 +249,8 @@ export declare type AvatarState = ComponentState<AvatarSlots> & Required<Pick<Av
  *
  * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
  * could be derived from the name.
+ *
+ * @internal
  */
 export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, options?: {
     /** Should initials be generated from phone numbers (default false) */
@@ -224,6 +266,11 @@ export declare const renderAvatar_unstable: (state: AvatarState) => JSX.Element;
  */
 export declare const renderAvatarGroup_unstable: (state: AvatarGroupState) => JSX.Element;
 
+/**
+ * Render the final JSX of AvatarGroupItem
+ */
+export declare const renderAvatarGroupItem_unstable: (state: AvatarGroupItemState) => JSX.Element;
+
 export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
 /**
@@ -237,6 +284,22 @@ 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;
 
+/**
+ * Create the state required to render AvatarGroupItem.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+ * before being passed to renderAvatarGroupItem_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupItem
+ * @param ref - reference to root HTMLElement of AvatarGroupItem
+ */
+export declare const useAvatarGroupItem_unstable: (props: AvatarGroupItemProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupItemState;
+
+/**
+ * Apply styling to the AvatarGroupItem slots based on the state
+ */
+export declare const useAvatarGroupItemStyles_unstable: (state: AvatarGroupItemState) => AvatarGroupItemState;
+
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */

package/lib/AvatarGroupItem.js

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

package/lib/AvatarGroupItem.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EAEA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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  | 'darkRed'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'darkGreen'\n  | 'lightTeal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royalBlue'\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 * Sizes that can be used for the Avatar\n */\nexport type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\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 will be used to determine the initials displayed when there is no icon, as well as 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?: 'circular' | 'square';\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 neeeded, 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?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n  };\n"]}
+{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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 * Sizes that can be used for the Avatar\n */\nexport type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\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 will be used to determine the initials displayed when there is no icon, as well as 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?: 'circular' | 'square';\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 neeeded, 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?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n  };\n"]}