@fluentui-react-native/experimental-avatar 0.22.0 → 0.22.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/lib/AvatarNativeComponent.d.ts +10 -2
  3. package/lib/AvatarNativeComponent.d.ts.map +1 -1
  4. package/lib/AvatarNativeComponent.js +3 -3
  5. package/lib/AvatarNativeComponent.js.map +1 -1
  6. package/lib/NativeAvatar.d.ts +61 -66
  7. package/lib/NativeAvatar.js +24 -27
  8. package/lib/index.d.ts +1 -1
  9. package/lib/index.js +1 -1
  10. package/lib-commonjs/AvatarNativeComponent.d.ts +10 -2
  11. package/lib-commonjs/AvatarNativeComponent.d.ts.map +1 -1
  12. package/lib-commonjs/AvatarNativeComponent.js +8 -5
  13. package/lib-commonjs/AvatarNativeComponent.js.map +1 -1
  14. package/lib-commonjs/NativeAvatar.d.ts +61 -66
  15. package/lib-commonjs/NativeAvatar.js +33 -39
  16. package/lib-commonjs/index.d.ts +1 -1
  17. package/lib-commonjs/index.js +6 -16
  18. package/package.json +22 -21
  19. package/src/AvatarNativeComponent.ts +14 -3
  20. package/eslint.config.js +0 -3
  21. package/lib/AvatarNative.types.d.ts +0 -11
  22. package/lib/AvatarNative.types.d.ts.map +0 -1
  23. package/lib/AvatarNative.types.js +0 -2
  24. package/lib/AvatarNative.types.js.map +0 -1
  25. package/lib/AvatarNativeComponent.ios.d.ts +0 -1
  26. package/lib/AvatarNativeComponent.ios.d.ts.map +0 -1
  27. package/lib/AvatarNativeComponent.ios.js +0 -2
  28. package/lib/AvatarNativeComponent.ios.js.map +0 -1
  29. package/lib/AvatarNativeComponent.macos.d.ts +0 -5
  30. package/lib/AvatarNativeComponent.macos.d.ts.map +0 -1
  31. package/lib/AvatarNativeComponent.macos.js +0 -3
  32. package/lib/AvatarNativeComponent.macos.js.map +0 -1
  33. package/lib-commonjs/AvatarNative.types.d.ts +0 -11
  34. package/lib-commonjs/AvatarNative.types.d.ts.map +0 -1
  35. package/lib-commonjs/AvatarNative.types.js +0 -3
  36. package/lib-commonjs/AvatarNative.types.js.map +0 -1
  37. package/lib-commonjs/AvatarNativeComponent.ios.d.ts +0 -2
  38. package/lib-commonjs/AvatarNativeComponent.ios.d.ts.map +0 -1
  39. package/lib-commonjs/AvatarNativeComponent.ios.js +0 -3
  40. package/lib-commonjs/AvatarNativeComponent.ios.js.map +0 -1
  41. package/lib-commonjs/AvatarNativeComponent.macos.d.ts +0 -5
  42. package/lib-commonjs/AvatarNativeComponent.macos.d.ts.map +0 -1
  43. package/lib-commonjs/AvatarNativeComponent.macos.js +0 -10
  44. package/lib-commonjs/AvatarNativeComponent.macos.js.map +0 -1
  45. package/src/AvatarNative.types.ts +0 -13
  46. package/src/AvatarNativeComponent.ios.ts +0 -0
  47. package/src/AvatarNativeComponent.macos.ts +0 -5
  48. package/src/codegenTypes.d.ts +0 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # Change Log - @fluentui-react-native/experimental-avatar
2
2
 
3
+ ## 0.22.3
4
+
5
+ ### Patch Changes
6
+
7
+ - 9cf4444: Migrate from ESLint to oxlint
8
+ - Updated dependencies [9cf4444]
9
+ - @fluentui-react-native/framework@0.15.3
10
+
11
+ ## 0.22.2
12
+
13
+ ### Patch Changes
14
+
15
+ - 8a7b549: Update to the latest rnx-kit versions, fix some typing issues, and correct the vscode settings
16
+ - Updated dependencies [8a7b549]
17
+ - @fluentui-react-native/framework@0.15.2
18
+
19
+ ## 0.22.1
20
+
21
+ ### Patch Changes
22
+
23
+ - f72b43a: Fix codegen definitions for native components in repo
24
+ - 0d6e9c1: chore: migrate to `oxfmt`
25
+ - ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
26
+ - Updated dependencies [0d6e9c1]
27
+ - Updated dependencies [ac6e7af]
28
+ - @fluentui-react-native/framework@0.15.1
29
+
3
30
  ## 0.22.0
4
31
 
5
32
  ### Minor Changes
@@ -1,5 +1,13 @@
1
1
  import type { HostComponent } from 'react-native';
2
- import type { NativeProps } from './AvatarNative.types';
2
+ import type { ColorValue, ViewProps, ImageURISource } from 'react-native';
3
+ import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
4
+ export interface NativeProps extends ViewProps {
5
+ primaryText?: string;
6
+ secondaryText?: string;
7
+ imageSource?: ImageURISource;
8
+ backgroundColor?: ColorValue;
9
+ size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
10
+ }
3
11
  declare const _default: HostComponent<NativeProps>;
4
12
  export default _default;
5
- //# sourceMappingURL=AvatarNativeComponent.d.ts.map
13
+ //# sourceMappingURL=AvatarNativeComponent.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
1
+ {"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAC;CAC3G;;AAED,wBAAkG"}
@@ -1,3 +1,3 @@
1
- import { requireNativeComponent } from 'react-native';
2
- export default requireNativeComponent('FRNAvatarView');
3
- //# sourceMappingURL=AvatarNativeComponent.js.map
1
+ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
2
+ export default codegenNativeComponent('FRNAvatarView');
3
+ //# sourceMappingURL=AvatarNativeComponent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEtD,eAAe,sBAAsB,CAAc,eAAe,CAA+B,CAAC"}
1
+ {"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAe7F,eAAe,sBAAsB,CAAc,eAAe,CAA+B,CAAC"}
@@ -5,78 +5,73 @@
5
5
  */
6
6
  /** @jsxImportSource @fluentui-react-native/framework-base */
7
7
  import type { ImageURISource, ViewProps, ColorValue } from 'react-native';
8
- export declare const Sizes: readonly ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'];
8
+ export declare const Sizes: readonly ["size16", "size20", "size24", "size32", "size40", "size56", "size72"];
9
9
  export type Size = (typeof Sizes)[number];
10
10
  export type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
11
11
  export type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
12
12
  export type NativeAvatarTokens = {
13
- /**
14
- * Supported Avatar sizes
15
- */
16
- size?: Size;
17
- /**
18
- * Supported Avatar styles
19
- */
20
- avatarStyle?: AvatarStyle;
13
+ /**
14
+ * Supported Avatar sizes
15
+ */
16
+ size?: Size;
17
+ /**
18
+ * Supported Avatar styles
19
+ */
20
+ avatarStyle?: AvatarStyle;
21
21
  };
22
22
  export type NativeAvatarProps = NativeAvatarTokens & {
23
- /**
24
- * The image to be displayed
25
- */
26
- imageSource?: ImageURISource;
27
- /**
28
- * The primary text to create initials with (e.g. a name)
29
- */
30
- primaryText?: string;
31
- /**
32
- * The secondary text to create initials with if primary text is not provided (e.g. an email address)
33
- */
34
- secondaryText?: string;
35
- /**
36
- * A custom color for the ring around the Avatar
37
- */
38
- ringColor?: ColorValue;
39
- /**
40
- * A custom color for the avatar initials when no image is shown
41
- */
42
- foregroundColor?: ColorValue;
43
- /**
44
- * A custom color for the avatar background when no image is shown
45
- */
46
- backgroundColor?: ColorValue;
47
- /**
48
- * The avatar view's presence state.
49
- */
50
- presence?: Presence;
51
- /**
52
- * A boolean inidicating whether the ring is visible
53
- */
54
- isRingVisible?: boolean;
55
- /**
56
- * A boolean indicating whether the Inner Ring Gap is transparent
57
- */
58
- isTransparent?: boolean;
59
- /**
60
- * A boolean indicating out of office status
61
- */
62
- isOutOfOffice?: boolean;
63
- /**
64
- * A boolean indicating whether the gap between the avatar and ring is visible.
65
- */
66
- hasRingInnerGap?: boolean;
67
- /**
68
- * An image to be shown as the backdrop of the ring, rather then a solid color.
69
- * Takes precendence over `ringColor`
70
- */
71
- customBorderImageSource?: ImageURISource;
23
+ /**
24
+ * The image to be displayed
25
+ */
26
+ imageSource?: ImageURISource;
27
+ /**
28
+ * The primary text to create initials with (e.g. a name)
29
+ */
30
+ primaryText?: string;
31
+ /**
32
+ * The secondary text to create initials with if primary text is not provided (e.g. an email address)
33
+ */
34
+ secondaryText?: string;
35
+ /**
36
+ * A custom color for the ring around the Avatar
37
+ */
38
+ ringColor?: ColorValue;
39
+ /**
40
+ * A custom color for the avatar initials when no image is shown
41
+ */
42
+ foregroundColor?: ColorValue;
43
+ /**
44
+ * A custom color for the avatar background when no image is shown
45
+ */
46
+ backgroundColor?: ColorValue;
47
+ /**
48
+ * The avatar view's presence state.
49
+ */
50
+ presence?: Presence;
51
+ /**
52
+ * A boolean inidicating whether the ring is visible
53
+ */
54
+ isRingVisible?: boolean;
55
+ /**
56
+ * A boolean indicating whether the Inner Ring Gap is transparent
57
+ */
58
+ isTransparent?: boolean;
59
+ /**
60
+ * A boolean indicating out of office status
61
+ */
62
+ isOutOfOffice?: boolean;
63
+ /**
64
+ * A boolean indicating whether the gap between the avatar and ring is visible.
65
+ */
66
+ hasRingInnerGap?: boolean;
67
+ /**
68
+ * An image to be shown as the backdrop of the ring, rather then a solid color.
69
+ * Takes precendence over `ringColor`
70
+ */
71
+ customBorderImageSource?: ImageURISource;
72
72
  };
73
73
  export type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
74
- export declare const NativeAvatar: import('@fluentui-react-native/framework').ComposableComponent<
75
- NativeAvatarProps,
76
- {
74
+ export declare const NativeAvatar: import("@fluentui-react-native/framework").ComposableComponent<NativeAvatarProps, {
77
75
  root: NativeAvatarViewProps;
78
- },
79
- NativeAvatarTokens,
80
- import('@fluentui-react-native/framework-base').ObjectBase
81
- >;
82
- //# sourceMappingURL=NativeAvatar.d.ts.map
76
+ }, NativeAvatarTokens, import("@fluentui-react-native/framework-base").ObjectBase>;
77
+ //# sourceMappingURL=NativeAvatar.d.ts.map
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
1
+ import { jsx as _jsx } from "@fluentui-react-native/framework-base/jsx-runtime";
2
2
  import { NativeModules, TurboModuleRegistry } from 'react-native';
3
3
  import { compose, buildProps, mergeProps } from '@fluentui-react-native/framework';
4
4
  const avatarName = 'NativeAvatar';
@@ -7,31 +7,28 @@ export const Sizes = ['size16', 'size20', 'size24', 'size32', 'size40', 'size56'
7
7
  const ExportedNativeConstants = TurboModuleRegistry.get('FRNAvatarConstants')?.getConstants() || NativeModules.FRNAvatarViewManager;
8
8
  const tokensThatAreAlsoProps = ['size', 'avatarStyle'];
9
9
  export const NativeAvatar = compose({
10
- displayName: avatarName,
11
- tokens: [
12
- {
13
- size: 'size24',
14
- avatarStyle: 'default',
15
- },
16
- avatarName,
17
- ],
18
- tokensThatAreAlsoProps,
19
- slots: { root: NativeAvatarView },
20
- slotProps: {
21
- root: buildProps(
22
- (tokens) => ({
23
- size: tokens.size,
24
- style: {
25
- height: ExportedNativeConstants.sizes[tokens.size],
26
- width: ExportedNativeConstants.sizes[tokens.size],
10
+ displayName: avatarName,
11
+ tokens: [
12
+ {
13
+ size: 'size24',
14
+ avatarStyle: 'default',
27
15
  },
28
- }),
29
- ['size'],
30
- ),
31
- },
32
- useRender: (props, useSlots) => {
33
- const Root = useSlots(props).root;
34
- return (rest) => _jsx(Root, { ...mergeProps(props, rest) });
35
- },
16
+ avatarName,
17
+ ],
18
+ tokensThatAreAlsoProps,
19
+ slots: { root: NativeAvatarView },
20
+ slotProps: {
21
+ root: buildProps((tokens) => ({
22
+ size: tokens.size,
23
+ style: {
24
+ height: ExportedNativeConstants.sizes[tokens.size],
25
+ width: ExportedNativeConstants.sizes[tokens.size],
26
+ },
27
+ }), ['size']),
28
+ },
29
+ useRender: (props, useSlots) => {
30
+ const Root = useSlots(props).root;
31
+ return (rest) => _jsx(Root, { ...mergeProps(props, rest) });
32
+ },
36
33
  });
37
- //# sourceMappingURL=NativeAvatar.js.map
34
+ //# sourceMappingURL=NativeAvatar.js.map
package/lib/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { NativeAvatar, Sizes } from './NativeAvatar';
2
2
  export type { AvatarStyle, NativeAvatarProps, NativeAvatarTokens, NativeAvatarViewProps, Presence, Size } from './NativeAvatar';
3
- //# sourceMappingURL=index.d.ts.map
3
+ //# sourceMappingURL=index.d.ts.map
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export { NativeAvatar, Sizes } from './NativeAvatar';
2
- //# sourceMappingURL=index.js.map
2
+ //# sourceMappingURL=index.js.map
@@ -1,5 +1,13 @@
1
1
  import type { HostComponent } from 'react-native';
2
- import type { NativeProps } from './AvatarNative.types';
2
+ import type { ColorValue, ViewProps, ImageURISource } from 'react-native';
3
+ import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
4
+ export interface NativeProps extends ViewProps {
5
+ primaryText?: string;
6
+ secondaryText?: string;
7
+ imageSource?: ImageURISource;
8
+ backgroundColor?: ColorValue;
9
+ size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
10
+ }
3
11
  declare const _default: HostComponent<NativeProps>;
4
12
  export default _default;
5
- //# sourceMappingURL=AvatarNativeComponent.d.ts.map
13
+ //# sourceMappingURL=AvatarNativeComponent.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
1
+ {"version":3,"file":"AvatarNativeComponent.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAC;CAC3G;;AAED,wBAAkG"}
@@ -1,5 +1,8 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
3
- const react_native_1 = require('react-native');
4
- exports.default = (0, react_native_1.requireNativeComponent)('FRNAvatarView');
5
- //# sourceMappingURL=AvatarNativeComponent.js.map
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const codegenNativeComponent_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
7
+ exports.default = (0, codegenNativeComponent_1.default)('FRNAvatarView');
8
+ //# sourceMappingURL=AvatarNativeComponent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":";;AAEA,+CAAsD;kBAEvC,IAAA,qCAAsB,EAAc,eAAe,CAA+B"}
1
+ {"version":3,"file":"AvatarNativeComponent.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ts"],"names":[],"mappings":";;;;;AAAA,qHAA6F;kBAe9E,IAAA,gCAAsB,EAAc,eAAe,CAA+B"}
@@ -5,78 +5,73 @@
5
5
  */
6
6
  /** @jsxImportSource @fluentui-react-native/framework-base */
7
7
  import type { ImageURISource, ViewProps, ColorValue } from 'react-native';
8
- export declare const Sizes: readonly ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'];
8
+ export declare const Sizes: readonly ["size16", "size20", "size24", "size32", "size40", "size56", "size72"];
9
9
  export type Size = (typeof Sizes)[number];
10
10
  export type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
11
11
  export type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
12
12
  export type NativeAvatarTokens = {
13
- /**
14
- * Supported Avatar sizes
15
- */
16
- size?: Size;
17
- /**
18
- * Supported Avatar styles
19
- */
20
- avatarStyle?: AvatarStyle;
13
+ /**
14
+ * Supported Avatar sizes
15
+ */
16
+ size?: Size;
17
+ /**
18
+ * Supported Avatar styles
19
+ */
20
+ avatarStyle?: AvatarStyle;
21
21
  };
22
22
  export type NativeAvatarProps = NativeAvatarTokens & {
23
- /**
24
- * The image to be displayed
25
- */
26
- imageSource?: ImageURISource;
27
- /**
28
- * The primary text to create initials with (e.g. a name)
29
- */
30
- primaryText?: string;
31
- /**
32
- * The secondary text to create initials with if primary text is not provided (e.g. an email address)
33
- */
34
- secondaryText?: string;
35
- /**
36
- * A custom color for the ring around the Avatar
37
- */
38
- ringColor?: ColorValue;
39
- /**
40
- * A custom color for the avatar initials when no image is shown
41
- */
42
- foregroundColor?: ColorValue;
43
- /**
44
- * A custom color for the avatar background when no image is shown
45
- */
46
- backgroundColor?: ColorValue;
47
- /**
48
- * The avatar view's presence state.
49
- */
50
- presence?: Presence;
51
- /**
52
- * A boolean inidicating whether the ring is visible
53
- */
54
- isRingVisible?: boolean;
55
- /**
56
- * A boolean indicating whether the Inner Ring Gap is transparent
57
- */
58
- isTransparent?: boolean;
59
- /**
60
- * A boolean indicating out of office status
61
- */
62
- isOutOfOffice?: boolean;
63
- /**
64
- * A boolean indicating whether the gap between the avatar and ring is visible.
65
- */
66
- hasRingInnerGap?: boolean;
67
- /**
68
- * An image to be shown as the backdrop of the ring, rather then a solid color.
69
- * Takes precendence over `ringColor`
70
- */
71
- customBorderImageSource?: ImageURISource;
23
+ /**
24
+ * The image to be displayed
25
+ */
26
+ imageSource?: ImageURISource;
27
+ /**
28
+ * The primary text to create initials with (e.g. a name)
29
+ */
30
+ primaryText?: string;
31
+ /**
32
+ * The secondary text to create initials with if primary text is not provided (e.g. an email address)
33
+ */
34
+ secondaryText?: string;
35
+ /**
36
+ * A custom color for the ring around the Avatar
37
+ */
38
+ ringColor?: ColorValue;
39
+ /**
40
+ * A custom color for the avatar initials when no image is shown
41
+ */
42
+ foregroundColor?: ColorValue;
43
+ /**
44
+ * A custom color for the avatar background when no image is shown
45
+ */
46
+ backgroundColor?: ColorValue;
47
+ /**
48
+ * The avatar view's presence state.
49
+ */
50
+ presence?: Presence;
51
+ /**
52
+ * A boolean inidicating whether the ring is visible
53
+ */
54
+ isRingVisible?: boolean;
55
+ /**
56
+ * A boolean indicating whether the Inner Ring Gap is transparent
57
+ */
58
+ isTransparent?: boolean;
59
+ /**
60
+ * A boolean indicating out of office status
61
+ */
62
+ isOutOfOffice?: boolean;
63
+ /**
64
+ * A boolean indicating whether the gap between the avatar and ring is visible.
65
+ */
66
+ hasRingInnerGap?: boolean;
67
+ /**
68
+ * An image to be shown as the backdrop of the ring, rather then a solid color.
69
+ * Takes precendence over `ringColor`
70
+ */
71
+ customBorderImageSource?: ImageURISource;
72
72
  };
73
73
  export type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
74
- export declare const NativeAvatar: import('@fluentui-react-native/framework').ComposableComponent<
75
- NativeAvatarProps,
76
- {
74
+ export declare const NativeAvatar: import("@fluentui-react-native/framework").ComposableComponent<NativeAvatarProps, {
77
75
  root: NativeAvatarViewProps;
78
- },
79
- NativeAvatarTokens,
80
- import('@fluentui-react-native/framework').ObjectBase
81
- >;
82
- //# sourceMappingURL=NativeAvatar.d.ts.map
76
+ }, NativeAvatarTokens, import("@fluentui-react-native/framework").ObjectBase>;
77
+ //# sourceMappingURL=NativeAvatar.d.ts.map
@@ -1,46 +1,40 @@
1
- 'use strict';
2
- var __importDefault =
3
- (this && this.__importDefault) ||
4
- function (mod) {
5
- return mod && mod.__esModule ? mod : { default: mod };
6
- };
7
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
8
6
  exports.NativeAvatar = exports.Sizes = void 0;
9
- const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
10
- const react_native_1 = require('react-native');
11
- const framework_1 = require('@fluentui-react-native/framework');
7
+ const jsx_runtime_1 = require("@fluentui-react-native/framework-base/jsx-runtime");
8
+ const react_native_1 = require("react-native");
9
+ const framework_1 = require("@fluentui-react-native/framework");
12
10
  const avatarName = 'NativeAvatar';
13
- const AvatarNativeComponent_1 = __importDefault(require('./AvatarNativeComponent'));
11
+ const AvatarNativeComponent_1 = __importDefault(require("./AvatarNativeComponent"));
14
12
  exports.Sizes = ['size16', 'size20', 'size24', 'size32', 'size40', 'size56', 'size72'];
15
- const ExportedNativeConstants =
16
- react_native_1.TurboModuleRegistry.get('FRNAvatarConstants')?.getConstants() || react_native_1.NativeModules.FRNAvatarViewManager;
13
+ const ExportedNativeConstants = react_native_1.TurboModuleRegistry.get('FRNAvatarConstants')?.getConstants() || react_native_1.NativeModules.FRNAvatarViewManager;
17
14
  const tokensThatAreAlsoProps = ['size', 'avatarStyle'];
18
15
  exports.NativeAvatar = (0, framework_1.compose)({
19
- displayName: avatarName,
20
- tokens: [
21
- {
22
- size: 'size24',
23
- avatarStyle: 'default',
24
- },
25
- avatarName,
26
- ],
27
- tokensThatAreAlsoProps,
28
- slots: { root: AvatarNativeComponent_1.default },
29
- slotProps: {
30
- root: (0, framework_1.buildProps)(
31
- (tokens) => ({
32
- size: tokens.size,
33
- style: {
34
- height: ExportedNativeConstants.sizes[tokens.size],
35
- width: ExportedNativeConstants.sizes[tokens.size],
16
+ displayName: avatarName,
17
+ tokens: [
18
+ {
19
+ size: 'size24',
20
+ avatarStyle: 'default',
36
21
  },
37
- }),
38
- ['size'],
39
- ),
40
- },
41
- useRender: (props, useSlots) => {
42
- const Root = useSlots(props).root;
43
- return (rest) => jsx_runtime_1.jsx(Root, { ...(0, framework_1.mergeProps)(props, rest) });
44
- },
22
+ avatarName,
23
+ ],
24
+ tokensThatAreAlsoProps,
25
+ slots: { root: AvatarNativeComponent_1.default },
26
+ slotProps: {
27
+ root: (0, framework_1.buildProps)((tokens) => ({
28
+ size: tokens.size,
29
+ style: {
30
+ height: ExportedNativeConstants.sizes[tokens.size],
31
+ width: ExportedNativeConstants.sizes[tokens.size],
32
+ },
33
+ }), ['size']),
34
+ },
35
+ useRender: (props, useSlots) => {
36
+ const Root = useSlots(props).root;
37
+ return (rest) => jsx_runtime_1.jsx(Root, { ...(0, framework_1.mergeProps)(props, rest) });
38
+ },
45
39
  });
46
- //# sourceMappingURL=NativeAvatar.js.map
40
+ //# sourceMappingURL=NativeAvatar.js.map
@@ -1,3 +1,3 @@
1
1
  export { NativeAvatar, Sizes } from './NativeAvatar';
2
2
  export type { AvatarStyle, NativeAvatarProps, NativeAvatarTokens, NativeAvatarViewProps, Presence, Size } from './NativeAvatar';
3
- //# sourceMappingURL=index.d.ts.map
3
+ //# sourceMappingURL=index.d.ts.map
@@ -1,17 +1,7 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Sizes = exports.NativeAvatar = void 0;
4
- const NativeAvatar_1 = require('./NativeAvatar');
5
- Object.defineProperty(exports, 'NativeAvatar', {
6
- enumerable: true,
7
- get: function () {
8
- return NativeAvatar_1.NativeAvatar;
9
- },
10
- });
11
- Object.defineProperty(exports, 'Sizes', {
12
- enumerable: true,
13
- get: function () {
14
- return NativeAvatar_1.Sizes;
15
- },
16
- });
17
- //# sourceMappingURL=index.js.map
4
+ const NativeAvatar_1 = require("./NativeAvatar");
5
+ Object.defineProperty(exports, "NativeAvatar", { enumerable: true, get: function () { return NativeAvatar_1.NativeAvatar; } });
6
+ Object.defineProperty(exports, "Sizes", { enumerable: true, get: function () { return NativeAvatar_1.Sizes; } });
7
+ //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,64 +1,65 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/experimental-avatar",
3
- "version": "0.22.0",
3
+ "version": "0.22.3",
4
4
  "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
5
5
  "homepage": "https://github.com/microsoft/fluentui-react-native",
6
+ "license": "MIT",
7
+ "author": "Microsoft <fluentuinativeowners@microsoft.com>",
6
8
  "repository": {
7
9
  "type": "git",
8
10
  "url": "https://github.com/microsoft/fluentui-react-native.git",
9
11
  "directory": "packages/experimental/Avatar"
10
12
  },
11
- "license": "MIT",
12
- "author": "Microsoft <fluentuinativeowners@microsoft.com>",
13
+ "main": "lib-commonjs/index.js",
14
+ "module": "lib/index.js",
15
+ "types": "lib/index.d.ts",
13
16
  "exports": {
14
17
  ".": {
15
18
  "types": "./lib/index.d.ts",
16
19
  "import": "./lib/index.js",
17
- "require": "./lib-commonjs/index.js"
20
+ "require": "./lib-commonjs/index.js",
21
+ "default": "./src/index.ts"
18
22
  }
19
23
  },
20
- "main": "lib-commonjs/index.js",
21
- "module": "lib/index.js",
22
- "types": "lib/index.d.ts",
23
24
  "scripts": {
24
25
  "build": "fluentui-scripts build",
25
26
  "build-cjs": "tsgo --outDir lib-commonjs",
26
- "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
27
+ "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
27
28
  "clean": "fluentui-scripts clean",
28
29
  "depcheck": "fluentui-scripts depcheck",
29
- "lint": "fluentui-scripts eslint",
30
+ "format": "fluentui-scripts format",
31
+ "lint": "fluentui-scripts lint",
30
32
  "lint-package": "fluentui-scripts lint-package",
31
- "prettier": "fluentui-scripts prettier",
32
33
  "test": "fluentui-scripts jest",
33
34
  "update-snapshots": "fluentui-scripts jest -u"
34
35
  },
35
36
  "dependencies": {
36
- "@fluentui-react-native/framework": "0.15.0"
37
+ "@fluentui-react-native/framework": "0.15.3"
37
38
  },
38
39
  "devDependencies": {
39
40
  "@babel/core": "^7.20.0",
40
41
  "@fluentui-react-native/babel-config": "0.1.1",
41
- "@fluentui-react-native/eslint-config-rules": "0.1.1",
42
- "@fluentui-react-native/framework-base": "0.3.0",
42
+ "@fluentui-react-native/framework-base": "0.3.3",
43
43
  "@fluentui-react-native/kit-config": "0.1.2",
44
- "@fluentui-react-native/scripts": "0.1.2",
44
+ "@fluentui-react-native/lint-config-rules": "0.1.3",
45
+ "@fluentui-react-native/scripts": "0.1.0",
45
46
  "@react-native-community/cli": "^20.0.0",
46
47
  "@react-native-community/cli-platform-android": "^20.0.0",
47
48
  "@react-native-community/cli-platform-ios": "^20.0.0",
48
49
  "@react-native/metro-config": "^0.81.0",
49
- "@types/react": "~19.1.0",
50
+ "@types/react": "~19.1.4",
50
51
  "@types/react-test-renderer": "^19.1.0",
51
- "react": "19.1.0",
52
- "react-native": "^0.81.0",
52
+ "react": "19.1.4",
53
+ "react-native": "^0.81.6",
53
54
  "react-native-macos": "^0.81.0",
54
55
  "react-native-windows": "^0.81.0",
55
- "react-test-renderer": "19.1.0"
56
+ "react-test-renderer": "19.1.4"
56
57
  },
57
58
  "peerDependencies": {
58
59
  "@office-iss/react-native-win32": "^0.74.0",
59
- "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
60
- "react": "18.2.0 || 19.0.0 || 19.1.0",
61
- "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
60
+ "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
61
+ "react": "18.2.0 || 19.0.0 || 19.1.4",
62
+ "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
62
63
  "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
63
64
  "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
64
65
  },
@@ -1,5 +1,16 @@
1
+ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
1
2
  import type { HostComponent } from 'react-native';
2
- import type { NativeProps } from './AvatarNative.types';
3
- import { requireNativeComponent } from 'react-native';
4
3
 
5
- export default requireNativeComponent<NativeProps>('FRNAvatarView') as HostComponent<NativeProps>;
4
+ import type { ColorValue, ViewProps, ImageURISource } from 'react-native';
5
+
6
+ import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
7
+
8
+ export interface NativeProps extends ViewProps {
9
+ primaryText?: string;
10
+ secondaryText?: string;
11
+ imageSource?: ImageURISource;
12
+ backgroundColor?: ColorValue;
13
+ size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
14
+ }
15
+
16
+ export default codegenNativeComponent<NativeProps>('FRNAvatarView') as HostComponent<NativeProps>;
package/eslint.config.js DELETED
@@ -1,3 +0,0 @@
1
- const baseConfig = require('@fluentui-react-native/eslint-config-rules');
2
-
3
- module.exports = baseConfig;
@@ -1,11 +0,0 @@
1
- import type { ColorValue, ViewProps } from 'react-native';
2
- import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
3
- import type { ImageSource } from './codegenTypes';
4
- export interface NativeProps extends ViewProps {
5
- primaryText?: string;
6
- secondaryText?: string;
7
- imageSource?: ImageSource;
8
- backgroundColor?: ColorValue;
9
- size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
10
- }
11
- //# sourceMappingURL=AvatarNative.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNative.types.d.ts","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAC;CAC3G"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=AvatarNative.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNative.types.js","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- //# sourceMappingURL=AvatarNativeComponent.ios.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.ios.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- 'use strict';
2
- //# sourceMappingURL=AvatarNativeComponent.ios.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.ios.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import type { HostComponent } from 'react-native';
2
- import type { NativeProps } from './AvatarNative.types';
3
- declare const _default: HostComponent<NativeProps>;
4
- export default _default;
5
- //# sourceMappingURL=AvatarNativeComponent.macos.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.macos.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
@@ -1,3 +0,0 @@
1
- import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
2
- export default codegenNativeComponent('FRNAvatarView');
3
- //# sourceMappingURL=AvatarNativeComponent.macos.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.macos.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAE7F,eAAe,sBAAsB,CAAc,eAAe,CAA+B,CAAC"}
@@ -1,11 +0,0 @@
1
- import type { ColorValue, ViewProps } from 'react-native';
2
- import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
3
- import type { ImageSource } from './codegenTypes';
4
- export interface NativeProps extends ViewProps {
5
- primaryText?: string;
6
- secondaryText?: string;
7
- imageSource?: ImageSource;
8
- backgroundColor?: ColorValue;
9
- size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
10
- }
11
- //# sourceMappingURL=AvatarNative.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNative.types.d.ts","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAC;CAC3G"}
@@ -1,3 +0,0 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
3
- //# sourceMappingURL=AvatarNative.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNative.types.js","sourceRoot":"","sources":["../src/AvatarNative.types.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=AvatarNativeComponent.ios.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.ios.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
@@ -1,3 +0,0 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
3
- //# sourceMappingURL=AvatarNativeComponent.ios.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.ios.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.ios.ts"],"names":[],"mappings":""}
@@ -1,5 +0,0 @@
1
- import type { HostComponent } from 'react-native';
2
- import type { NativeProps } from './AvatarNative.types';
3
- declare const _default: HostComponent<NativeProps>;
4
- export default _default;
5
- //# sourceMappingURL=AvatarNativeComponent.macos.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.macos.d.ts","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;;AAGxD,wBAAkG"}
@@ -1,10 +0,0 @@
1
- 'use strict';
2
- var __importDefault =
3
- (this && this.__importDefault) ||
4
- function (mod) {
5
- return mod && mod.__esModule ? mod : { default: mod };
6
- };
7
- Object.defineProperty(exports, '__esModule', { value: true });
8
- const codegenNativeComponent_1 = __importDefault(require('react-native/Libraries/Utilities/codegenNativeComponent'));
9
- exports.default = (0, codegenNativeComponent_1.default)('FRNAvatarView');
10
- //# sourceMappingURL=AvatarNativeComponent.macos.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AvatarNativeComponent.macos.js","sourceRoot":"","sources":["../src/AvatarNativeComponent.macos.ts"],"names":[],"mappings":";;;;;AAEA,qHAA6F;kBAE9E,IAAA,gCAAsB,EAAc,eAAe,CAA+B"}
@@ -1,13 +0,0 @@
1
- import type { ColorValue, ViewProps } from 'react-native';
2
-
3
- import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
4
-
5
- import type { ImageSource } from './codegenTypes';
6
-
7
- export interface NativeProps extends ViewProps {
8
- primaryText?: string;
9
- secondaryText?: string;
10
- imageSource?: ImageSource;
11
- backgroundColor?: ColorValue;
12
- size?: WithDefault<'size16' | 'size20' | 'size24' | 'size32' | 'size40' | 'size56' | 'size72', undefined>;
13
- }
File without changes
@@ -1,5 +0,0 @@
1
- import type { HostComponent } from 'react-native';
2
- import type { NativeProps } from './AvatarNative.types';
3
- import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
4
-
5
- export default codegenNativeComponent<NativeProps>('FRNAvatarView') as HostComponent<NativeProps>;
@@ -1,2 +0,0 @@
1
- // Separate .d.ts file to fool codegen, since ImageSource does not exist in the TS types of RN currently.
2
- export type { ImageURISource as ImageSource } from 'react-native/Libraries/Image/ImageSource';