@fluentui-react-native/experimental-avatar 0.13.0 → 0.13.4

package/lib-commonjs/JSAvatar.styling.js

@@ -0,0 +1,125 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var JSAvatar_types_1 = require("./JSAvatar.types");
+var framework_1 = require("@fluentui-react-native/framework");
+var JSAvatarTokens_1 = require("./JSAvatarTokens");
+var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
+var tokens_1 = require("@fluentui-react-native/tokens");
+var nameMap = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+};
+exports.avatarStates = ['circular', 'square'];
+exports.stylingSettings = {
+    tokens: [JSAvatarTokens_1.defaultJSAvatarTokens, JSAvatar_types_1.JSAvatarName],
+    states: exports.avatarStates,
+    slotProps: {
+        root: framework_1.buildProps(function (tokens) {
+            var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
+            var horizontalIconAlignment = tokens.horizontalIconAlignment, verticalIconAlignment = tokens.verticalIconAlignment;
+            return {
+                style: {
+                    flexDirection: 'row',
+                    width: physicalSize,
+                    height: physicalSize,
+                    justifyContent: nameMap[horizontalIconAlignment || 'end'],
+                    alignItems: nameMap[verticalIconAlignment || 'end'],
+                    horizontalIconAlignment: horizontalIconAlignment,
+                    verticalIconAlignment: verticalIconAlignment,
+                },
+            };
+        }, ['horizontalIconAlignment', 'verticalIconAlignment']),
+        initials: framework_1.buildProps(function (tokens) {
+            var initialsSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).initialsSize;
+            return {
+                style: {
+                    fontSize: initialsSize,
+                },
+            };
+        }, ['initialsSize']),
+        initialsBackground: framework_1.buildProps(function (tokens, theme) {
+            var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
+            var backgroundColor = tokens.backgroundColor, coinColorFluent = tokens.coinColorFluent;
+            var effectiveBackgroundColor = backgroundColor;
+            if (coinColorFluent) {
+                effectiveBackgroundColor = JSAvatar_helpers_1.convertCoinColorFluent(coinColorFluent);
+            }
+            return {
+                style: __assign(__assign({}, tokens_1.borderStyles.from(tokens, theme)), { width: physicalSize, height: physicalSize, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: effectiveBackgroundColor }),
+            };
+        }, __spreadArrays(['coinColorFluent', 'backgroundColor', 'physicalSize'], tokens_1.borderStyles.keys)),
+        photo: framework_1.buildProps(function (tokens) {
+            var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
+            return {
+                style: {
+                    borderRadius: tokens.borderRadius,
+                    width: physicalSize,
+                    height: physicalSize,
+                },
+            };
+        }, ['physicalSize', 'borderRadius']),
+        icon: framework_1.buildProps(function (tokens, theme) {
+            var _a = JSAvatar_helpers_1.calculateEffectiveSizes(tokens), iconSize = _a.iconSize, iconStrokeWidth = _a.iconStrokeWidth;
+            var iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
+            var iconStrokeColor = tokens.iconStrokeColor || theme.colors.background;
+            return {
+                style: {
+                    position: 'absolute',
+                    width: iconSizeAdjusted,
+                    height: iconSizeAdjusted,
+                    bottom: -iconStrokeWidth,
+                    end: -iconStrokeWidth,
+                    borderRadius: iconSizeAdjusted / 2,
+                    borderWidth: iconStrokeWidth,
+                    borderColor: iconStrokeColor,
+                },
+            };
+        }, ['iconSize', 'iconStrokeWidth', 'iconStrokeColor']),
+        ring: framework_1.buildProps(function (tokens, theme) {
+            var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
+            var ring = tokens.ring;
+            if (!ring)
+                return {};
+            var innerGap = ring.innerGap != undefined ? JSAvatar_helpers_1.getRingThickness(ring.innerGap) : JSAvatar_helpers_1.getRingThickness(ring.ringThickness || 'xxlarge');
+            var effectiveRingThickness = 2 * JSAvatar_helpers_1.getRingThickness(ring.ringThickness || 'xxlarge') + innerGap;
+            var effectiveSize = physicalSize + 2 * effectiveRingThickness;
+            var ringColor = ring.ringBackgroundColor || theme.colors.personaActivityRing;
+            return {
+                style: __assign({ borderStyle: 'solid', borderColor: ringColor, borderWidth: effectiveRingThickness, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, tokens_1.borderStyles.from(tokens, theme)),
+            };
+        }, __spreadArrays(['physicalSize', 'ring', 'physicalSize'], tokens_1.borderStyles.keys)),
+        glow: framework_1.buildProps(function (tokens, theme) {
+            var physicalSize = JSAvatar_helpers_1.calculateEffectiveSizes(tokens).physicalSize;
+            var ring = tokens.ring;
+            if (!ring)
+                return {};
+            var innerGap = ring.innerGap != undefined ? JSAvatar_helpers_1.getRingThickness(ring.innerGap) : JSAvatar_helpers_1.getRingThickness(ring.ringThickness || 'xxlarge');
+            var effectiveRingThickness = JSAvatar_helpers_1.getRingThickness(ring.ringThickness || 'xxlarge') + innerGap;
+            var effectiveSize = physicalSize + 2 * effectiveRingThickness;
+            var glowColor = ring.accent ? theme.colors.accentButtonBackground : ring.ringColor || theme.colors.personaActivityGlow;
+            return {
+                style: __assign({ borderStyle: 'solid', borderColor: glowColor, borderWidth: effectiveRingThickness - innerGap, width: effectiveSize, height: effectiveSize, position: 'absolute', top: -effectiveRingThickness, left: -effectiveRingThickness }, tokens_1.borderStyles.from(tokens, theme)),
+            };
+        }, __spreadArrays(['physicalSize', 'ring'], tokens_1.borderStyles.keys)),
+    },
+};
+//# sourceMappingURL=JSAvatar.styling.js.map

package/lib-commonjs/JSAvatar.styling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}

package/{lib/Avatar.types.d.ts → lib-commonjs/JSAvatar.types.d.ts}

@@ -1,8 +1,11 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native';
-import { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens';
-export declare const avatarName = "Avatar";
+import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
+export declare const JSAvatarName = "Avatar";
 export declare type AvatarSize = 'size8' | 'size24' | 'size32' | 'size40' | 'size48' | 'size56' | 'size72' | 'size100' | 'size120';
+export declare type AvatarShape = 'circular' | 'square';
+export declare type AvatarActive = 'active' | 'inactive' | 'unset';
+export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
 /**
  * Sets color of the avatar when there is no picture. Uses fluent color names
  */
@@ -22,12 +25,15 @@ export interface AvatarConfigurableProps {
     ring?: RingConfig;
     coinColorFluent?: AvatarColor;
 }
-export interface AvatarProps extends IViewProps, AvatarConfigurableProps {
+export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+    active?: AvatarActive;
+    activeAppearance?: AvatarActiveAppearance;
     imageUrl?: string;
     imageDescription?: string;
     initials?: string;
     presence?: AvatarPresence;
     isOutOfOffice?: boolean;
+    shape?: AvatarShape;
 }
 export interface AvatarSlotProps {
     root: ViewProps;
@@ -39,7 +45,7 @@ export interface AvatarSlotProps {
     glow: ViewProps;
 }
 export declare type IconAlignment = 'start' | 'center' | 'end';
-export interface AvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps {
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
     avatarSize?: number;
     iconSize?: number;
     iconStrokeWidth?: number;
@@ -48,21 +54,23 @@ export interface AvatarTokens extends IBackgroundColorTokens, IForegroundColorTo
     horizontalIconAlignment?: IconAlignment;
     verticalIconAlignment?: IconAlignment;
     physicalSize?: number;
+    circular?: JSAvatarTokens;
+    square?: JSAvatarTokens;
 }
-export interface AvatarState {
+export interface JSAvatarState {
     personaPhotoSource: ImageURISource | undefined;
     iconSource: ImageURISource | undefined;
     showRing: boolean;
     transparentRing: boolean;
 }
 export interface AvatarInfo {
-    props: AvatarProps;
-    state: AvatarState;
+    props: JSAvatarProps;
+    state: JSAvatarState;
 }
-export interface AvatarType {
-    props: AvatarProps;
+export interface JSAvatarType {
+    props: JSAvatarProps;
     slotProps: AvatarSlotProps;
-    tokens: AvatarTokens;
-    state: AvatarState;
+    tokens: JSAvatarTokens;
+    state: JSAvatarState;
 }
-//# sourceMappingURL=Avatar.types.d.ts.map
+//# sourceMappingURL=JSAvatar.types.d.ts.map

package/lib-commonjs/JSAvatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.types.d.ts","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/{Avatar.types.js → JSAvatar.types.js}

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.avatarName = 'Avatar';
-//# sourceMappingURL=Avatar.types.js.map
+exports.JSAvatarName = 'Avatar';
+//# sourceMappingURL=JSAvatar.types.js.map

package/lib-commonjs/JSAvatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatar.types.js","sourceRoot":"","sources":["../src/JSAvatar.types.ts"],"names":[],"mappings":";;AAIa,QAAA,YAAY,GAAG,QAAQ,CAAC"}

package/lib-commonjs/JSAvatarTokens.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { JSAvatarTokens } from '.';
+export declare const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme>;
+//# sourceMappingURL=JSAvatarTokens.d.ts.map

package/lib-commonjs/JSAvatarTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatarTokens.d.ts","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAInC,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,cAAc,EAAE,KAAK,CAajD,CAAC"}

package/lib-commonjs/JSAvatarTokens.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
+var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+exports.defaultJSAvatarTokens = function () {
+    return ({
+        horizontalIconAlignment: 'end',
+        verticalIconAlignment: 'end',
+        color: 'white',
+        iconStrokeColor: 'white',
+        backgroundColor: JSAvatar_helpers_1.convertCoinColorFluent('cornflower'),
+        circular: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
+        },
+        square: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.medium,
+        },
+    });
+};
+//# sourceMappingURL=JSAvatarTokens.js.map

package/lib-commonjs/JSAvatarTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;AAGA,uDAA4D;AAC5D,oEAAmE;AAEtD,QAAA,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,yCAAsB,CAAC,YAAY,CAAC;QACrD,QAAQ,EAAE;YACR,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;KACiB,CAAA;AAZpB,CAYoB,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Avatar';
-export * from './Avatar.types';
+export * from './JSAvatar';
+export * from './JSAvatar.types';
 //# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/lib-commonjs/index.js

@@ -4,5 +4,6 @@ function __export(m) {
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 __export(require("./Avatar"));
-__export(require("./Avatar.types"));
+__export(require("./JSAvatar"));
+__export(require("./JSAvatar.types"));
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,8BAAyB;AACzB,oCAA+B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,8BAAyB;AACzB,gCAA2B;AAC3B,sCAAiC"}

package/lib-commonjs/useAvatar.d.ts

@@ -1,4 +1,4 @@
-import { AvatarProps, AvatarInfo } from './Avatar.types';
+import { JSAvatarProps, AvatarInfo } from './JSAvatar.types';
 /**
  * Re-usable hook for FURN Avatar.
  * This hook configures Avatar props and state for FURN Avatar.
@@ -6,5 +6,5 @@ import { AvatarProps, AvatarInfo } from './Avatar.types';
  * @param props user props sent to FURN Avatar
  * @returns configured props and state for FURN Avatar
  */
-export declare const useAvatar: (props: AvatarProps) => AvatarInfo;
+export declare const useAvatar: (props: JSAvatarProps) => AvatarInfo;
 //# sourceMappingURL=useAvatar.d.ts.map

package/lib-commonjs/useAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGtE;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,oCA+BrB,CAAC"}
+{"version":3,"file":"useAvatar.d.ts","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAG5E;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,sCAgCrB,CAAC"}

package/lib-commonjs/useAvatar.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var Avatar_helpers_1 = require("./Avatar.helpers");
+var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
 /**
  * Re-usable hook for FURN Avatar.
  * This hook configures Avatar props and state for FURN Avatar.
@@ -31,13 +31,13 @@ var Avatar_helpers_1 = require("./Avatar.helpers");
  * @returns configured props and state for FURN Avatar
  */
 exports.useAvatar = function (props) {
-    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring"]);
+    var imageUrl = props.imageUrl, imageDescription = props.imageDescription, initials = props.initials, presence = props.presence, isOutOfOffice = props.isOutOfOffice, ring = props.ring, shape = props.shape, rest = __rest(props, ["imageUrl", "imageDescription", "initials", "presence", "isOutOfOffice", "ring", "shape"]);
     var personaPhotoSource = imageUrl === undefined
         ? undefined
         : {
             uri: imageUrl,
         };
-    var iconSource = presence === undefined ? undefined : Avatar_helpers_1.getPresenceIconSource(presence, isOutOfOffice || false);
+    var iconSource = presence === undefined ? undefined : JSAvatar_helpers_1.getPresenceIconSource(presence, isOutOfOffice || false);
     var showRing = !!ring;
     var transparentRing = !!(ring === null || ring === void 0 ? void 0 : ring.transparent);
     var state = {
@@ -47,7 +47,7 @@ exports.useAvatar = function (props) {
         transparentRing: transparentRing,
     };
     return {
-        props: __assign({ children: initials, accessibilityLabel: imageDescription }, rest),
+        props: __assign({ children: initials, accessibilityLabel: imageDescription, shape: shape || 'circular' }, rest),
         state: __assign({}, state),
     };
 };

package/lib-commonjs/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,mDAAyD;AAEzD;;;;;;GAMG;AACU,QAAA,SAAS,GAAG,UAAC,KAAkB;IAClC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,uGAAO,CAAW;IAE/F,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,sCAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAgB;QACzB,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,IACjC,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../src/useAvatar.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA,uDAA2D;AAE3D;;;;;;GAMG;AACU,QAAA,SAAS,GAAG,UAAC,KAAoB;IACpC,IAAA,yBAAQ,EAAE,yCAAgB,EAAE,yBAAQ,EAAE,yBAAQ,EAAE,mCAAa,EAAE,iBAAI,EAAE,mBAAK,EAAE,gHAAO,CAAW;IAEtG,IAAM,kBAAkB,GACtB,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,EAAE,QAAQ;SACd,CAAC;IAER,IAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,wCAAqB,CAAC,QAAQ,EAAE,aAAa,IAAI,KAAK,CAAC,CAAC;IAChH,IAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;IACxB,IAAM,eAAe,GAAG,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,CAAC;IAE5C,IAAM,KAAK,GAAkB;QAC3B,UAAU,YAAA;QACV,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;QACR,eAAe,iBAAA;KAChB,CAAC;IAEF,OAAO;QACL,KAAK,aACH,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,gBAAgB,EACpC,KAAK,EAAE,KAAK,IAAI,UAAU,IACvB,IAAI,CACR;QACD,KAAK,eACA,KAAK,CACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.13.0",
+  "version": "0.13.4",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -20,11 +20,11 @@
     "prettier-fix": "fluentui-scripts prettier --fix true"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "^0.8.0",
+    "@fluentui-react-native/adapters": "^0.8.1",
     "@fluentui-react-native/component-cache": "^1.3.0",
-    "@fluentui-react-native/framework": "0.7.0",
-    "@fluentui-react-native/theme-tokens": "^0.10.0",
-    "@fluentui-react-native/tokens": "^0.11.0",
+    "@fluentui-react-native/framework": "0.7.3",
+    "@fluentui-react-native/theme-tokens": "^0.11.1",
+    "@fluentui-react-native/tokens": "^0.11.1",
     "@fluentui-react-native/use-styling": "^0.8.0"
   },
   "devDependencies": {

package/src/Avatar.tsx

@@ -1,44 +1,134 @@
 /** @jsx withSlots */
-import { Image, View, Text } from 'react-native';
-import { AvatarProps, AvatarType, avatarName } from './Avatar.types';
-import { stylingSettings } from './Avatar.styling';
-import { compose, UseSlots, mergeProps, withSlots } from '@fluentui-react-native/framework';
-import { useAvatar } from './useAvatar';
+import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { ImageURISource, NativeModules, ViewProps, ColorValue } from 'react-native';
+import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
+
+const avatarName = 'Avatar';
+
+const NativeAvatarView = ensureNativeComponent('FRNAvatarView');
+
+export type Size = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
+
+export type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
+
+export type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
+
+interface ExportedConstants {
+  sizes: { [key in Size]: number };
+}
+
+const ExportedNativeConstants: ExportedConstants = NativeModules.FRNAvatarViewManager;
+
+export type AvatarTokens = {
+  /**
+   * Supported Avatar sizes
+   */
+  size?: Size;
+
+  /**
+   * Supported Avatar styles
+   */
+  avatarStyle?: AvatarStyle;
+};
+
+export type AvatarProps = AvatarTokens & {
+  /**
+   * The image to be displayed
+   */
+  imageSource?: ImageURISource;
+
+  /**
+   * The primary text to create initials with (e.g. a name)
+   */
+  primaryText?: string;
+
+  /**
+   * The secondary text to create initials with if primary text is not provided (e.g. an email address)
+   */
+  secondaryText?: string;
+
+  /**
+   * A custom color for the ring around the Avatar
+   */
+  ringColor?: ColorValue;
+
+  /**
+   * A custom color for the avatar initials when no image is shown
+   */
+  foregroundColor?: ColorValue;
+
+  /**
+   * A custom color for the avatar background when no image is shown
+   */
+  backgroundColor?: ColorValue;
+
+  /**
+   * The avatar view's presence state.
+   */
+  presence?: Presence;
+
+  /**
+   * A boolean inidicating whether the ring is visible
+   */
+  isRingVisible?: boolean;
+
+  /**
+   * A boolean indicating whether the Inner Ring Gap is transparent
+   */
+  isTransparent?: boolean;
+
+  /**
+   * A boolean indicating out of office status
+   */
+  isOutOfOffice?: boolean;
+
+  /**
+   * A boolean indicating whether the gap between the avatar and ring is visible.
+   */
+  hasRingInnerGap?: boolean;
+
+  /**
+   * An image to be shown as the backdrop of the ring, rather then a solid color.
+   * Takes precendence over `ringColor`
+   */
+  customBorderImageSource?: ImageURISource;
+};
+
+const tokensThatAreAlsoProps: (keyof AvatarTokens)[] = ['size', 'avatarStyle'];
+
+export type NativeAvatarViewProps = ViewProps & AvatarProps;
+interface AvatarType {
+  props: AvatarProps;
+  slotProps: { root: NativeAvatarViewProps };
+  tokens: AvatarTokens;
+}
 
 export const Avatar = compose<AvatarType>({
   displayName: avatarName,
-  ...stylingSettings,
-  slots: {
-    root: View,
-    photo: Image,
-    initials: Text,
-    initialsBackground: View,
-    icon: Image,
-    ring: View,
-    glow: View,
+  tokens: [
+    {
+      size: 'small',
+      avatarStyle: 'default',
+    },
+    avatarName,
+  ],
+  tokensThatAreAlsoProps,
+  slots: { root: NativeAvatarView },
+  slotProps: {
+    root: buildProps<NativeAvatarViewProps, AvatarTokens>(
+      (tokens) => ({
+        size: tokens.size,
+        style: {
+          height: ExportedNativeConstants.sizes[tokens.size],
+          width: ExportedNativeConstants.sizes[tokens.size],
+        },
+      }),
+      ['size'],
+    ),
   },
-  render: (userProps: AvatarProps, useSlots: UseSlots<AvatarType>) => {
-    const Avatar = useAvatar(userProps);
-    const Slots = useSlots(userProps, (layer) => Avatar.state[layer] || userProps[layer]);
-
-    return (final: AvatarProps) => {
-      const { children, accessibilityLabel, ...mergedProps } = mergeProps(Avatar.props, final);
-      const { personaPhotoSource, iconSource, showRing, transparentRing } = Avatar.state;
-
-      return (
-        <Slots.root {...mergedProps}>
-          {personaPhotoSource ? (
-            <Slots.photo accessibilityLabel={accessibilityLabel} source={personaPhotoSource} />
-          ) : (
-            <Slots.initialsBackground>
-              <Slots.initials>{children}</Slots.initials>
-            </Slots.initialsBackground>
-          )}
-          {showRing && !transparentRing && <Slots.ring />}
-          {showRing && <Slots.glow />}
-          {!!iconSource && !!iconSource.uri && <Slots.icon source={iconSource} />}
-        </Slots.root>
-      );
-    };
+  render: (props: AvatarProps, useSlots: UseSlots<AvatarType>) => {
+    const Root = useSlots(props).root;
+
+    return (rest: AvatarProps) => <Root {...mergeProps(props, rest)} />;
   },
 });

package/src/{Avatar.helpers.ts → JSAvatar.helpers.ts}

@@ -1,4 +1,4 @@
-import { AvatarSize, AvatarColor, AvatarPresence, AvatarTokens, RingThickness } from './Avatar.types';
+import { AvatarSize, AvatarColor, AvatarPresence, JSAvatarTokens, RingThickness } from './JSAvatar.types';
 import { ImageURISource } from 'react-native';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 
@@ -84,7 +84,7 @@ export function convertCoinColorFluent(coinColor: AvatarColor): string {
   return colorTableFluent[coinColor];
 }
 
-export function calculateEffectiveSizes(tokens: AvatarTokens): AvatarSizeConfig {
+export function calculateEffectiveSizes(tokens: JSAvatarTokens): AvatarSizeConfig {
   const { size, avatarSize, iconSize, iconStrokeWidth, initialsSize } = tokens;
 
   if (size) {