@fluentui/react-avatar 9.4.9 → 9.5.0

package/CHANGELOG.json

@@ -2,7 +2,167 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Mon, 17 Apr 2023 17:49:56 GMT",
+      "date": "Fri, 12 May 2023 20:22:42 GMT",
+      "tag": "@fluentui/react-avatar_v9.5.0",
+      "version": "9.5.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "ee977e20d359922798949a4f18af7a036ca36ca3",
+            "comment": "Update to use single hook selector"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "871192b67e1bc8a68da1b4c55b4e0ee2aed0b604",
+            "comment": "chore: move makeStyles() calls to .styles.ts files"
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "eb1387fb3f564a01f56c788c4ae139e59100fc16",
+            "comment": "fix: Make AvatarGroup's content direction column."
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "81b87f41557964f9c9f5601a3eec84434eb74f35",
+            "comment": "fix: update createCustomFocusIndicator usage to specify outline: none"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "c28decb23d191a0daaaf6d5d1832429715102129",
+            "comment": "chore: exclude .swcrc from being published"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "c7424d14422bb8b1f5282f7c64ec6cc9de3640be",
+            "comment": "fix: Make border around badge transparent, not a solid color"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
+            "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
+          }
+        ],
+        "minor": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "6d0848597a7c07883a93b13f67f6727fd791f3dd",
+            "comment": "feat: add `shape` to AvatarContext"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.1.11",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.19",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.5.11",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.4.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.7.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-theme to v9.1.8",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.2.11",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.8.1",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 24 Apr 2023 08:12:31 GMT",
+      "tag": "@fluentui/react-avatar_v9.4.10",
+      "version": "9.4.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "d340ff4b1c3aa7e1818780ec4d41f46c86e451c9",
+            "comment": "chore: adopt custom JSX pragma"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.1.10",
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.5.10",
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.2.10",
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Apr 2023 17:53:45 GMT",
       "tag": "@fluentui/react-avatar_v9.4.9",
       "version": "9.4.9",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,53 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Mon, 17 Apr 2023 17:49:56 GMT and should not be manually modified.
+This log was last generated on Fri, 12 May 2023 20:22:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.5.0)
+
+Fri, 12 May 2023 20:22:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.4.10..@fluentui/react-avatar_v9.5.0)
+
+### Minor changes
+
+- feat: add `shape` to AvatarContext ([PR #27738](https://github.com/microsoft/fluentui/pull/27738) by yuanboxue@microsoft.com)
+- Bump @fluentui/react-badge to v9.1.11 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.19 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-popover to v9.5.11 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.4.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-tabster to v9.7.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-theme to v9.1.8 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-tooltip to v9.2.11 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+
+### Patches
+
+- Update to use single hook selector ([PR #27491](https://github.com/microsoft/fluentui/pull/27491) by gcox@microsoft.com)
+- chore: move makeStyles() calls to .styles.ts files ([PR #27710](https://github.com/microsoft/fluentui/pull/27710) by olfedias@microsoft.com)
+- fix: Make AvatarGroup's content direction column. ([PR #27743](https://github.com/microsoft/fluentui/pull/27743) by esteban.230@hotmail.com)
+- fix: update createCustomFocusIndicator usage to specify outline: none ([PR #26089](https://github.com/microsoft/fluentui/pull/26089) by sarah.higley@microsoft.com)
+- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
+- fix: Make border around badge transparent, not a solid color ([PR #27527](https://github.com/microsoft/fluentui/pull/27527) by behowell@microsoft.com)
+
+## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.4.10)
+
+Mon, 24 Apr 2023 08:12:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.4.9..@fluentui/react-avatar_v9.4.10)
+
+### Patches
+
+- chore: adopt custom JSX pragma ([PR #27602](https://github.com/microsoft/fluentui/pull/27602) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-badge to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
+- Bump @fluentui/react-popover to v9.5.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
+- Bump @fluentui/react-tooltip to v9.2.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
+
 ## [9.4.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.4.9)
 
-Mon, 17 Apr 2023 17:49:56 GMT 
+Mon, 17 Apr 2023 17:53:45 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.4.8..@fluentui/react-avatar_v9.4.9)
 
 ### Patches

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export declare const AvatarContextProvider: React_2.Provider<AvatarContextValue
  * @internal
  */
 export declare interface AvatarContextValue {
+    shape?: AvatarShape;
     size?: AvatarSize;
 }
 
@@ -220,7 +221,7 @@ export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
      * The avatar can have a circular or square shape.
      * @default circular
      */
-    shape?: 'circular' | 'square';
+    shape?: AvatarShape;
     /**
      * Size of the avatar in pixels.
      *
@@ -240,6 +241,11 @@ export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
     size?: AvatarSize;
 };
 
+/**
+ * Shape of the avatar
+ */
+export declare type AvatarShape = 'circular' | 'square';
+
 /**
  * Sizes for the avatar
  */

package/lib/components/Avatar/Avatar.js

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import { renderAvatar_unstable } from './renderAvatar';
 import { useAvatar_unstable } from './useAvatar';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
-import { useAvatarStyles_unstable } from './useAvatarStyles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useAvatarStyles_unstable } from './useAvatarStyles.styles';
 export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAvatar_unstable(props, ref);
   useAvatarStyles_unstable(state);
-  const {
-    useAvatarStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);
   return renderAvatar_unstable(state);
 });
 Avatar.displayName = 'Avatar';

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderAvatar_unstable","useAvatar_unstable","useCustomStyleHooks_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  const { useAvatarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,wBAAwB,QAAQ;AAIzC,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQP,kBAAA,CAAmBK,KAAA,EAAOC,GAAA;EAExCJ,wBAAA,CAAyBK,KAAA;EAEzB,MAAM;IAAEL,wBAAA,EAA0BM;EAAe,CAAE,GAAGP,4BAAA;EACtDO,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,qBAAA,CAAsBQ,KAAA;AAC/B;AAEAJ,MAAA,CAAOM,WAAW,GAAG"}
+{"version":3,"names":["React","renderAvatar_unstable","useAvatar_unstable","useCustomStyleHook_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarStyles_unstable } from './useAvatarStyles.styles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,wBAAwB,QAAQ;AAIzC,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQP,kBAAA,CAAmBK,KAAA,EAAOC,GAAA;EAExCJ,wBAAA,CAAyBK,KAAA;EAEzBN,2BAAA,CAA4B,4BAA4BM,KAAA;EAExD,OAAOR,qBAAA,CAAsBQ,KAAA;AAC/B;AAEAJ,MAAA,CAAOK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSX.Element;\n  };\n"],"mappings":"AAAA"}
+{"version":3,"names":[],"sources":["../../../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSX.Element;\n  };\n"],"mappings":"AAAA"}

package/lib/components/Avatar/index.js

@@ -2,5 +2,5 @@ export * from './Avatar.types';
 export * from './Avatar';
 export * from './renderAvatar';
 export * from './useAvatar';
-export * from './useAvatarStyles';
+export * from './useAvatarStyles.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Avatar/index.ts"],"sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/Avatar/index.ts"],"sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Avatar/renderAvatar.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 export const renderAvatar_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.initials && /*#__PURE__*/React.createElement(slots.initials, slotProps.initials), slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), slots.image && /*#__PURE__*/React.createElement(slots.image, slotProps.image), slots.badge && /*#__PURE__*/React.createElement(slots.badge, slotProps.badge), state.activeAriaLabelElement);
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.initials && /*#__PURE__*/createElement(slots.initials, slotProps.initials), slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), slots.image && /*#__PURE__*/createElement(slots.image, slotProps.image), slots.badge && /*#__PURE__*/createElement(slots.badge, slotProps.badge), state.activeAriaLabelElement);
 };
 //# sourceMappingURL=renderAvatar.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderAvatar_unstable","state","slots","slotProps","createElement","root","initials","icon","image","badge","activeAriaLabelElement"],"sources":["../../../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n      {state.activeAriaLabelElement}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAsBE,KAAA;EAEnD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,QAAQ,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,QAAQ,EAAKH,SAAA,CAAUG,QAAQ,GACxDJ,KAAA,CAAMK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,GAC5CL,KAAA,CAAMM,KAAK,iBAAIV,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,KAAK,EAAKL,SAAA,CAAUK,KAAK,GAC/CN,KAAA,CAAMO,KAAK,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMO,KAAK,EAAKN,SAAA,CAAUM,KAAK,GAC/CR,KAAA,CAAMS,sBAAsB;AAGnC"}
+{"version":3,"names":["createElement","getSlotsNext","renderAvatar_unstable","state","slots","slotProps","root","initials","icon","image","badge","activeAriaLabelElement"],"sources":["../../../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlotsNext<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n      {state.activeAriaLabelElement}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA0BE,KAAA;EAEvD,oBACEH,aAXJ,CAWKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,QAAQ,iBAAIP,aAZzB,CAY0BI,KAAA,CAAMG,QAAQ,EAAKF,SAAA,CAAUE,QAAQ,GACxDH,KAAA,CAAMI,IAAI,iBAAIR,aAbrB,CAasBI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,GAC5CJ,KAAA,CAAMK,KAAK,iBAAIT,aAdtB,CAcuBI,KAAA,CAAMK,KAAK,EAAKJ,SAAA,CAAUI,KAAK,GAC/CL,KAAA,CAAMM,KAAK,iBAAIV,aAftB,CAeuBI,KAAA,CAAMM,KAAK,EAAKL,SAAA,CAAUK,KAAK,GAC/CP,KAAA,CAAMQ,sBAAsB;AAGnC"}

package/lib/components/Avatar/useAvatar.js

@@ -14,12 +14,13 @@ export const useAvatar_unstable = (props, ref) => {
     dir
   } = useFluent();
   const {
+    shape: contextShape,
     size: contextSize
   } = useAvatarContext();
   const {
     name,
     size = contextSize !== null && contextSize !== void 0 ? contextSize : 32,
-    shape = 'circular',
+    shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular',
     active = 'unset',
     activeAppearance = 'ring',
     idForColor

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","size","contextSize","name","shape","activeAppearance","idForColor","color","_ref","avatarColors","getHashCode","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","firstInitialOnly","icon","createElement","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","str","hashCode","len","ch","charCodeAt","shift"],"sources":["../../../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAC/E,SAASC,WAAW,QAAQ;AAE5B,SAASC,aAAa,QAAQ;AAC9B,SAASC,aAAa,QAAQ;AAC9B,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,gBAAgB,QAAQ;AAEjC,OAAO,MAAMC,eAAA,GAAkB;EAC7BC,MAAA,EAAQ;EACRC,QAAA,EAAU;AACZ;AAEA,OAAO,MAAMC,kBAAA,GAAqBA,CAACC,KAAA,EAAoBC,GAAA,KAA6C;EAClG,MAAM;IAAEC;EAAG,CAAE,GAAGR,SAAA;EAChB,MAAM;IAAES,IAAA,EAAMC;EAAW,CAAE,GAAGT,gBAAA;EAC9B,MAAM;IACJU,IAAA;IACAF,IAAA,GAAOC,WAAA,aAAAA,WAAA,cAAAA,WAAA,GAAgB,EAAY;IACnCE,KAAA,GAAQ;IACRT,MAAA,GAAS;IACTU,gBAAA,GAAmB;IACnBC;EAAU,CACX,GAAGR,KAAA;EACJ,IAAI;IAAES,KAAA,GAAQ;EAAS,CAAE,GAAGT,KAAA;EAE5B;EACA,IAAIS,KAAA,KAAU,YAAY;QACSC,IAAA;IAAjCD,KAAA,GAAQE,YAAY,CAACC,WAAA,CAAY,CAAAF,IAAA,GAAAF,UAAA,aAAAA,UAAA,cAAAA,UAAA,GAAcH,IAAI,cAAlBK,IAAA,cAAAA,IAAA,GAAsB,EAAE,IAAIC,YAAA,CAAaE,MAAM,CAAC;EACnF;EAEA,MAAMC,MAAA,GAASzB,KAAA,CAAM;EAErB,MAAM0B,IAAA,GAA4B7B,qBAAA,CAChC,QACA;IACE8B,IAAA,EAAM;IACNC,EAAA,EAAIH,MAAA;IACJ;IACA,GAAGd,KAAK;IACRC;EACF,GACA,wBAAyB,CAAC,OAAO;EAGnC,MAAM,CAACiB,WAAA,EAAaC,cAAA,CAAe,GAAGlC,KAAA,CAAMmC,QAAQ,CAAmBC,SAAA;EACvE,MAAMC,KAAA,GAA8BlC,gBAAA,CAAiBY,KAAA,CAAMsB,KAAK,EAAE;IAChEC,YAAA,EAAc;MACZC,GAAA,EAAK;MACLR,IAAA,EAAM;MACN,eAAe,IAAI;MACnBS,MAAA,EAAQP;IACV;EACF;EAEA;EACA,IAAII,KAAA,EAAO;IACTA,KAAA,CAAMI,OAAO,GAAGvC,cAAA,CAAemC,KAAA,CAAMI,OAAO,EAAE,MAAMP,cAAA,CAAe,IAAI;IACvEG,KAAA,CAAMK,MAAM,GAAGxC,cAAA,CAAemC,KAAA,CAAMK,MAAM,EAAE,MAAMR,cAAA,CAAeE,SAAA;EACnE;EAEA;EACA,IAAIO,QAAA,GAAoCxC,gBAAA,CAAiBY,KAAA,CAAM4B,QAAQ,EAAE;IACvEC,QAAA,EAAU,IAAI;IACdN,YAAA,EAAc;MACZO,QAAA,EAAUxC,WAAA,CAAYe,IAAA,EAAMH,GAAA,KAAQ,OAAO;QAAE6B,gBAAA,EAAkB5B,IAAA,IAAQ;MAAG;MAC1Ec,EAAA,EAAIH,MAAA,GAAS;IACf;EACF;EAEA;EACA,IAAI,EAACc,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAUE,QAAQ,CAAD,EAAG;IACvBF,QAAA,GAAWP,SAAA;EACb;EAEA;EACA,IAAIW,IAAA,GAA4BX,SAAA;EAChC,IAAI,CAACO,QAAA,KAAa,CAACN,KAAA,IAASJ,WAAU,GAAI;IACxCc,IAAA,GAAO5C,gBAAA,CAAiBY,KAAA,CAAMgC,IAAI,EAAE;MAClCH,QAAA,EAAU,IAAI;MACdN,YAAA,EAAc;QACZO,QAAA,eAAU7C,KAAA,CAAAgD,aAAA,CAAC1C,aAAA;QACX,eAAe;MACjB;IACF;EACF;EAEA,MAAM2C,KAAA,GAA8B9C,gBAAA,CAAiBY,KAAA,CAAMkC,KAAK,EAAE;IAChEX,YAAA,EAAc;MACZpB,IAAA,EAAMgC,YAAA,CAAahC,IAAA;MACnBc,EAAA,EAAIH,MAAA,GAAS;IACf;EACF;EAEA,IAAIsB,sBAAA;EAEJ;EACA,IAAI,CAACrB,IAAI,CAAC,aAAa,IAAI,CAACA,IAAI,CAAC,kBAAkB,EAAE;IACnD,IAAIV,IAAA,EAAM;MACRU,IAAI,CAAC,aAAa,GAAGV,IAAA;MAErB;MACA,IAAI6B,KAAA,EAAO;QACTnB,IAAI,CAAC,kBAAkB,GAAGA,IAAA,CAAKE,EAAE,GAAG,MAAMiB,KAAA,CAAMjB,EAAE;MACpD;IACF,OAAO,IAAIW,QAAA,EAAU;MACnB;MACAb,IAAI,CAAC,kBAAkB,GAAGa,QAAA,CAASX,EAAE,IAAIiB,KAAA,GAAQ,MAAMA,KAAA,CAAMjB,EAAE,GAAG,EAAE,CAAD;IACrE;IAEA;IACA,IAAIpB,MAAA,KAAW,YAAYA,MAAA,KAAW,YAAY;MAChD,MAAMwC,UAAA,GAAazC,eAAe,CAACC,MAAA,CAAO;MAC1C,IAAIkB,IAAI,CAAC,kBAAkB,EAAE;QAC3B;QACA,MAAMuB,QAAA,GAAWxB,MAAA,GAAS;QAC1BC,IAAI,CAAC,kBAAkB,IAAI,MAAMuB,QAAA;QACjCF,sBAAA,gBACEnD,KAAA,CAAAgD,aAAA,CAAC;UAAKR,MAAA,MAAM;UAACR,EAAA,EAAIqB;WACdD,UAAA;MAGP,OAAO,IAAItB,IAAI,CAAC,aAAa,EAAE;QAC7B;QACAA,IAAI,CAAC,aAAa,IAAI,MAAMsB,UAAA;MAC9B;IACF;EACF;EAEA,OAAO;IACLlC,IAAA;IACAG,KAAA;IACAT,MAAA;IACAU,gBAAA;IACA6B,sBAAA;IACA3B,KAAA;IAEA8B,UAAA,EAAY;MACVxB,IAAA,EAAM;MACNa,QAAA,EAAU;MACVI,IAAA,EAAM;MACNV,KAAA,EAAO;MACPY,KAAA,EAAO1C;IACT;IAEAuB,IAAA;IACAa,QAAA;IACAI,IAAA;IACAV,KAAA;IACAY;EACF;AACF;AAEA,MAAMC,YAAA,GAAgBhC,IAAA,IAA8B;EAClD,IAAIA,IAAA,IAAQ,IAAI;IACd,OAAO;EACT,OAAO,IAAIA,IAAA,IAAQ,IAAI;IACrB,OAAO;EACT,OAAO,IAAIA,IAAA,IAAQ,IAAI;IACrB,OAAO;EACT,OAAO,IAAIA,IAAA,IAAQ,IAAI;IACrB,OAAO;EACT,OAAO,IAAIA,IAAA,IAAQ,IAAI;IACrB,OAAO;EACT,OAAO;IACL,OAAO;EACT;AACF;AAEA,MAAMQ,YAAA,GAAmC,CACvC,YACA,aACA,OACA,WACA,SACA,YACA,QACA,SACA,SACA,UACA,WACA,cACA,cACA,QACA,SACA,QACA,cACA,cACA,QACA,YACA,UACA,SACA,SACA,QACA,WACA,QACA,SACA,QACA,YACA,SACD;AAED,MAAMC,WAAA,GAAe4B,GAAA,IAAwB;EAC3C,IAAIC,QAAA,GAAW;EACf,KAAK,IAAIC,GAAA,GAAcF,GAAA,CAAI3B,MAAM,GAAG,GAAG6B,GAAA,IAAO,GAAGA,GAAA,IAAO;IACtD,MAAMC,EAAA,GAAKH,GAAA,CAAII,UAAU,CAACF,GAAA;IAC1B,MAAMG,KAAA,GAAQH,GAAA,GAAM;IACpBD,QAAA,IAAY,CAACE,EAAA,IAAME,KAAI,KAAMF,EAAA,IAAO,IAAIE,KAAK,GAAI;EACnD;;EAEA,OAAOJ,QAAA;AACT"}
+{"version":3,"names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","name","activeAppearance","idForColor","color","_ref","avatarColors","getHashCode","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","firstInitialOnly","icon","createElement","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","str","hashCode","len","ch","charCodeAt","shift"],"sources":["../../../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"mappings":"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"}