@fluentui/react-avatar 9.0.1 → 9.0.4

package/CHANGELOG.json

@@ -2,7 +2,218 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Tue, 28 Jun 2022 17:37:46 GMT",
+      "date": "Wed, 03 Aug 2022 16:00:05 GMT",
+      "tag": "@fluentui/react-avatar_v9.0.4",
+      "version": "9.0.4",
+      "comments": {
+        "none": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "d966ea3d9169f2e8d69f0d2a4daf86fe4ca328d6",
+            "comment": "disables eslint rule @fluentui/no-context-default-value for local component context"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
+            "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "8d120219d3605abf8feff95eaff52ab01851618e",
+            "comment": "chore: Creating AvatarGroupOverflow component boilerplate."
+          }
+        ],
+        "patch": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "c66808887bcd7fd150c22eda462b325075742694",
+            "comment": "bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles"
+          },
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "08563664778fd80284561d3c9d254307a0a32362",
+            "comment": "chore: Bump Griffel dependencies"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.4",
+            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.0.4",
+            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.1.0",
+            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.0.4",
+            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
+            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 21:21:08 GMT",
+      "tag": "@fluentui/react-avatar_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
+            "comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.3",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.2",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.0.3",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.0.3",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.0.3",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.0.2",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 17:06:13 GMT",
+      "tag": "@fluentui/react-avatar_v9.0.2",
+      "version": "9.0.2",
+      "comments": {
+        "none": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "157355880d28bb1d72726c96a6395be0a99950f3",
+            "comment": "chore: Adding unit tests for AvatarGroup. "
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "dad21ca4232d5ef93e166e6f5c6f786d131abe3b",
+            "comment": "docs: Adding readme and migration guide for AvatarGroup."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "422636fffd66758c1a6dd617063582d902b61927",
+            "comment": "docs: README and Avatar spec cleanup."
+          }
+        ],
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
+            "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "7a1737f0db893a5c623c30d81745f8e41c9ef79b",
+            "comment": "fix: Remove override of role=list in AvatarGroup's PopoverSurface and fix trapFocus when Popover is triggered."
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "e1b98936707f64ff4088ceba4577f76085001687",
+            "comment": "fix: Fixing focus indicator for pie layouts."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.2",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.1",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.0.2",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.0.2",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.0.2",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 17:39:46 GMT",
       "tag": "@fluentui/react-avatar_v9.0.1",
       "version": "9.0.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,60 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Tue, 28 Jun 2022 17:37:46 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Aug 2022 16:00:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.4)
+
+Wed, 03 Aug 2022 16:00:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.3..@fluentui/react-avatar_v9.0.4)
+
+### Patches
+
+- bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
+- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
+- Bump @fluentui/react-badge to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-popover to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+
+## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.3)
+
+Thu, 14 Jul 2022 21:21:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.2..@fluentui/react-avatar_v9.0.3)
+
+### Patches
+
+- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-badge to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-popover to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+
+## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.2)
+
+Thu, 14 Jul 2022 17:06:13 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 #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.1 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-popover to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-tabster to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-tooltip to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+
 ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.1)
 
-Tue, 28 Jun 2022 17:37:46 GMT 
+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

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

@@ -63,6 +63,29 @@ export declare type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots>
     size: AvatarSizes;
 };
 
+/**
+ * AvatarGroupOverflow component - TODO: add more docs
+ */
+export declare const AvatarGroupOverflow: ForwardRefComponent<AvatarGroupOverflowProps>;
+
+export declare const avatarGroupOverflowClassName = "fui-AvatarGroupOverflow";
+
+export declare const avatarGroupOverflowClassNames: SlotClassNames<AvatarGroupOverflowSlots>;
+
+/**
+ * AvatarGroupOverflow Props
+ */
+export declare type AvatarGroupOverflowProps = ComponentProps<AvatarGroupOverflowSlots> & {};
+
+export declare type AvatarGroupOverflowSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering AvatarGroupOverflow
+ */
+export declare type AvatarGroupOverflowState = ComponentState<AvatarGroupOverflowSlots>;
+
 /**
  * AvatarGroup Props
  */
@@ -100,7 +123,11 @@ export declare type AvatarGroupSlots = {
     /**
      * List that contains the overflow AvatarGroupItems.
      */
-    overflowContent?: NonNullable<Slot<typeof PopoverSurface>>;
+    overflowContent?: NonNullable<Slot<'div'>>;
+    /**
+     * PopoverSurface that contains the overflow content.
+     */
+    overflowSurface?: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 /**
@@ -267,6 +294,11 @@ export declare const renderAvatarGroup_unstable: (state: AvatarGroupState) => JS
  */
 export declare const renderAvatarGroupItem_unstable: (state: AvatarGroupItemState) => JSX.Element;
 
+/**
+ * Render the final JSX of AvatarGroupOverflow
+ */
+export declare const renderAvatarGroupOverflow_unstable: (state: AvatarGroupOverflowState) => JSX.Element;
+
 export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
 /**
@@ -296,6 +328,22 @@ export declare const useAvatarGroupItem_unstable: (props: AvatarGroupItemProps,
  */
 export declare const useAvatarGroupItemStyles_unstable: (state: AvatarGroupItemState) => AvatarGroupItemState;
 
+/**
+ * Create the state required to render AvatarGroupOverflow.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,
+ * before being passed to renderAvatarGroupOverflow_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupOverflow
+ * @param ref - reference to root HTMLElement of AvatarGroupOverflow
+ */
+export declare const useAvatarGroupOverflow_unstable: (props: AvatarGroupOverflowProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupOverflowState;
+
+/**
+ * Apply styling to the AvatarGroupOverflow slots based on the state
+ */
+export declare const useAvatarGroupOverflowStyles_unstable: (state: AvatarGroupOverflowState) => AvatarGroupOverflowState;
+
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */

package/lib/AvatarGroupOverflow.js

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

package/lib/AvatarGroupOverflow.js.map

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