@fluentui/react-avatar 9.0.0-alpha.83 → 9.0.0-alpha.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.0.0-alpha.83",
+  "version": "9.0.0-alpha.84",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,11 +25,11 @@
     "storybook": "start-storybook"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-alpha.51",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.52",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.44",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.45",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.13",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.14",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -44,11 +44,11 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-badge": "9.0.0-alpha.83",
-    "@fluentui/react-icons": "^1.1.136",
-    "@fluentui/react-make-styles": "9.0.0-alpha.69",
+    "@fluentui/react-badge": "9.0.0-alpha.84",
+    "@fluentui/react-icons": "^1.1.140",
+    "@fluentui/react-make-styles": "9.0.0-alpha.70",
     "@fluentui/react-theme": "9.0.0-alpha.23",
-    "@fluentui/react-utilities": "9.0.0-alpha.49",
+    "@fluentui/react-utilities": "9.0.0-alpha.50",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib-amd/Avatar.d.ts

@@ -1 +0,0 @@
-export * from './components/Avatar/index';

package/lib-amd/Avatar.js

@@ -1,6 +0,0 @@
-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

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

package/lib-amd/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import type { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib-amd/common/isConformant.js

@@ -1,16 +0,0 @@
-define(["require", "exports", "@fluentui/react-conformance", "@fluentui/react-conformance-make-styles"], function (require, exports, react_conformance_1, react_conformance_make_styles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.isConformant = void 0;
-    function isConformant(testInfo) {
-        var defaultOptions = {
-            asPropHandlesRef: true,
-            componentPath: module.parent.filename.replace('.test', ''),
-            disabledTests: ['has-docblock'],
-            extraTests: react_conformance_make_styles_1.default,
-        };
-        react_conformance_1.isConformant(defaultOptions, testInfo);
-    }
-    exports.isConformant = isConformant;
-});
-//# sourceMappingURL=isConformant.js.map

package/lib-amd/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,aAAa,EAAE,CAAC,cAAc,CAAC;YAC/B,UAAU,EAAE,uCAAqC;SAClD,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAXD,oCAWC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    disabledTests: ['has-docblock'],\n    extraTests: makeStylesTests as TestObject<TProps>,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}

package/lib-amd/components/Avatar/Avatar.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-export declare const Avatar: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.HTMLAttributes<HTMLElement> & {
-    image?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.ImgHTMLAttributes<HTMLImageElement>>;
-    label?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    badge?: number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | "available" | "away" | "busy" | "doNotDisturb" | "offline" | "outOfOffice" | import("@fluentui/react-utilities").ObjectShorthandPropsCompat<import("@fluentui/react-badge").PresenceBadgeProps> | null | undefined;
-    name?: string | undefined;
-    getInitials?: ((name: string, isRtl: boolean) => string) | undefined;
-    size?: 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128 | undefined;
-    square?: boolean | undefined;
-    active?: "unset" | "active" | "inactive" | undefined;
-    activeDisplay?: "ring" | "ring-shadow" | "ring-glow" | "shadow" | "glow" | undefined;
-    color?: "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" | "neutral" | "brand" | "colorful" | undefined;
-    idForColor?: string | undefined;
-} & React.RefAttributes<HTMLElement>>;

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

@@ -1,12 +0,0 @@
-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(props, ref);
-        useAvatarStyles_1.useAvatarStyles(state);
-        return renderAvatar_1.renderAvatar(state);
-    });
-    exports.Avatar.displayName = 'Avatar';
-});
-//# sourceMappingURL=Avatar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;IAMa,QAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAkB,EAAE,GAA2B;QACrF,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEpC,iCAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderAvatar } from './renderAvatar';\nimport { useAvatar } from './useAvatar';\nimport { useAvatarStyles } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\n\nexport const Avatar = React.forwardRef((props: AvatarProps, ref: React.Ref<HTMLElement>) => {\n  const state = useAvatar(props, ref);\n\n  useAvatarStyles(state);\n\n  return renderAvatar(state);\n});\n\nAvatar.displayName = 'Avatar';\n"]}

package/lib-amd/components/Avatar/Avatar.types.d.ts

@@ -1,109 +0,0 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
-import type { PresenceBadgeProps, PresenceBadgeStatus } from '@fluentui/react-badge';
-export declare type AvatarProps = ComponentPropsCompat & React.HTMLAttributes<HTMLElement> & {
-    /**
-     * The Avatar's image.
-     */
-    image?: ShorthandPropsCompat<React.ImgHTMLAttributes<HTMLImageElement>>;
-    /**
-     * The label shown when there's no image. Defaults to the initials derived from `name` using `getInitials`.
-     */
-    label?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Icon to be displayed when the avatar doesn't have an image or name (or if getInitials returns an empty string).
-     *
-     * @defaultvalue `Person20Regular` (the default icon's size depends on the Avatar's size)
-     */
-    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Badge to show the avatar's presence status.
-     * Can either be a string indicating the status ("busy", "away", etc.), or a PresenceBadgeProps object.
-     */
-    badge?: PresenceBadgeStatus | Exclude<ShorthandPropsCompat<PresenceBadgeProps>, string>;
-    /**
-     * The name used for displaying the initials of the avatar if the image is not provided
-     */
-    name?: string;
-    /**
-     * Custom method for generating the initials from the name property, which is shown if no image is provided.
-     */
-    getInitials?: (name: string, isRtl: boolean) => string;
-    /**
-     * Size of the avatar in pixels.
-     *
-     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`).
-     *
-     * 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?: AvatarSizeValue;
-    /**
-     * The avatar can have a square shape.
-     */
-    square?: boolean;
-    /**
-     * Optional activity indicator
-     * * active: the avatar will be decorated according to activeDisplay
-     * * inactive: the avatar will be reduced in size and partially transparent
-     * * unset: normal display
-     *
-     * @defaultvalue unset
-     */
-    active?: 'active' | 'inactive' | 'unset';
-    /**
-     * The type of visual treatment to use when `active="active"`
-     *
-     * @defaultvalue ring
-     */
-    activeDisplay?: 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
-    /**
-     * 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;
-};
-/**
- * Sizes for the Avatar
- *
- * This is a restricted list based on design guidelines for the Avatar control.
- */
-export declare type AvatarSizeValue = 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
-/**
- * A specific named color for the Avatar
- */
-export declare type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
-/**
- * Names of the shorthand properties in AvatarProps
- */
-export declare type AvatarShorthandPropsCompat = 'label' | 'image' | 'badge' | 'icon';
-/**
- * Names of AvatarProps that have a default value in useAvatar
- */
-export declare type AvatarDefaultedProps = 'size' | 'color' | 'activeDisplay' | 'getInitials' | 'label' | 'icon';
-export declare type AvatarState = ComponentStateCompat<AvatarProps, AvatarShorthandPropsCompat, AvatarDefaultedProps> & {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-    /**
-     * True if the avatar has no label/initials and should render an icon
-     */
-    showIcon?: boolean;
-};

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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type { PresenceBadgeProps, PresenceBadgeStatus } from '@fluentui/react-badge';\n\nexport type AvatarProps = ComponentPropsCompat &\n  React.HTMLAttributes<HTMLElement> & {\n    /**\n     * The Avatar's image.\n     */\n    image?: ShorthandPropsCompat<React.ImgHTMLAttributes<HTMLImageElement>>;\n\n    /**\n     * The label shown when there's no image. Defaults to the initials derived from `name` using `getInitials`.\n     */\n    label?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    /**\n     * Icon to be displayed when the avatar doesn't have an image or name (or if getInitials returns an empty string).\n     *\n     * @defaultvalue `Person20Regular` (the default icon's size depends on the Avatar's size)\n     */\n    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n    /**\n     * Badge to show the avatar's presence status.\n     * Can either be a string indicating the status (\"busy\", \"away\", etc.), or a PresenceBadgeProps object.\n     */\n    badge?: PresenceBadgeStatus | Exclude<ShorthandPropsCompat<PresenceBadgeProps>, string>;\n\n    /**\n     * The name used for displaying the initials of the avatar if the image is not provided\n     */\n    name?: string;\n\n    /**\n     * Custom method for generating the initials from the name property, which is shown if no image is provided.\n     */\n    getInitials?: (name: string, isRtl: boolean) => string;\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`).\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     * @defaultvalue 32\n     */\n    size?: AvatarSizeValue;\n\n    /**\n     * The avatar can have a square shape.\n     */\n    square?: boolean;\n\n    /**\n     * Optional activity indicator\n     * * active: the avatar will be decorated according to activeDisplay\n     * * inactive: the avatar will be reduced in size and partially transparent\n     * * unset: normal display\n     *\n     * @defaultvalue unset\n     */\n    active?: 'active' | 'inactive' | 'unset';\n\n    /**\n     * The type of visual treatment to use when `active=\"active\"`\n     *\n     * @defaultvalue ring\n     */\n    activeDisplay?: 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';\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\n     * (or idForColor if provided)\n     * * [AvatarNamedColor]: a specific color from the theme\n     *\n     * @defaultvalue 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;\n  };\n\n/**\n * Sizes for the Avatar\n *\n * This is a restricted list based on design guidelines for the Avatar control.\n */\nexport type AvatarSizeValue = 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'darkRed'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'darkGreen'\n  | 'lightTeal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royalBlue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Names of the shorthand properties in AvatarProps\n */\nexport type AvatarShorthandPropsCompat = 'label' | 'image' | 'badge' | 'icon';\n\n/**\n * Names of AvatarProps that have a default value in useAvatar\n */\nexport type AvatarDefaultedProps = 'size' | 'color' | 'activeDisplay' | 'getInitials' | 'label' | 'icon';\n\nexport type AvatarState = ComponentStateCompat<AvatarProps, AvatarShorthandPropsCompat, AvatarDefaultedProps> & {\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n\n  /**\n   * True if the avatar has no label/initials and should render an icon\n   */\n  showIcon?: boolean;\n};\n"]}

package/lib-amd/components/Avatar/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Avatar.types';
-export * from './Avatar';
-export * from './renderAvatar';
-export * from './useAvatar';
-export * from './useAvatarStyles';

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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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.d.ts

@@ -1,2 +0,0 @@
-import type { AvatarState } from './Avatar.types';
-export declare const renderAvatar: (state: AvatarState) => JSX.Element;

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderAvatar.js","sourceRoot":"../src/","sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;IAKO,IAAM,YAAY,GAAG,UAAC,KAAkB;QACvC,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,sCAA0B,CAAC,EAAtE,KAAK,WAAA,EAAE,SAAS,eAAsD,CAAC;QAC/E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnC,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YACrD,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACpC,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CACzB,CACd,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,YAAY,gBAUvB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { avatarShorthandPropsCompat } from './useAvatar';\nimport type { AvatarState } from './Avatar.types';\n\nexport const renderAvatar = (state: AvatarState) => {\n  const { slots, slotProps } = getSlotsCompat(state, avatarShorthandPropsCompat);\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.label {...slotProps.label} />\n      {state.showIcon && <slots.icon {...slotProps.icon} />}\n      <slots.image {...slotProps.image} />\n      <slots.badge {...slotProps.badge} />\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Avatar/useAvatar.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import type { AvatarProps, AvatarState, AvatarShorthandPropsCompat } from './Avatar.types';
-/**
- * Names of the shorthand properties in AvatarProps
- */
-export declare const avatarShorthandPropsCompat: AvatarShorthandPropsCompat[];
-export declare const useAvatar: (props: AvatarProps, ref: React.Ref<HTMLElement>, defaultProps?: AvatarProps | undefined) => AvatarState;

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

@@ -1,141 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../utils/index", "@fluentui/react-icons", "@fluentui/react-badge"], function (require, exports, tslib_1, React, react_utilities_1, index_1, react_icons_1, react_badge_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useAvatar = exports.avatarShorthandPropsCompat = void 0;
-    /**
-     * Names of the shorthand properties in AvatarProps
-     */
-    exports.avatarShorthandPropsCompat = ['label', 'image', 'badge', 'icon'];
-    var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.avatarShorthandPropsCompat });
-    var useAvatar = function (props, ref, defaultProps) {
-        var state = mergeProps({
-            as: 'span',
-            label: { as: 'span' },
-            icon: { as: 'span' },
-            size: 32,
-            color: 'neutral',
-            activeDisplay: 'ring',
-            getInitials: index_1.getInitials,
-            ref: ref,
-        }, defaultProps && resolveAvatarShorthandPropsCompat(defaultProps), resolveAvatarShorthandPropsCompat(props));
-        var size = state.size, badge = state.badge, label = state.label, icon = state.icon;
-        // If a label was not provided, use the initials and fall back to the icon if initials aren't available
-        if (!label.children) {
-            var initials = state.getInitials(state.name || '', /*isRtl: */ false);
-            if (initials) {
-                label.children = initials;
-            }
-            else {
-                state.showIcon = true;
-                if (!icon.children) {
-                    if (size <= 24) {
-                        icon.children = React.createElement(react_icons_1.Person16Regular, null);
-                    }
-                    else if (size <= 40) {
-                        icon.children = React.createElement(react_icons_1.Person20Regular, null);
-                    }
-                    else if (size <= 48) {
-                        icon.children = React.createElement(react_icons_1.Person24Regular, null);
-                    }
-                    else if (size <= 56) {
-                        icon.children = React.createElement(react_icons_1.Person28Regular, null);
-                    }
-                    else if (size <= 72) {
-                        icon.children = React.createElement(react_icons_1.Person32Regular, null);
-                    }
-                    else {
-                        icon.children = React.createElement(react_icons_1.Person48Regular, null);
-                    }
-                }
-            }
-        }
-        // Provide a default badge size based on the avatar size
-        if (badge && badge.size === undefined) {
-            if (size >= 96) {
-                badge.size = 'larger';
-            }
-            else if (size >= 64) {
-                badge.size = 'large';
-            }
-            else if (size >= 56) {
-                badge.size = 'medium';
-            }
-            else if (size >= 40) {
-                badge.size = 'small';
-            }
-            else if (size >= 28) {
-                badge.size = 'smaller';
-            }
-            else {
-                badge.size = 'smallest';
-            }
-        }
-        if (state.color === 'colorful') {
-            var value = state.idForColor || state.name;
-            if (value) {
-                state.color = avatarColors[getHashCode(value) % avatarColors.length];
-            }
-        }
-        return state;
-    };
-    exports.useAvatar = useAvatar;
-    /**
-     * Avatar treats shorthand for the image and badge props differently. Rather than the string being
-     * the child of those slots, they translate to the image's src and the badge's status prop.
-     */
-    var resolveAvatarShorthandPropsCompat = function (props) {
-        var image = props.image, badge = props.badge;
-        if (typeof image === 'string') {
-            image = { as: 'img', src: image, children: null };
-        }
-        if (typeof badge === 'string') {
-            badge = { as: react_badge_1.PresenceBadge, status: badge };
-        }
-        if (image !== props.image || badge !== props.badge) {
-            props = tslib_1.__assign(tslib_1.__assign({}, props), { image: image, badge: badge });
-        }
-        return react_utilities_1.resolveShorthandProps(props, exports.avatarShorthandPropsCompat);
-    };
-    var avatarColors = [
-        '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',
-    ];
-    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

@@ -1 +0,0 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"../src/","sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport {\n  Person16Regular,\n  Person20Regular,\n  Person24Regular,\n  Person28Regular,\n  Person32Regular,\n  Person48Regular,\n} from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { AvatarProps, AvatarState, AvatarNamedColor, AvatarShorthandPropsCompat } from './Avatar.types';\n\n/**\n * Names of the shorthand properties in AvatarProps\n */\nexport const avatarShorthandPropsCompat: AvatarShorthandPropsCompat[] = ['label', 'image', 'badge', 'icon'];\n\nconst mergeProps = makeMergeProps<AvatarState>({ deepMerge: avatarShorthandPropsCompat });\n\nexport const useAvatar = (props: AvatarProps, ref: React.Ref<HTMLElement>, defaultProps?: AvatarProps): AvatarState => {\n  const state = mergeProps(\n    {\n      as: 'span',\n      label: { as: 'span' },\n      icon: { as: 'span' },\n      size: 32,\n      color: 'neutral',\n      activeDisplay: 'ring',\n      getInitials,\n      ref,\n    },\n    defaultProps && resolveAvatarShorthandPropsCompat(defaultProps),\n    resolveAvatarShorthandPropsCompat(props),\n  );\n\n  const { size, badge, label, icon } = state;\n\n  // If a label was not provided, use the initials and fall back to the icon if initials aren't available\n  if (!label.children) {\n    const initials = state.getInitials(state.name || '', /*isRtl: */ false);\n    if (initials) {\n      label.children = initials;\n    } else {\n      state.showIcon = true;\n      if (!icon.children) {\n        if (size <= 24) {\n          icon.children = <Person16Regular />;\n        } else if (size <= 40) {\n          icon.children = <Person20Regular />;\n        } else if (size <= 48) {\n          icon.children = <Person24Regular />;\n        } else if (size <= 56) {\n          icon.children = <Person28Regular />;\n        } else if (size <= 72) {\n          icon.children = <Person32Regular />;\n        } else {\n          icon.children = <Person48Regular />;\n        }\n      }\n    }\n  }\n\n  // Provide a default badge size based on the avatar size\n  if (badge && badge.size === undefined) {\n    if (size >= 96) {\n      badge.size = 'larger';\n    } else if (size >= 64) {\n      badge.size = 'large';\n    } else if (size >= 56) {\n      badge.size = 'medium';\n    } else if (size >= 40) {\n      badge.size = 'small';\n    } else if (size >= 28) {\n      badge.size = 'smaller';\n    } else {\n      badge.size = 'smallest';\n    }\n  }\n\n  if (state.color === 'colorful') {\n    const value = state.idForColor || state.name;\n    if (value) {\n      state.color = avatarColors[getHashCode(value) % avatarColors.length];\n    }\n  }\n\n  return state;\n};\n\n/**\n * Avatar treats shorthand for the image and badge props differently. Rather than the string being\n * the child of those slots, they translate to the image's src and the badge's status prop.\n */\nconst resolveAvatarShorthandPropsCompat = (props: AvatarProps) => {\n  let { image, badge } = props;\n\n  if (typeof image === 'string') {\n    image = { as: 'img', src: image, children: null };\n  }\n\n  if (typeof badge === 'string') {\n    badge = { as: PresenceBadge, status: badge };\n  }\n\n  if (image !== props.image || badge !== props.badge) {\n    props = { ...props, image, badge };\n  }\n\n  return resolveShorthandProps(props, avatarShorthandPropsCompat);\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'darkRed',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'darkGreen',\n  'lightTeal',\n  'teal',\n  'steel',\n  'blue',\n  'royalBlue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\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"]}

package/lib-amd/components/Avatar/useAvatarStyles.d.ts

@@ -1,2 +0,0 @@
-import type { AvatarState } from './Avatar.types';
-export declare const useAvatarStyles: (state: AvatarState) => AvatarState;