npm - @fluentui/react-avatar - Versions diffs - 9.0.1 → 9.0.2 - Mend

@fluentui/react-avatar 9.0.1 → 9.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/CHANGELOG.json +90 -1
package/CHANGELOG.md +20 -2
package/MIGRATION-AvatarGroup.md +35 -0
package/README-AvatarGroup.md +39 -0
package/README.md +16 -11
package/SPEC.md +1 -135
package/dist/index.d.ts +5 -1
package/lib/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
package/lib/components/AvatarGroup/renderAvatarGroup.js +4 -3
package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
package/lib/components/AvatarGroup/useAvatarGroup.js +10 -11
package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
package/lib/components/AvatarGroup/useAvatarGroupStyles.js +44 -38
package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js +4 -3
package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js +10 -12
package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js +44 -38
package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
package/package.json +9 -9

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,96 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Tue, 28 Jun 2022 17:37:46 GMT",
+      "date": "Thu, 14 Jul 2022 17:03:22 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": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.1",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.0.2",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.0.2",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.0.2",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 17:39:46 GMT",
       "tag": "@fluentui/react-avatar_v9.0.1",
       "version": "9.0.1",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,30 @@
 # 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 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: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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -100,7 +100,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>>;
 };
 /**

package/lib/components/AvatarGroup/AvatarGroup.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PopoverSurface } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarSizes } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /*\n Popover trigger slot that can be used to change the overflow indicator.\n /\n overflowButton?: NonNullable<Slot<'button'>>;\n\n /\n List that contains the overflow AvatarGroupItems.\n /\n overflowContent?: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/\n AvatarGroup Props\n /\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n /\n Layout the Avatars should be displayed as.\n * @default spread\n /\n layout?: 'spread' \| 'stack' \| 'pie';\n\n /\n Maximum number of Avatars to be displayed before overflowing.\n * Note: if pie layout is used, `maxAvatars` will be ignored.\n * @default 5\n /\n maxAvatars?: number;\n\n /\n Whether the overflow indicator should render an icon instead of the number of overflowed avatars.\n * Note: The overflowIndicator will default to `icon` when the size is less than 24.\n * @default count\n /\n overflowIndicator?: 'count' \| 'icon';\n\n /\n Size of the avatars.\n * @default 32\n /\n size?: AvatarSizes;\n};\n\n/\n State used in rendering AvatarGroup\n /\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> &\n Required<Pick<AvatarGroupProps, 'layout' \| 'size' \| 'overflowIndicator'>> & {\n /\n Whether there are more Avatars than `maxAvatars`.\n * @default false\n /\n hasOverflow: boolean;\n\n /\n Tooltip content for the overflow indicator.\n */\n tooltipContent: TooltipProps['content'];\n\n nonOverflowAvatarsCount: number;\n };\n"]}
1	+ {"version":3,"file":"AvatarGroup.types.js","sourceRoot":"../src/","sources":["components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PopoverSurface } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarSizes } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /*\n Popover trigger slot that can be used to change the overflow indicator.\n /\n overflowButton?: NonNullable<Slot<'button'>>;\n\n /\n List that contains the overflow AvatarGroupItems.\n /\n overflowContent?: NonNullable<Slot<'div'>>;\n\n /\n PopoverSurface that contains the overflow content.\n /\n overflowSurface?: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/\n AvatarGroup Props\n /\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n /\n Layout the Avatars should be displayed as.\n * @default spread\n /\n layout?: 'spread' \| 'stack' \| 'pie';\n\n /\n Maximum number of Avatars to be displayed before overflowing.\n * Note: if pie layout is used, `maxAvatars` will be ignored.\n * @default 5\n /\n maxAvatars?: number;\n\n /\n Whether the overflow indicator should render an icon instead of the number of overflowed avatars.\n * Note: The overflowIndicator will default to `icon` when the size is less than 24.\n * @default count\n /\n overflowIndicator?: 'count' \| 'icon';\n\n /\n Size of the avatars.\n * @default 32\n /\n size?: AvatarSizes;\n};\n\n/\n State used in rendering AvatarGroup\n /\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> &\n Required<Pick<AvatarGroupProps, 'layout' \| 'size' \| 'overflowIndicator'>> & {\n /\n Whether there are more Avatars than `maxAvatars`.\n * @default false\n /\n hasOverflow: boolean;\n\n /\n Tooltip content for the overflow indicator.\n */\n tooltipContent: TooltipProps['content'];\n\n nonOverflowAvatarsCount: number;\n };\n"]}

package/lib/components/AvatarGroup/renderAvatarGroup.js CHANGED Viewed

@@ -24,20 +24,21 @@ export const renderAvatarGroup_unstable = state => {
       nonOverflowAvatarsCount
     }
   }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, state.root.children, state.hasOverflow && slots.overflowButton && slots.overflowContent && /*#__PURE__*/React.createElement(Popover, {
+  }, state.root.children, state.hasOverflow && slots.overflowButton && slots.overflowContent && slots.overflowSurface && /*#__PURE__*/React.createElement(Popover, {
     trapFocus: true,
     size: "small"
   }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: state.tooltipContent,
     relationship: "label"
   }, /*#__PURE__*/React.createElement(slots.overflowButton, { ...slotProps.overflowButton
-  }))), /*#__PURE__*/React.createElement(AvatarGroupContext.Provider, {
+  }))), /*#__PURE__*/React.createElement(slots.overflowSurface, { ...slotProps.overflowSurface
+  }, /*#__PURE__*/React.createElement(AvatarGroupContext.Provider, {
     value: {
       isOverflow: true,
       layout,
       size: 24
     }
   }, /*#__PURE__*/React.createElement(slots.overflowContent, { ...slotProps.overflowContent
-  })))));
+  }))))));
 };
 //# sourceMappingURL=renderAvatarGroup.js.map

package/lib/components/AvatarGroup/renderAvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,EAAkB,cAAlB,QAAwC,yBAAxC;AACA,SAAS,OAAT,QAAwB,yBAAxB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EACA,MAAM;IAAE,MAAF;IAAU,IAAV;IAAgB;EAAhB,IAA4C,KAAlD;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,kBAAkB,CAAC,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,MAAF;MAAU,IAAV;MAAgB;IAAhB;EAAR,CAA5B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,cAA3B,IAA6C,KAAK,CAAC,eAAnD,iBACC,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;IAAC,SAAS,EAAA,IAAV;IAAW,IAAI,EAAC;EAAhB,CAAR,eACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,eACE,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;IAAC,OAAO,EAAE,KAAK,CAAC,cAAhB;IAAgC,YAAY,EAAC;EAA7C,CAAR,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CADF,CADF,CADF,eAME,KAAA,CAAA,aAAA,CAAC,kBAAkB,CAAC,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,UAAU,EAAE,IAAd;MAAoB,MAApB;MAA4B,IAAI,EAAE;IAAlC;EAAR,CAA5B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CADF,CANF,CAHJ,CADF,CADF;~~AAmBD~~,~~CAvBM~~","sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverTrigger } from '@fluentui/react-popover';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/*\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n const { layout, size, nonOverflowAvatarsCount } = state;\n\n return (\n <AvatarGroupContext.Provider value={{ layout, size, nonOverflowAvatarsCount }}>\n <slots.root {...slotProps.root}>\n {state.root.children}\n {state.hasOverflow && slots.overflowButton && slots.overflowContent && (\n <Popover trapFocus size=\"small\">\n <PopoverTrigger>\n <Tooltip content={state.tooltipContent} relationship=\"label\">\n <slots.overflowButton {...slotProps.overflowButton} />\n </Tooltip>\n </PopoverTrigger>\n <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>\n <slots.overflowContent {...slotProps.overflowContent} />\n </AvatarGroupContext.Provider>\n </Popover>\n )}\n </slots.root>\n </AvatarGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,EAAkB,cAAlB,QAAwC,yBAAxC;AACA,SAAS,OAAT,QAAwB,yBAAxB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EACA,MAAM;IAAE,MAAF;IAAU,IAAV;IAAgB;EAAhB,IAA4C,KAAlD;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,kBAAkB,CAAC,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,MAAF;MAAU,IAAV;MAAgB;IAAhB;EAAR,CAA5B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,cAA3B,IAA6C,KAAK,CAAC,eAAnD,IAAsE,KAAK,CAAC,eAA5E,iBACC,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;IAAC,SAAS,EAAA,IAAV;IAAW,IAAI,EAAC;EAAhB,CAAR,eACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe,IAAf,eACE,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;IAAC,OAAO,EAAE,KAAK,CAAC,cAAhB;IAAgC,YAAY,EAAC;EAA7C,CAAR,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CADF,CADF,CADF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,kBAAkB,CAAC,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,UAAU,EAAE,IAAd;MAAoB,MAApB;MAA4B,IAAI,EAAE;IAAlC;EAAR,CAA5B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CADF,CADF,CANF,CAHJ,CADF,CADF;AAqBD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverTrigger } from '@fluentui/react-popover';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/*\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n const { layout, size, nonOverflowAvatarsCount } = state;\n\n return (\n <AvatarGroupContext.Provider value={{ layout, size, nonOverflowAvatarsCount }}>\n <slots.root {...slotProps.root}>\n {state.root.children}\n {state.hasOverflow && slots.overflowButton && slots.overflowContent && slots.overflowSurface && (\n <Popover trapFocus size=\"small\">\n <PopoverTrigger>\n <Tooltip content={state.tooltipContent} relationship=\"label\">\n <slots.overflowButton {...slotProps.overflowButton} />\n </Tooltip>\n </PopoverTrigger>\n <slots.overflowSurface {...slotProps.overflowSurface}>\n <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>\n <slots.overflowContent {...slotProps.overflowContent} />\n </AvatarGroupContext.Provider>\n </slots.overflowSurface>\n </Popover>\n )}\n </slots.root>\n </AvatarGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroup/useAvatarGroup.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { PopoverSurface } from '@fluentui/react-popover';
@@ -24,12 +23,6 @@ export const useAvatarGroup_unstable = (props, ref) => {
     overflowIndicator = size < 24 ? 'icon' : 'count'
   } = props;
   const childrenArray = React.Children.toArray(children);
-  if (process.env.NODE_ENV !== 'production' && childrenArray.find(child => /*#__PURE__*/React.isValidElement(child) && child.type !== AvatarGroupItem)) {
-    // eslint-disable-next-line no-console
-    console.warn("AvatarGroup's children must be of type AvatarGroupItems.");
-  }
   let rootChildren = childrenArray;
   let overflowChildren;
   let overflowButtonChildren;
@@ -58,7 +51,8 @@ export const useAvatarGroup_unstable = (props, ref) => {
   const overflowButton = resolveShorthand(props.overflowButton, {
     required: true,
     defaultProps: {
-      children: overflowButtonChildren
+      children: overflowButtonChildren,
+      type: 'button'
     }
   });
   const overflowContent = resolveShorthand(props.overflowContent, {
@@ -70,6 +64,9 @@ export const useAvatarGroup_unstable = (props, ref) => {
       tabIndex: 0
     }
   });
+  const overflowSurface = resolveShorthand(props.overflowSurface, {
+    required: true
+  });
   return {
     nonOverflowAvatarsCount: rootChildren.length,
     hasOverflow: !!overflowChildren,
@@ -79,12 +76,14 @@ export const useAvatarGroup_unstable = (props, ref) => {
     tooltipContent: 'View more people.',
     components: {
       root: 'div',
-      overflowContent: PopoverSurface,
-      overflowButton: 'button'
+      overflowContent: 'div',
+      overflowButton: 'button',
+      overflowSurface: PopoverSurface
     },
     root,
     overflowButton,
-    overflowContent
+    overflowContent,
+    overflowSurface
   };
 };
 export const defaultAvatarGroupSize = 32;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,~~eAAT,QAAgC,oCAAhC;AACA,SAAS,~~qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,qBAAT,QAAsC,uBAAtC;AACA,SAAS,cAAT,QAA+B,yBAA/B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,QAArB;IAA+B,UAAU,GAAG,CAA5C;IAA+C,IAAI,GAAG;EAAtD,IAAiF,KAAvF;EACA,MAAM;IAAE,iBAAiB,GAAG,IAAI,GAAG,EAAP,GAAY,MAAZ,GAAqB;EAA3C,IAAuD,KAA7D;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,CAAtB;;EAEA,~~IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IACA,aAAa,CAAC,IAAd,CAAmB,KAAK,~~IAAI,~~aAAA,KAAK,CAAC,cAAN,CAAqB,KAArB,KAA+B,KAAK,CAAC,IAAN,KAAe,eAA1E,CAFF,EAGE;IACA;IACA,OAAO,CAAC,IAAR,CAAa,0DAAb;EACD;;EAED,IAAI,~~YAAY,GAAG,aAAnB;EACA,IAAI,gBAAJ;EACA,IAAI,sBAAJ;;EAEA,IAAI,MAAM,KAAK,KAAf,EAAsB;IACpB,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,CAAvB,CAAf;IACA,gBAAgB,GAAG,aAAnB;EACD,CAHD,MAGO,IAAI,aAAa,CAAC,MAAd,GAAuB,UAA3B,EAAuC;IAC5C,MAAM,kBAAkB,GAAG,aAAa,CAAC,MAAd,GAAuB,UAAvB,GAAoC,CAA/D;IAEA,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,kBAApB,CAAf;IACA,gBAAgB,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,kBAAvB,CAAnB;;IAEA,IAAI,iBAAiB,KAAK,MAA1B,EAAkC;MAChC,sBAAsB,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAzB;IACD,CAFD,MAEO;MACL,sBAAsB,GAAG,kBAAkB,GAAG,EAArB,GAA0B,KAA1B,GAAkC,IAAI,kBAAkB,EAAjF;IACD;EACF;;EAED,MAAM,IAAI,GAAG,qBAAqB,CAChC,KADgC,EAEhC;IACE,IAAI,EAAE,OADR;IAEE,GAAG,KAFL;IAGE,GAHF;IAIE,QAAQ,EAAE;EAJZ,CAFgC,EAQhC,CAAC,MAAD,CARgC,CAAlC;EAWA,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;IAC5D,QAAQ,EAAE,IADkD;IAE5D,YAAY,EAAE;MACZ,QAAQ,EAAE;~~IADE~~;EAF8C,CAAvB,CAAvC;~~EAOA~~,MAAM,eAAe,GAAG,gBAAgB,CAAC,KAAK,CAAC,eAAP,EAAwB;IAC9D,QAAQ,EAAE,IADoD;IAE9D,YAAY,EAAE;MACZ,cAAc,UADF;MAEZ,QAAQ,EAAE,gBAFE;MAGZ,IAAI,EAAE,MAHM;MAIZ,QAAQ,EAAE;IAJE;EAFgD,CAAxB,CAAxC;EAUA,OAAO;IACL,uBAAuB,EAAE,YAAY,CAAC,MADjC;IAEL,WAAW,EAAE,CAAC,CAAC,gBAFV;IAGL,MAHK;IAIL,iBAJK;IAKL,IALK;IAML,cAAc,EAAE,mBANX;IAQL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,eAAe,EAAE,~~cAFP~~;MAGV,cAAc,EAAE;~~IAHN~~,~~CARP~~;~~IAcL~~,~~IAdK~~;IAeL,~~cAfK~~;IAgBL;~~EAhBK~~,CAAP;~~AAkBD~~,~~CA/EM~~;~~AAiFP~~,OAAO,MAAM,sBAAsB,GAAG,EAA/B","sourcesContent":["import * as React from 'react';\nimport { ~~AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';\nimport {~~ getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;\n const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;\n const childrenArray = React.Children.toArray(children);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem)\n ) {\n // eslint-disable-next-line no-console\n console.warn(\"AvatarGroup's children must be of type AvatarGroupItems.\");\n }\n\n let rootChildren = childrenArray;\n let overflowChildren;\n let overflowButtonChildren;\n\n if (layout === 'pie') {\n rootChildren = childrenArray.slice(0, 3);\n overflowChildren = childrenArray;\n } else if (childrenArray.length > maxAvatars) {\n const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;\n\n rootChildren = childrenArray.slice(numOfAvatarsToHide);\n overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);\n\n if (overflowIndicator === 'icon') {\n overflowButtonChildren = <MoreHorizontalRegular />;\n } else {\n overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;\n }\n }\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n children: rootChildren,\n },\n ['size'],\n );\n\n const overflowButton = resolveShorthand(props.overflowButton, {\n required: true,\n defaultProps: {\n children: overflowButtonChildren,\n },\n });\n\n const overflowContent = resolveShorthand(props.overflowContent, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n children: overflowChildren,\n role: 'list',\n tabIndex: 0,\n },\n });\n\n return {\n nonOverflowAvatarsCount: rootChildren.length,\n hasOverflow: !!overflowChildren,\n layout,\n overflowIndicator,\n size,\n tooltipContent: 'View more people.',\n\n components: {\n root: 'div',\n overflowContent: ~~PopoverSurface~~,\n overflowButton: 'button',\n },\n\n root,\n overflowButton,\n overflowContent,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,qBAAT,QAAsC,uBAAtC;AACA,SAAS,cAAT,QAA+B,yBAA/B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,QAArB;IAA+B,UAAU,GAAG,CAA5C;IAA+C,IAAI,GAAG;EAAtD,IAAiF,KAAvF;EACA,MAAM;IAAE,iBAAiB,GAAG,IAAI,GAAG,EAAP,GAAY,MAAZ,GAAqB;EAA3C,IAAuD,KAA7D;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,CAAtB;EAEA,IAAI,YAAY,GAAG,aAAnB;EACA,IAAI,gBAAJ;EACA,IAAI,sBAAJ;;EAEA,IAAI,MAAM,KAAK,KAAf,EAAsB;IACpB,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,CAAvB,CAAf;IACA,gBAAgB,GAAG,aAAnB;EACD,CAHD,MAGO,IAAI,aAAa,CAAC,MAAd,GAAuB,UAA3B,EAAuC;IAC5C,MAAM,kBAAkB,GAAG,aAAa,CAAC,MAAd,GAAuB,UAAvB,GAAoC,CAA/D;IAEA,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,kBAApB,CAAf;IACA,gBAAgB,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,kBAAvB,CAAnB;;IAEA,IAAI,iBAAiB,KAAK,MAA1B,EAAkC;MAChC,sBAAsB,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAzB;IACD,CAFD,MAEO;MACL,sBAAsB,GAAG,kBAAkB,GAAG,EAArB,GAA0B,KAA1B,GAAkC,IAAI,kBAAkB,EAAjF;IACD;EACF;;EAED,MAAM,IAAI,GAAG,qBAAqB,CAChC,KADgC,EAEhC;IACE,IAAI,EAAE,OADR;IAEE,GAAG,KAFL;IAGE,GAHF;IAIE,QAAQ,EAAE;EAJZ,CAFgC,EAQhC,CAAC,MAAD,CARgC,CAAlC;EAWA,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;IAC5D,QAAQ,EAAE,IADkD;IAE5D,YAAY,EAAE;MACZ,QAAQ,EAAE,sBADE;MAEZ,IAAI,EAAE;IAFM;EAF8C,CAAvB,CAAvC;EAQA,MAAM,eAAe,GAAG,gBAAgB,CAAC,KAAK,CAAC,eAAP,EAAwB;IAC9D,QAAQ,EAAE,IADoD;IAE9D,YAAY,EAAE;MACZ,cAAc,UADF;MAEZ,QAAQ,EAAE,gBAFE;MAGZ,IAAI,EAAE,MAHM;MAIZ,QAAQ,EAAE;IAJE;EAFgD,CAAxB,CAAxC;EAUA,MAAM,eAAe,GAAG,gBAAgB,CAAC,KAAK,CAAC,eAAP,EAAwB;IAC9D,QAAQ,EAAE;EADoD,CAAxB,CAAxC;EAIA,OAAO;IACL,uBAAuB,EAAE,YAAY,CAAC,MADjC;IAEL,WAAW,EAAE,CAAC,CAAC,gBAFV;IAGL,MAHK;IAIL,iBAJK;IAKL,IALK;IAML,cAAc,EAAE,mBANX;IAQL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,eAAe,EAAE,KAFP;MAGV,cAAc,EAAE,QAHN;MAIV,eAAe,EAAE;IAJP,CARP;IAeL,IAfK;IAgBL,cAhBK;IAiBL,eAjBK;IAkBL;EAlBK,CAAP;AAoBD,CA9EM;AAgFP,OAAO,MAAM,sBAAsB,GAAG,EAA/B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;\n const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;\n const childrenArray = React.Children.toArray(children);\n\n let rootChildren = childrenArray;\n let overflowChildren;\n let overflowButtonChildren;\n\n if (layout === 'pie') {\n rootChildren = childrenArray.slice(0, 3);\n overflowChildren = childrenArray;\n } else if (childrenArray.length > maxAvatars) {\n const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;\n\n rootChildren = childrenArray.slice(numOfAvatarsToHide);\n overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);\n\n if (overflowIndicator === 'icon') {\n overflowButtonChildren = <MoreHorizontalRegular />;\n } else {\n overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;\n }\n }\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n children: rootChildren,\n },\n ['size'],\n );\n\n const overflowButton = resolveShorthand(props.overflowButton, {\n required: true,\n defaultProps: {\n children: overflowButtonChildren,\n type: 'button',\n },\n });\n\n const overflowContent = resolveShorthand(props.overflowContent, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n children: overflowChildren,\n role: 'list',\n tabIndex: 0,\n },\n });\n\n const overflowSurface = resolveShorthand(props.overflowSurface, {\n required: true,\n });\n\n return {\n nonOverflowAvatarsCount: rootChildren.length,\n hasOverflow: !!overflowChildren,\n layout,\n overflowIndicator,\n size,\n tooltipContent: 'View more people.',\n\n components: {\n root: 'div',\n overflowContent: 'div',\n overflowButton: 'button',\n overflowSurface: PopoverSurface,\n },\n\n root,\n overflowButton,\n overflowContent,\n overflowSurface,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.js CHANGED Viewed

@@ -6,7 +6,8 @@ import { useGroupChildClassName } from '../../AvatarGroupItem';
 export const avatarGroupClassNames = {
   root: 'fui-AvatarGroup',
   overflowContent: 'fui-AvatarGroup__overflowContent',
-  overflowButton: 'fui-AvatarGroup__overflowButton'
+  overflowButton: 'fui-AvatarGroup__overflowButton',
+  overflowSurface: 'fui-AvatarGroup__overflowSurface'
 };
 /**
  * Styles for the root slot.
@@ -19,24 +20,31 @@ const useStyles = /*#__PURE__*/__styles({
   },
   "pie": {
     "Bgl5zvf": "f1uz6ud1",
+    "De3pzq": "f1ganh6p",
     "Bsw6fvg": "fe2ae1k"
   },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "vchsgm": "fbiesyy",
-    "ozrjjd": ["fq2kn9", "f1jxwnad"],
-    "B7lelfh": "f1il7mou",
-    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
-    "Bk9m21v": "f1m62og4",
-    "Bwehi4c": "f1rrqamn",
-    "H05dg8": "fbcoddx"
+  "overflowSurface": {
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"]
+  },
+  "overflowContent": {
+    "Bxyxcbc": "fopcw2o",
+    "sshi5w": "f1n5o1gx",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "fqkkaap",
+    "z8tnut": "f17mpqex",
+    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
+    "Byoj8tv": "fdvome7",
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
+    "a9b677": "f13dwy2t"
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{-webkit-clip-path:circle(50%);clip-path:circle(50%);}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1m62og4:focus-within{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1rrqamn:focus-within{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fbcoddx:focus-within{outline-style:solid;}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{-webkit-clip-path:circle(50%);clip-path:circle(50%);}", ".f1ganh6p{background-color:var(--colorTransparentStroke);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", ".f1p9o1ba{overflow-x:hidden;}", ".fqkkaap{overflow-y:scroll;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f13dwy2t{width:220px;}"],
   "m": [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
-  }]],
-  "f": [".ftqa4ok:focus{outline-style:none;}"]
+  }]]
 });
 /**
  * Styles for overflow button slot.
@@ -83,6 +91,21 @@ const useOverflowButtonStyles = /*#__PURE__*/__styles({
     "B32s92o": "fgeg2qa",
     "B5hngm5": "fhcq1yo"
   },
+  "pieFocusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "rkqiyj": "f1gx8lax",
+    "Bs3nqqt": ["f1as8ps8", "f17o1ya2"],
+    "B4mky7d": "f1amggu6",
+    "Bviepcv": ["f17o1ya2", "f1as8ps8"],
+    "Bc28wk5": "flnfwa4",
+    "w1edd7": ["fuav46a", "fcnogh1"],
+    "Ba8awiv": "f19zilzp",
+    "I50xcx": ["fcnogh1", "fuav46a"],
+    "Bnmjwt4": "f119w1j1",
+    "Jopkrh": ["f1wlf18u", "fcqg1ja"],
+    "hhrs2v": "ft77uen",
+    "B7jbng7": ["fcqg1ja", "f1wlf18u"]
+  },
   "states": {
     "Bi91k9c": "feu1g3u",
     "Jwef8y": "f1knas48",
@@ -187,7 +210,7 @@ const useOverflowButtonStyles = /*#__PURE__*/__styles({
     "ibv6hh": ["f1g0iy8l", "figl7jc"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gx8lax:focus{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1as8ps8:focus{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f17o1ya2:focus{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1amggu6:focus{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}", "[data-keyboard-nav] .f119w1j1:focus{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1wlf18u:focus{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fcqg1ja:focus{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .ft77uen:focus{border-bottom-color:var(--colorStrokeFocus2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
   "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
@@ -201,26 +224,6 @@ const useOverflowButtonStyles = /*#__PURE__*/__styles({
   "h": [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
   "a": [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
 });
-/**
- * Styles for overflow list slot.
- */
-const useOverflowContentStyles = /*#__PURE__*/__styles({
-  "base": {
-    "Bxyxcbc": "fopcw2o",
-    "sshi5w": "f1n5o1gx",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "fqkkaap",
-    "z8tnut": "f17mpqex",
-    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "fdvome7",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "a9b677": "f13dwy2t"
-  }
-}, {
-  "d": [".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", ".f1p9o1ba{overflow-x:hidden;}", ".fqkkaap{overflow-y:scroll;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f13dwy2t{width:220px;}"]
-});
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */
@@ -234,13 +237,16 @@ export const useAvatarGroupStyles_unstable = state => {
   } = state;
   const styles = useStyles();
   const sizeStyles = useSizeStyles();
-  const overflowContentStyles = useOverflowContentStyles();
   const overflowButtonStyles = useOverflowButtonStyles();
   const groupChildClassName = useGroupChildClassName(layout, size, true);
-  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && styles.pie, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.focusIndicator, state.root.className);
+  state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && styles.pie, layout === 'pie' && sizeStyles[size], state.root.className);
   if (state.overflowContent) {
-    state.overflowContent.className = mergeClasses(avatarGroupClassNames.overflowContent, overflowContentStyles.base, state.overflowContent.className);
+    state.overflowContent.className = mergeClasses(avatarGroupClassNames.overflowContent, styles.overflowContent, state.overflowContent.className);
+  }
+  if (state.overflowSurface) {
+    state.overflowSurface.className = mergeClasses(avatarGroupClassNames.overflowSurface, styles.overflowSurface, state.overflowSurface.className);
   }
   const overflowButtonClasses = [];
@@ -288,7 +294,7 @@ export const useAvatarGroupStyles_unstable = state => {
   }
   if (state.overflowButton) {
-    state.overflowButton.className = mergeClasses(avatarGroupClassNames.overflowButton, sizeStyles[size], overflowButtonStyles.base, ...overflowButtonClasses, layout !== 'pie' && overflowButtonStyles.states, layout !== 'pie' && overflowButtonStyles.focusIndicator, layout === 'pie' && overflowButtonStyles.pie, groupChildClassName, state.overflowButton.className);
+    state.overflowButton.className = mergeClasses(avatarGroupClassNames.overflowButton, sizeStyles[size], overflowButtonStyles.base, ...overflowButtonClasses, layout !== 'pie' && overflowButtonStyles.states, layout !== 'pie' && overflowButtonStyles.focusIndicator, layout === 'pie' && overflowButtonStyles.pieFocusIndicator, layout === 'pie' && overflowButtonStyles.pie, groupChildClassName, state.overflowButton.className);
   }
   return state;

package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n overflowContent: 'fui-AvatarGroup__overflowContent',\n overflowButton: 'fui-AvatarGroup__overflowButton',\n};\n\n/*\n Styles for the root slot.\n /\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n focusIndicator: createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor('transparent'),\n outlineColor: tokens.colorStrokeFocus2,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n },\n { selector: 'focus-within' },\n ),\n});\n\n/\n Styles for overflow button slot.\n /\nconst useOverflowButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // match color to Avatar's outline color\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n // These styles match the default button styles\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: tokens.colorStrokeFocus2,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n }),\n\n states: {\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/\n Styles for overflow list slot.\n /\nconst useOverflowContentStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/\n Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const { layout, overflowIndicator, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const overflowContentStyles = useOverflowContentStyles();\n const overflowButtonStyles = useOverflowButtonStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && styles.pie,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.focusIndicator,\n state.root.className,\n );\n\n if (state.overflowContent) {\n state.overflowContent.className = mergeClasses(\n avatarGroupClassNames.overflowContent,\n overflowContentStyles.base,\n state.overflowContent.className,\n );\n }\n\n const overflowButtonClasses = [];\n\n if (size < 36) {\n overflowButtonClasses.push(overflowButtonStyles.borderThin);\n } else if (size < 56) {\n overflowButtonClasses.push(overflowButtonStyles.borderThick);\n } else if (size < 72) {\n overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n }\n\n if (overflowIndicator === 'count') {\n if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n } else if (size <= 28) {\n overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n } else if (size <= 96) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n overflowButtonClasses.push(overflowButtonStyles.icon12);\n } else if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.icon16);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.icon20);\n } else if (size <= 48) {\n overflowButtonClasses.push(overflowButtonStyles.icon24);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.icon28);\n } else if (size <= 72) {\n overflowButtonClasses.push(overflowButtonStyles.icon32);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.icon48);\n }\n }\n\n if (state.overflowButton) {\n state.overflowButton.className = mergeClasses(\n avatarGroupClassNames.overflowButton,\n sizeStyles[size],\n overflowButtonStyles.base,\n ...overflowButtonClasses,\n layout !== 'pie' && overflowButtonStyles.states,\n layout !== 'pie' && overflowButtonStyles.focusIndicator,\n layout === 'pie' && overflowButtonStyles.pie,\n groupChildClassName,\n state.overflowButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n overflowContent: 'fui-AvatarGroup__overflowContent',\n overflowButton: 'fui-AvatarGroup__overflowButton',\n overflowSurface: 'fui-AvatarGroup__overflowSurface',\n};\n\n/*\n Styles for the root slot.\n /\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n overflowSurface: {\n ...shorthands.padding(0),\n },\n overflowContent: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/\n Styles for overflow button slot.\n /\nconst useOverflowButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // match color to Avatar's outline color\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n // These styles match the default button styles\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: tokens.colorStrokeFocus2,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n }),\n\n // This custom focus indicator is required for the pie layout due to the clip-path applied to the root\n pieFocusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\n\n states: {\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/\n Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const { layout, overflowIndicator, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const overflowButtonStyles = useOverflowButtonStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && styles.pie,\n layout === 'pie' && sizeStyles[size],\n state.root.className,\n );\n\n if (state.overflowContent) {\n state.overflowContent.className = mergeClasses(\n avatarGroupClassNames.overflowContent,\n styles.overflowContent,\n state.overflowContent.className,\n );\n }\n\n if (state.overflowSurface) {\n state.overflowSurface.className = mergeClasses(\n avatarGroupClassNames.overflowSurface,\n styles.overflowSurface,\n state.overflowSurface.className,\n );\n }\n\n const overflowButtonClasses = [];\n\n if (size < 36) {\n overflowButtonClasses.push(overflowButtonStyles.borderThin);\n } else if (size < 56) {\n overflowButtonClasses.push(overflowButtonStyles.borderThick);\n } else if (size < 72) {\n overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n }\n\n if (overflowIndicator === 'count') {\n if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n } else if (size <= 28) {\n overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n } else if (size <= 96) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n overflowButtonClasses.push(overflowButtonStyles.icon12);\n } else if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.icon16);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.icon20);\n } else if (size <= 48) {\n overflowButtonClasses.push(overflowButtonStyles.icon24);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.icon28);\n } else if (size <= 72) {\n overflowButtonClasses.push(overflowButtonStyles.icon32);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.icon48);\n }\n }\n\n if (state.overflowButton) {\n state.overflowButton.className = mergeClasses(\n avatarGroupClassNames.overflowButton,\n sizeStyles[size],\n overflowButtonStyles.base,\n ...overflowButtonClasses,\n layout !== 'pie' && overflowButtonStyles.states,\n layout !== 'pie' && overflowButtonStyles.focusIndicator,\n layout === 'pie' && overflowButtonStyles.pieFocusIndicator,\n layout === 'pie' && overflowButtonStyles.pie,\n groupChildClassName,\n state.overflowButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js CHANGED Viewed

@@ -36,21 +36,22 @@ const renderAvatarGroup_unstable = state => {
       nonOverflowAvatarsCount
     }
   }, React.createElement(slots.root, { ...slotProps.root
-  }, state.root.children, state.hasOverflow && slots.overflowButton && slots.overflowContent && React.createElement(react_popover_1.Popover, {
+  }, state.root.children, state.hasOverflow && slots.overflowButton && slots.overflowContent && slots.overflowSurface && React.createElement(react_popover_1.Popover, {
     trapFocus: true,
     size: "small"
   }, React.createElement(react_popover_1.PopoverTrigger, null, React.createElement(react_tooltip_1.Tooltip, {
     content: state.tooltipContent,
     relationship: "label"
   }, React.createElement(slots.overflowButton, { ...slotProps.overflowButton
-  }))), React.createElement(AvatarGroupContext_1.AvatarGroupContext.Provider, {
+  }))), React.createElement(slots.overflowSurface, { ...slotProps.overflowSurface
+  }, React.createElement(AvatarGroupContext_1.AvatarGroupContext.Provider, {
     value: {
       isOverflow: true,
       layout,
       size: 24
     }
   }, React.createElement(slots.overflowContent, { ...slotProps.overflowContent
-  })))));
+  }))))));
 };
 exports.renderAvatarGroup_unstable = renderAvatarGroup_unstable;

package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EACA,MAAM;IAAE,MAAF;IAAU,IAAV;IAAgB;EAAhB,IAA4C,KAAlD;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,MAAF;MAAU,IAAV;MAAgB;IAAhB;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,cAA3B,IAA6C,KAAK,CAAC,eAAnD,IACC,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,SAAS,EAAA,IAAV;IAAW,IAAI,EAAC;EAAhB,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,IAAf,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,OAAO,EAAE,KAAK,CAAC,cAAhB;IAAgC,YAAY,EAAC;EAA7C,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CADF,CADF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,UAAU,EAAE,IAAd;MAAoB,MAApB;MAA4B,IAAI,EAAE;IAAlC;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CADF,CANF,CAHJ,CADF,CADF;~~AAmBD~~,~~CAvBM~~;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverTrigger } from '@fluentui/react-popover';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/*\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n const { layout, size, nonOverflowAvatarsCount } = state;\n\n return (\n <AvatarGroupContext.Provider value={{ layout, size, nonOverflowAvatarsCount }}>\n <slots.root {...slotProps.root}>\n {state.root.children}\n {state.hasOverflow && slots.overflowButton && slots.overflowContent && (\n <Popover trapFocus size=\"small\">\n <PopoverTrigger>\n <Tooltip content={state.tooltipContent} relationship=\"label\">\n <slots.overflowButton {...slotProps.overflowButton} />\n </Tooltip>\n </PopoverTrigger>\n <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>\n <slots.overflowContent {...slotProps.overflowContent} />\n </AvatarGroupContext.Provider>\n </Popover>\n )}\n </slots.root>\n </AvatarGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/renderAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EACA,MAAM;IAAE,MAAF;IAAU,IAAV;IAAgB;EAAhB,IAA4C,KAAlD;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,MAAF;MAAU,IAAV;MAAgB;IAAhB;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,cAA3B,IAA6C,KAAK,CAAC,eAAnD,IAAsE,KAAK,CAAC,eAA5E,IACC,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,SAAS,EAAA,IAAV;IAAW,IAAI,EAAC;EAAhB,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,IAAf,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,OAAD,EAAQ;IAAC,OAAO,EAAE,KAAK,CAAC,cAAhB;IAAgC,YAAY,EAAC;EAA7C,CAAR,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CADF,CADF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,EACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,kBAAA,CAAmB,QAApB,EAA4B;IAAC,KAAK,EAAE;MAAE,UAAU,EAAE,IAAd;MAAoB,MAApB;MAA4B,IAAI,EAAE;IAAlC;EAAR,CAA5B,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CADF,CADF,CANF,CAHJ,CADF,CADF;AAqBD,CAzBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverTrigger } from '@fluentui/react-popover';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupContext } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';\n\n/*\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState) => {\n const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);\n const { layout, size, nonOverflowAvatarsCount } = state;\n\n return (\n <AvatarGroupContext.Provider value={{ layout, size, nonOverflowAvatarsCount }}>\n <slots.root {...slotProps.root}>\n {state.root.children}\n {state.hasOverflow && slots.overflowButton && slots.overflowContent && slots.overflowSurface && (\n <Popover trapFocus size=\"small\">\n <PopoverTrigger>\n <Tooltip content={state.tooltipContent} relationship=\"label\">\n <slots.overflowButton {...slotProps.overflowButton} />\n </Tooltip>\n </PopoverTrigger>\n <slots.overflowSurface {...slotProps.overflowSurface}>\n <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>\n <slots.overflowContent {...slotProps.overflowContent} />\n </AvatarGroupContext.Provider>\n </slots.overflowSurface>\n </Popover>\n )}\n </slots.root>\n </AvatarGroupContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}

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

@@ -7,8 +7,6 @@ exports.defaultAvatarGroupSize = exports.useAvatarGroup_unstable = void 0;
 const React = /*#__PURE__*/require("react");
-const AvatarGroupItem_1 = /*#__PURE__*/require("../AvatarGroupItem/AvatarGroupItem");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
@@ -36,12 +34,6 @@ const useAvatarGroup_unstable = (props, ref) => {
     overflowIndicator = size < 24 ? 'icon' : 'count'
   } = props;
   const childrenArray = React.Children.toArray(children);
-  if (process.env.NODE_ENV !== 'production' && childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem_1.AvatarGroupItem)) {
-    // eslint-disable-next-line no-console
-    console.warn("AvatarGroup's children must be of type AvatarGroupItems.");
-  }
   let rootChildren = childrenArray;
   let overflowChildren;
   let overflowButtonChildren;
@@ -70,7 +62,8 @@ const useAvatarGroup_unstable = (props, ref) => {
   const overflowButton = react_utilities_1.resolveShorthand(props.overflowButton, {
     required: true,
     defaultProps: {
-      children: overflowButtonChildren
+      children: overflowButtonChildren,
+      type: 'button'
     }
   });
   const overflowContent = react_utilities_1.resolveShorthand(props.overflowContent, {
@@ -82,6 +75,9 @@ const useAvatarGroup_unstable = (props, ref) => {
       tabIndex: 0
     }
   });
+  const overflowSurface = react_utilities_1.resolveShorthand(props.overflowSurface, {
+    required: true
+  });
   return {
     nonOverflowAvatarsCount: rootChildren.length,
     hasOverflow: !!overflowChildren,
@@ -91,12 +87,14 @@ const useAvatarGroup_unstable = (props, ref) => {
     tooltipContent: 'View more people.',
     components: {
       root: 'div',
-      overflowContent: react_popover_1.PopoverSurface,
-      overflowButton: 'button'
+      overflowContent: 'div',
+      overflowButton: 'button',
+      overflowSurface: react_popover_1.PopoverSurface
     },
     root,
     overflowButton,
-    overflowContent
+    overflowContent,
+    overflowSurface
   };
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,~~oCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,~~2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,QAArB;IAA+B,UAAU,GAAG,CAA5C;IAA+C,IAAI,GAAG,OAAA,CAAA;EAAtD,IAAiF,KAAvF;EACA,MAAM;IAAE,iBAAiB,GAAG,IAAI,GAAG,EAAP,GAAY,MAAZ,GAAqB;EAA3C,IAAuD,KAA7D;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,CAAtB;;EAEA,~~IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IACA,aAAa,CAAC,IAAd,CAAmB,KAAK,~~IAAI,~~KAAK,CAAC,cAAN,CAAqB,KAArB,KAA+B,KAAK,CAAC,IAAN,KAAe,iBAAA,CAAA,eAA1E,CAFF,EAGE;IACA;IACA,OAAO,CAAC,IAAR,CAAa,0DAAb;EACD;;EAED,IAAI,~~YAAY,GAAG,aAAnB;EACA,IAAI,gBAAJ;EACA,IAAI,sBAAJ;;EAEA,IAAI,MAAM,KAAK,KAAf,EAAsB;IACpB,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,CAAvB,CAAf;IACA,gBAAgB,GAAG,aAAnB;EACD,CAHD,MAGO,IAAI,aAAa,CAAC,MAAd,GAAuB,UAA3B,EAAuC;IAC5C,MAAM,kBAAkB,GAAG,aAAa,CAAC,MAAd,GAAuB,UAAvB,GAAoC,CAA/D;IAEA,YAAY,GAAG,aAAa,CAAC,KAAd,CAAoB,kBAApB,CAAf;IACA,gBAAgB,GAAG,aAAa,CAAC,KAAd,CAAoB,CAApB,EAAuB,kBAAvB,CAAnB;;IAEA,IAAI,iBAAiB,KAAK,MAA1B,EAAkC;MAChC,sBAAsB,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAzB;IACD,CAFD,MAEO;MACL,sBAAsB,GAAG,kBAAkB,GAAG,EAArB,GAA0B,KAA1B,GAAkC,IAAI,kBAAkB,EAAjF;IACD;EACF;;EAED,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CACX,KADW,EAEX;IACE,IAAI,EAAE,OADR;IAEE,GAAG,KAFL;IAGE,GAHF;IAIE,QAAQ,EAAE;EAJZ,CAFW,EAQX,CAAC,MAAD,CARW,CAAb;EAWA,MAAM,cAAc,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,cAAvB,EAAuC;IAC5D,QAAQ,EAAE,IADkD;IAE5D,YAAY,EAAE;MACZ,QAAQ,EAAE;~~IADE~~;EAF8C,CAAvC,CAAvB;~~EAOA~~,MAAM,eAAe,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,eAAvB,EAAwC;IAC9D,QAAQ,EAAE,IADoD;IAE9D,YAAY,EAAE;MACZ,cAAc,UADF;MAEZ,QAAQ,EAAE,gBAFE;MAGZ,IAAI,EAAE,MAHM;MAIZ,QAAQ,EAAE;IAJE;EAFgD,CAAxC,CAAxB;EAUA,OAAO;IACL,uBAAuB,EAAE,YAAY,CAAC,MADjC;IAEL,WAAW,EAAE,CAAC,CAAC,gBAFV;IAGL,MAHK;IAIL,iBAJK;IAKL,IALK;IAML,cAAc,EAAE,mBANX;IAQL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,eAAe,EAAE,~~eAAA,CAAA,cAFP~~;MAGV,cAAc,EAAE;~~IAHN~~,~~CARP~~;~~IAcL~~,~~IAdK~~;IAeL,~~cAfK~~;IAgBL;~~EAhBK~~,CAAP;~~AAkBD~~,~~CA/EM~~;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;~~AAiFA~~,OAAA,CAAA,sBAAA,GAAyB,EAAzB","sourcesContent":["import * as React from 'react';\nimport { ~~AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';\nimport {~~ getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;\n const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;\n const childrenArray = React.Children.toArray(children);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem)\n ) {\n // eslint-disable-next-line no-console\n console.warn(\"AvatarGroup's children must be of type AvatarGroupItems.\");\n }\n\n let rootChildren = childrenArray;\n let overflowChildren;\n let overflowButtonChildren;\n\n if (layout === 'pie') {\n rootChildren = childrenArray.slice(0, 3);\n overflowChildren = childrenArray;\n } else if (childrenArray.length > maxAvatars) {\n const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;\n\n rootChildren = childrenArray.slice(numOfAvatarsToHide);\n overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);\n\n if (overflowIndicator === 'icon') {\n overflowButtonChildren = <MoreHorizontalRegular />;\n } else {\n overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;\n }\n }\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n children: rootChildren,\n },\n ['size'],\n );\n\n const overflowButton = resolveShorthand(props.overflowButton, {\n required: true,\n defaultProps: {\n children: overflowButtonChildren,\n },\n });\n\n const overflowContent = resolveShorthand(props.overflowContent, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n children: overflowChildren,\n role: 'list',\n tabIndex: 0,\n },\n });\n\n return {\n nonOverflowAvatarsCount: rootChildren.length,\n hasOverflow: !!overflowChildren,\n layout,\n overflowIndicator,\n size,\n tooltipContent: 'View more people.',\n\n components: {\n root: 'div',\n overflowContent: ~~PopoverSurface~~,\n overflowButton: 'button',\n },\n\n root,\n overflowButton,\n overflowContent,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/useAvatarGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/*\n Create the state required to render AvatarGroup.\n \n The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n \n @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;\n const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;\n const childrenArray = React.Children.toArray(children);\n\n let rootChildren = childrenArray;\n let overflowChildren;\n let overflowButtonChildren;\n\n if (layout === 'pie') {\n rootChildren = childrenArray.slice(0, 3);\n overflowChildren = childrenArray;\n } else if (childrenArray.length > maxAvatars) {\n const numOfAvatarsToHide = childrenArray.length - maxAvatars + 1;\n\n rootChildren = childrenArray.slice(numOfAvatarsToHide);\n overflowChildren = childrenArray.slice(0, numOfAvatarsToHide);\n\n if (overflowIndicator === 'icon') {\n overflowButtonChildren = <MoreHorizontalRegular />;\n } else {\n overflowButtonChildren = numOfAvatarsToHide > 99 ? '99+' : `+${numOfAvatarsToHide}`;\n }\n }\n\n const root = getNativeElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n ref,\n children: rootChildren,\n },\n ['size'],\n );\n\n const overflowButton = resolveShorthand(props.overflowButton, {\n required: true,\n defaultProps: {\n children: overflowButtonChildren,\n type: 'button',\n },\n });\n\n const overflowContent = resolveShorthand(props.overflowContent, {\n required: true,\n defaultProps: {\n 'aria-label': 'Overflow',\n children: overflowChildren,\n role: 'list',\n tabIndex: 0,\n },\n });\n\n const overflowSurface = resolveShorthand(props.overflowSurface, {\n required: true,\n });\n\n return {\n nonOverflowAvatarsCount: rootChildren.length,\n hasOverflow: !!overflowChildren,\n layout,\n overflowIndicator,\n size,\n tooltipContent: 'View more people.',\n\n components: {\n root: 'div',\n overflowContent: 'div',\n overflowButton: 'button',\n overflowSurface: PopoverSurface,\n },\n\n root,\n overflowButton,\n overflowContent,\n overflowSurface,\n };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js CHANGED Viewed

@@ -18,7 +18,8 @@ const AvatarGroupItem_1 = /*#__PURE__*/require("../../AvatarGroupItem");
 exports.avatarGroupClassNames = {
   root: 'fui-AvatarGroup',
   overflowContent: 'fui-AvatarGroup__overflowContent',
-  overflowButton: 'fui-AvatarGroup__overflowButton'
+  overflowButton: 'fui-AvatarGroup__overflowButton',
+  overflowSurface: 'fui-AvatarGroup__overflowSurface'
 };
 /**
  * Styles for the root slot.
@@ -31,24 +32,31 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   },
   "pie": {
     "Bgl5zvf": "f1uz6ud1",
+    "De3pzq": "f1ganh6p",
     "Bsw6fvg": "fe2ae1k"
   },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "vchsgm": "fbiesyy",
-    "ozrjjd": ["fq2kn9", "f1jxwnad"],
-    "B7lelfh": "f1il7mou",
-    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
-    "Bk9m21v": "f1m62og4",
-    "Bwehi4c": "f1rrqamn",
-    "H05dg8": "fbcoddx"
+  "overflowSurface": {
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"]
+  },
+  "overflowContent": {
+    "Bxyxcbc": "fopcw2o",
+    "sshi5w": "f1n5o1gx",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "fqkkaap",
+    "z8tnut": "f17mpqex",
+    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
+    "Byoj8tv": "fdvome7",
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
+    "a9b677": "f13dwy2t"
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{-webkit-clip-path:circle(50%);clip-path:circle(50%);}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1m62og4:focus-within{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1rrqamn:focus-within{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fbcoddx:focus-within{outline-style:solid;}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1uz6ud1{-webkit-clip-path:circle(50%);clip-path:circle(50%);}", ".f1ganh6p{background-color:var(--colorTransparentStroke);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", ".f1p9o1ba{overflow-x:hidden;}", ".fqkkaap{overflow-y:scroll;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f13dwy2t{width:220px;}"],
   "m": [["@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
-  }]],
-  "f": [".ftqa4ok:focus{outline-style:none;}"]
+  }]]
 });
 /**
  * Styles for overflow button slot.
@@ -95,6 +103,21 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
     "B32s92o": "fgeg2qa",
     "B5hngm5": "fhcq1yo"
   },
+  "pieFocusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "rkqiyj": "f1gx8lax",
+    "Bs3nqqt": ["f1as8ps8", "f17o1ya2"],
+    "B4mky7d": "f1amggu6",
+    "Bviepcv": ["f17o1ya2", "f1as8ps8"],
+    "Bc28wk5": "flnfwa4",
+    "w1edd7": ["fuav46a", "fcnogh1"],
+    "Ba8awiv": "f19zilzp",
+    "I50xcx": ["fcnogh1", "fuav46a"],
+    "Bnmjwt4": "f119w1j1",
+    "Jopkrh": ["f1wlf18u", "fcqg1ja"],
+    "hhrs2v": "ft77uen",
+    "B7jbng7": ["fcqg1ja", "f1wlf18u"]
+  },
   "states": {
     "Bi91k9c": "feu1g3u",
     "Jwef8y": "f1knas48",
@@ -199,7 +222,7 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
     "ibv6hh": ["f1g0iy8l", "figl7jc"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .foqs3zz:focus{outline-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gx8lax:focus{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1as8ps8:focus{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f17o1ya2:focus{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1amggu6:focus{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}", "[data-keyboard-nav] .f119w1j1:focus{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1wlf18u:focus{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fcqg1ja:focus{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .ft77uen:focus{border-bottom-color:var(--colorStrokeFocus2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
   "m": [["@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}", {
@@ -213,26 +236,6 @@ const useOverflowButtonStyles = /*#__PURE__*/react_1.__styles({
   "h": [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
   "a": [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
 });
-/**
- * Styles for overflow list slot.
- */
-const useOverflowContentStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "Bxyxcbc": "fopcw2o",
-    "sshi5w": "f1n5o1gx",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "fqkkaap",
-    "z8tnut": "f17mpqex",
-    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "fdvome7",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "a9b677": "f13dwy2t"
-  }
-}, {
-  "d": [".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", ".f1p9o1ba{overflow-x:hidden;}", ".fqkkaap{overflow-y:scroll;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f13dwy2t{width:220px;}"]
-});
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */
@@ -246,13 +249,16 @@ const useAvatarGroupStyles_unstable = state => {
   } = state;
   const styles = useStyles();
   const sizeStyles = useAvatarStyles_1.useSizeStyles();
-  const overflowContentStyles = useOverflowContentStyles();
   const overflowButtonStyles = useOverflowButtonStyles();
   const groupChildClassName = AvatarGroupItem_1.useGroupChildClassName(layout, size, true);
-  state.root.className = react_1.mergeClasses(exports.avatarGroupClassNames.root, styles.base, layout === 'pie' && styles.pie, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.focusIndicator, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.avatarGroupClassNames.root, styles.base, layout === 'pie' && styles.pie, layout === 'pie' && sizeStyles[size], state.root.className);
   if (state.overflowContent) {
-    state.overflowContent.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowContent, overflowContentStyles.base, state.overflowContent.className);
+    state.overflowContent.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowContent, styles.overflowContent, state.overflowContent.className);
+  }
+  if (state.overflowSurface) {
+    state.overflowSurface.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowSurface, styles.overflowSurface, state.overflowSurface.className);
   }
   const overflowButtonClasses = [];
@@ -300,7 +306,7 @@ const useAvatarGroupStyles_unstable = state => {
   }
   if (state.overflowButton) {
-    state.overflowButton.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowButton, sizeStyles[size], overflowButtonStyles.base, ...overflowButtonClasses, layout !== 'pie' && overflowButtonStyles.states, layout !== 'pie' && overflowButtonStyles.focusIndicator, layout === 'pie' && overflowButtonStyles.pie, groupChildClassName, state.overflowButton.className);
+    state.overflowButton.className = react_1.mergeClasses(exports.avatarGroupClassNames.overflowButton, sizeStyles[size], overflowButtonStyles.base, ...overflowButtonClasses, layout !== 'pie' && overflowButtonStyles.states, layout !== 'pie' && overflowButtonStyles.focusIndicator, layout === 'pie' && overflowButtonStyles.pieFocusIndicator, layout === 'pie' && overflowButtonStyles.pie, groupChildClassName, state.overflowButton.className);
   }
   return state;

package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n overflowContent: 'fui-AvatarGroup__overflowContent',\n overflowButton: 'fui-AvatarGroup__overflowButton',\n};\n\n/*\n Styles for the root slot.\n /\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n focusIndicator: createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor('transparent'),\n outlineColor: tokens.colorStrokeFocus2,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n },\n { selector: 'focus-within' },\n ),\n});\n\n/\n Styles for overflow button slot.\n /\nconst useOverflowButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // match color to Avatar's outline color\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n // These styles match the default button styles\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: tokens.colorStrokeFocus2,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n }),\n\n states: {\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/\n Styles for overflow list slot.\n /\nconst useOverflowContentStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/\n Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const { layout, overflowIndicator, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const overflowContentStyles = useOverflowContentStyles();\n const overflowButtonStyles = useOverflowButtonStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && styles.pie,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.focusIndicator,\n state.root.className,\n );\n\n if (state.overflowContent) {\n state.overflowContent.className = mergeClasses(\n avatarGroupClassNames.overflowContent,\n overflowContentStyles.base,\n state.overflowContent.className,\n );\n }\n\n const overflowButtonClasses = [];\n\n if (size < 36) {\n overflowButtonClasses.push(overflowButtonStyles.borderThin);\n } else if (size < 56) {\n overflowButtonClasses.push(overflowButtonStyles.borderThick);\n } else if (size < 72) {\n overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n }\n\n if (overflowIndicator === 'count') {\n if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n } else if (size <= 28) {\n overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n } else if (size <= 96) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n overflowButtonClasses.push(overflowButtonStyles.icon12);\n } else if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.icon16);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.icon20);\n } else if (size <= 48) {\n overflowButtonClasses.push(overflowButtonStyles.icon24);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.icon28);\n } else if (size <= 72) {\n overflowButtonClasses.push(overflowButtonStyles.icon32);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.icon48);\n }\n }\n\n if (state.overflowButton) {\n state.overflowButton.className = mergeClasses(\n avatarGroupClassNames.overflowButton,\n sizeStyles[size],\n overflowButtonStyles.base,\n ...overflowButtonClasses,\n layout !== 'pie' && overflowButtonStyles.states,\n layout !== 'pie' && overflowButtonStyles.focusIndicator,\n layout === 'pie' && overflowButtonStyles.pie,\n groupChildClassName,\n state.overflowButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useGroupChildClassName } from '../../AvatarGroupItem';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n overflowContent: 'fui-AvatarGroup__overflowContent',\n overflowButton: 'fui-AvatarGroup__overflowButton',\n overflowSurface: 'fui-AvatarGroup__overflowSurface',\n};\n\n/*\n Styles for the root slot.\n /\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n overflowSurface: {\n ...shorthands.padding(0),\n },\n overflowContent: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/\n Styles for overflow button slot.\n /\nconst useOverflowButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // match color to Avatar's outline color\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n // These styles match the default button styles\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: tokens.colorStrokeFocus2,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n }),\n\n // This custom focus indicator is required for the pie layout due to the clip-path applied to the root\n pieFocusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\n\n states: {\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/\n Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const { layout, overflowIndicator, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const overflowButtonStyles = useOverflowButtonStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && styles.pie,\n layout === 'pie' && sizeStyles[size],\n state.root.className,\n );\n\n if (state.overflowContent) {\n state.overflowContent.className = mergeClasses(\n avatarGroupClassNames.overflowContent,\n styles.overflowContent,\n state.overflowContent.className,\n );\n }\n\n if (state.overflowSurface) {\n state.overflowSurface.className = mergeClasses(\n avatarGroupClassNames.overflowSurface,\n styles.overflowSurface,\n state.overflowSurface.className,\n );\n }\n\n const overflowButtonClasses = [];\n\n if (size < 36) {\n overflowButtonClasses.push(overflowButtonStyles.borderThin);\n } else if (size < 56) {\n overflowButtonClasses.push(overflowButtonStyles.borderThick);\n } else if (size < 72) {\n overflowButtonClasses.push(overflowButtonStyles.borderThicker);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.borderThickest);\n }\n\n if (overflowIndicator === 'count') {\n if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.caption2Strong);\n } else if (size <= 28) {\n overflowButtonClasses.push(overflowButtonStyles.caption1Strong);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.body1Strong);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle2);\n } else if (size <= 96) {\n overflowButtonClasses.push(overflowButtonStyles.subtitle1);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n overflowButtonClasses.push(overflowButtonStyles.icon12);\n } else if (size <= 24) {\n overflowButtonClasses.push(overflowButtonStyles.icon16);\n } else if (size <= 40) {\n overflowButtonClasses.push(overflowButtonStyles.icon20);\n } else if (size <= 48) {\n overflowButtonClasses.push(overflowButtonStyles.icon24);\n } else if (size <= 56) {\n overflowButtonClasses.push(overflowButtonStyles.icon28);\n } else if (size <= 72) {\n overflowButtonClasses.push(overflowButtonStyles.icon32);\n } else {\n overflowButtonClasses.push(overflowButtonStyles.icon48);\n }\n }\n\n if (state.overflowButton) {\n state.overflowButton.className = mergeClasses(\n avatarGroupClassNames.overflowButton,\n sizeStyles[size],\n overflowButtonStyles.base,\n ...overflowButtonClasses,\n layout !== 'pie' && overflowButtonStyles.states,\n layout !== 'pie' && overflowButtonStyles.focusIndicator,\n layout === 'pie' && overflowButtonStyles.pieFocusIndicator,\n layout === 'pie' && overflowButtonStyles.pie,\n groupChildClassName,\n state.overflowButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,20 +28,20 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.10",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
     "@fluentui/scripts": "^1.0.0",
     "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.0.1",
-    "@fluentui/react-context-selector": "^9.0.0",
-    "@fluentui/react-icons": "^2.0.172-rc.8",
-    "@fluentui/react-popover": "^9.0.1",
+    "@fluentui/react-badge": "^9.0.2",
+    "@fluentui/react-context-selector": "^9.0.1",
+    "@fluentui/react-icons": "^2.0.175",
+    "@fluentui/react-popover": "^9.0.2",
     "@fluentui/react-shared-contexts": "^9.0.0",
-    "@fluentui/react-tabster": "^9.0.1",
+    "@fluentui/react-tabster": "^9.0.2",
     "@fluentui/react-theme": "^9.0.0",
-    "@fluentui/react-tooltip": "^9.0.1",
-    "@fluentui/react-utilities": "^9.0.0",
+    "@fluentui/react-tooltip": "^9.0.2",
+    "@fluentui/react-utilities": "^9.0.1-0",
     "@griffel/react": "^1.2.0",
     "tslib": "^2.1.0"
   },