@fluentui/react-avatar 9.2.6 → 9.2.7

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:39 GMT",
+      "date": "Thu, 17 Nov 2022 23:02:31 GMT",
+      "tag": "@fluentui/react-avatar_v9.2.7",
+      "version": "9.2.7",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.13",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.3.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.1",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.1.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:52 GMT",
       "tag": "@fluentui/react-avatar_v9.2.6",
       "version": "9.2.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Fri, 11 Nov 2022 14:53:39 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Nov 2022 23:02:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.7)
+
+Thu, 17 Nov 2022 23:02:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.6..@fluentui/react-avatar_v9.2.7)
+
+### Patches
+
+- Bump @fluentui/react-badge to v9.0.13 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-popover to v9.3.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-tooltip to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
 ## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.6)
 
-Fri, 11 Nov 2022 14:53:39 GMT 
+Fri, 11 Nov 2022 14:57:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.5..@fluentui/react-avatar_v9.2.6)
 
 ### Patches

package/dist/index.d.ts

@@ -19,9 +19,17 @@ export declare const Avatar: ForwardRefComponent<AvatarProps>;
 
 export declare const avatarClassNames: SlotClassNames<AvatarSlots>;
 
-/* Excluded from this release type: AvatarContextProvider */
+/**
+ * @internal
+ */
+export declare const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
 
-/* Excluded from this release type: AvatarContextValue */
+/**
+ * @internal
+ */
+export declare interface AvatarContextValue {
+    size?: AvatarSizes;
+}
 
 /**
  * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
@@ -280,7 +288,27 @@ export declare type AvatarState = ComponentState<AvatarSlots> & Required<Pick<Av
     activeAriaLabelElement?: JSX.Element;
 };
 
-/* Excluded from this release type: getInitials */
+/**
+ * Regular expressions matching characters to ignore when calculating the initials.
+ */
+/**
+ * Get (up to 2 characters) initials based on display name of the persona.
+ *
+ * @param displayName - The full name of the person or entity
+ * @param isRtl - Whether the display is in RTL
+ * @param options - Extra options to control the behavior of getInitials
+ *
+ * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
+ * could be derived from the name.
+ *
+ * @internal
+ */
+export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, options?: {
+    /** Should initials be generated from phone numbers (default false) */
+    allowPhoneInitials?: boolean;
+    /** Returns only the first initial */
+    firstInitialOnly?: boolean;
+}): string;
 
 export declare type PartitionAvatarGroupItems<T> = {
     inlineItems: readonly T[];
@@ -321,7 +349,10 @@ export declare const renderAvatarGroupPopover_unstable: (state: AvatarGroupPopov
 
 export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
-/* Excluded from this release type: useAvatarContext */
+/**
+ * @internal
+ */
+export declare const useAvatarContext: () => AvatarContextValue;
 
 /**
  * Create the state required to render AvatarGroup.

package/lib-amd/Avatar.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Avatar/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Avatar.js.map

package/lib-amd/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-avatar/src/Avatar.ts"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Avatar/index';\n"]}

package/lib-amd/AvatarGroup.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/AvatarGroup/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=AvatarGroup.js.map

package/lib-amd/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-avatar/src/AvatarGroup.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/AvatarGroup/index';\n"]}

package/lib-amd/AvatarGroupItem.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/AvatarGroupItem/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=AvatarGroupItem.js.map

package/lib-amd/AvatarGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupItem.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-avatar/src/AvatarGroupItem.ts"],"names":[],"mappings":";;;IAAA,uCAAmD","sourcesContent":["export * from './components/AvatarGroupItem/index';\n"]}

package/lib-amd/AvatarGroupPopover.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/AvatarGroupPopover/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=AvatarGroupPopover.js.map

package/lib-amd/AvatarGroupPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupPopover.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-avatar/src/AvatarGroupPopover.ts"],"names":[],"mappings":";;;IAAA,uCAAsD","sourcesContent":["export * from './components/AvatarGroupPopover/index';\n"]}

package/lib-amd/components/Avatar/Avatar.js

@@ -0,0 +1,12 @@
+define(["require", "exports", "react", "./renderAvatar", "./useAvatar", "./useAvatarStyles"], function (require, exports, React, renderAvatar_1, useAvatar_1, useAvatarStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Avatar = void 0;
+    exports.Avatar = React.forwardRef(function (props, ref) {
+        var state = useAvatar_1.useAvatar_unstable(props, ref);
+        useAvatarStyles_1.useAvatarStyles_unstable(state);
+        return renderAvatar_1.renderAvatar_unstable(state);
+    });
+    exports.Avatar.displayName = 'Avatar';
+});
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;IAOa,QAAA,MAAM,GAAqC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClF,IAAM,KAAK,GAAG,8BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE7C,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,oCAAqB,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"]}

package/lib-amd/components/Avatar/Avatar.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Avatar.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n */\nexport type AvatarSizes = 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 will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\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"]}

package/lib-amd/components/Avatar/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Avatar.types", "./Avatar", "./renderAvatar", "./useAvatar", "./useAvatarStyles"], function (require, exports, tslib_1, Avatar_types_1, Avatar_1, renderAvatar_1, useAvatar_1, useAvatarStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Avatar_types_1, exports);
+    tslib_1.__exportStar(Avatar_1, exports);
+    tslib_1.__exportStar(renderAvatar_1, exports);
+    tslib_1.__exportStar(useAvatar_1, exports);
+    tslib_1.__exportStar(useAvatarStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/index.ts"],"names":[],"mappings":";;;IAAA,8CAA+B;IAC/B,wCAAyB;IACzB,8CAA+B;IAC/B,2CAA4B;IAC5B,iDAAkC","sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles';\n"]}

package/lib-amd/components/Avatar/renderAvatar.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderAvatar_unstable = void 0;
+    var renderAvatar_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.initials && React.createElement(slots.initials, tslib_1.__assign({}, slotProps.initials)),
+            slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
+            slots.image && React.createElement(slots.image, tslib_1.__assign({}, slotProps.image)),
+            slots.badge && React.createElement(slots.badge, tslib_1.__assign({}, slotProps.badge)),
+            state.activeAriaLabelElement));
+    };
+    exports.renderAvatar_unstable = renderAvatar_unstable;
+});
+//# sourceMappingURL=renderAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderAvatar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;IAIO,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAE1D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI;YAC5D,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAChD,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnD,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnD,KAAK,CAAC,sBAAsB,CAClB,CACd,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,qBAAqB,yBAYhC","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"]}

package/lib-amd/components/Avatar/useAvatar.js

@@ -0,0 +1,175 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../utils/index", "@fluentui/react-icons", "@fluentui/react-badge", "@fluentui/react-shared-contexts", "../../contexts/AvatarContext"], function (require, exports, tslib_1, React, react_utilities_1, index_1, react_icons_1, react_badge_1, react_shared_contexts_1, AvatarContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatar_unstable = exports.DEFAULT_STRINGS = void 0;
+    exports.DEFAULT_STRINGS = {
+        active: 'active',
+        inactive: 'inactive',
+    };
+    var useAvatar_unstable = function (props, ref) {
+        var _a;
+        var dir = react_shared_contexts_1.useFluent_unstable().dir;
+        var contextSize = AvatarContext_1.useAvatarContext().size;
+        var name = props.name, _b = props.size, size = _b === void 0 ? contextSize !== null && contextSize !== void 0 ? contextSize : 32 : _b, _c = props.shape, shape = _c === void 0 ? 'circular' : _c, _d = props.active, active = _d === void 0 ? 'unset' : _d, _e = props.activeAppearance, activeAppearance = _e === void 0 ? 'ring' : _e, idForColor = props.idForColor;
+        var _f = props.color, color = _f === void 0 ? 'neutral' : _f;
+        // Resolve 'colorful' to a specific color name
+        if (color === 'colorful') {
+            color = avatarColors[getHashCode((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % avatarColors.length];
+        }
+        var baseId = react_utilities_1.useId('avatar-');
+        var root = react_utilities_1.getNativeElementProps('span', tslib_1.__assign(tslib_1.__assign({ role: 'img', id: baseId }, props), { ref: ref }), 
+        /* excludedPropNames: */ ['name']);
+        // Resolve the initials slot, defaulted to getInitials.
+        var initials = react_utilities_1.resolveShorthand(props.initials, {
+            required: true,
+            defaultProps: {
+                children: index_1.getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),
+                id: baseId + '__initials',
+            },
+        });
+        // Render the icon slot *only if* there aren't any initials to display.
+        var icon = undefined;
+        if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
+            initials = undefined;
+            icon = react_utilities_1.resolveShorthand(props.icon, {
+                required: true,
+                defaultProps: {
+                    children: React.createElement(react_icons_1.PersonRegular, null),
+                    'aria-hidden': true,
+                },
+            });
+        }
+        var _g = React.useState(undefined), imageHidden = _g[0], setImageHidden = _g[1];
+        var image = react_utilities_1.resolveShorthand(props.image, {
+            defaultProps: {
+                alt: '',
+                role: 'presentation',
+                'aria-hidden': true,
+                hidden: imageHidden,
+            },
+        });
+        // Hide the image if it fails to load and restore it on a successful load
+        if (image) {
+            image.onError = react_utilities_1.mergeCallbacks(image.onError, function () { return setImageHidden(true); });
+            image.onLoad = react_utilities_1.mergeCallbacks(image.onLoad, function () { return setImageHidden(undefined); });
+        }
+        var badge = react_utilities_1.resolveShorthand(props.badge, {
+            defaultProps: {
+                size: getBadgeSize(size),
+                id: baseId + '__badge',
+            },
+        });
+        var activeAriaLabelElement;
+        // Resolve aria-label and/or aria-labelledby if not provided by the user
+        if (!root['aria-label'] && !root['aria-labelledby']) {
+            if (name) {
+                root['aria-label'] = name;
+                // Include the badge in labelledby if it exists
+                if (badge) {
+                    root['aria-labelledby'] = root.id + ' ' + badge.id;
+                }
+            }
+            else if (initials) {
+                // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+                root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
+            }
+            // Add the active state to the aria label
+            if (active === 'active' || active === 'inactive') {
+                var activeText = exports.DEFAULT_STRINGS[active];
+                if (root['aria-labelledby']) {
+                    // If using aria-labelledby, render a hidden span and append it to the labelledby
+                    var activeId = baseId + '__active';
+                    root['aria-labelledby'] += ' ' + activeId;
+                    activeAriaLabelElement = (React.createElement("span", { hidden: true, id: activeId }, activeText));
+                }
+                else if (root['aria-label']) {
+                    // Otherwise, just append it to the aria-label
+                    root['aria-label'] += ' ' + activeText;
+                }
+            }
+        }
+        return {
+            size: size,
+            shape: shape,
+            active: active,
+            activeAppearance: activeAppearance,
+            activeAriaLabelElement: activeAriaLabelElement,
+            color: color,
+            components: {
+                root: 'span',
+                initials: 'span',
+                icon: 'span',
+                image: 'img',
+                badge: react_badge_1.PresenceBadge,
+            },
+            root: root,
+            initials: initials,
+            icon: icon,
+            image: image,
+            badge: badge,
+        };
+    };
+    exports.useAvatar_unstable = useAvatar_unstable;
+    var getBadgeSize = function (size) {
+        if (size >= 96) {
+            return 'extra-large';
+        }
+        else if (size >= 64) {
+            return 'large';
+        }
+        else if (size >= 56) {
+            return 'medium';
+        }
+        else if (size >= 40) {
+            return 'small';
+        }
+        else if (size >= 28) {
+            return 'extra-small';
+        }
+        else {
+            return 'tiny';
+        }
+    };
+    var avatarColors = [
+        'dark-red',
+        'cranberry',
+        'red',
+        'pumpkin',
+        'peach',
+        'marigold',
+        'gold',
+        'brass',
+        'brown',
+        'forest',
+        'seafoam',
+        'dark-green',
+        'light-teal',
+        'teal',
+        'steel',
+        'blue',
+        'royal-blue',
+        'cornflower',
+        'navy',
+        'lavender',
+        'purple',
+        'grape',
+        'lilac',
+        'pink',
+        'magenta',
+        'plum',
+        'beige',
+        'mink',
+        'platinum',
+        'anchor',
+    ];
+    var getHashCode = function (str) {
+        var hashCode = 0;
+        for (var len = str.length - 1; len >= 0; len--) {
+            var ch = str.charCodeAt(len);
+            var shift = len % 8;
+            hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise
+        }
+        return hashCode;
+    };
+});
+//# sourceMappingURL=useAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","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  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  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"]}