@fluentui/react-avatar 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.1
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.
- package/CHANGELOG.json +373 -20
- package/CHANGELOG.md +79 -12
- package/dist/react-avatar.d.ts +46 -36
- package/lib/components/Avatar/Avatar.js +7 -7
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/Avatar/Avatar.types.d.ts +27 -32
- package/lib/components/Avatar/renderAvatar.d.ts +1 -1
- package/lib/components/Avatar/renderAvatar.js +11 -7
- package/lib/components/Avatar/renderAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatar.d.ts +1 -1
- package/lib/components/Avatar/useAvatar.js +103 -86
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.d.ts +2 -1
- package/lib/components/Avatar/useAvatarStyles.js +160 -102
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/utils/getInitials.d.ts +6 -1
- package/lib/utils/getInitials.js +13 -8
- package/lib/utils/getInitials.js.map +1 -1
- package/lib-commonjs/Avatar.js +1 -1
- package/lib-commonjs/components/Avatar/Avatar.js +8 -8
- package/lib-commonjs/components/Avatar/Avatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/Avatar.types.d.ts +27 -32
- package/lib-commonjs/components/Avatar/index.js +1 -1
- package/lib-commonjs/components/Avatar/renderAvatar.d.ts +1 -1
- package/lib-commonjs/components/Avatar/renderAvatar.js +15 -12
- package/lib-commonjs/components/Avatar/renderAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatar.d.ts +1 -1
- package/lib-commonjs/components/Avatar/useAvatar.js +109 -93
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.d.ts +2 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js +165 -107
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +1 -0
- package/lib-commonjs/index.js +3 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/getInitials.d.ts +6 -1
- package/lib-commonjs/utils/getInitials.js +13 -8
- package/lib-commonjs/utils/getInitials.js.map +1 -1
- package/package.json +11 -13
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -12
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -23
- package/lib-commonjs/common/isConformant.js.map +0 -1
package/lib/utils/getInitials.js
CHANGED
|
@@ -6,22 +6,22 @@
|
|
|
6
6
|
* Regular expression matching characters within various types of enclosures, including the enclosures themselves
|
|
7
7
|
* so for example, (xyz) [xyz] {xyz} all would be ignored
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
|
|
10
10
|
/**
|
|
11
11
|
* Regular expression matching special ASCII characters except space, plus some unicode special characters.
|
|
12
12
|
* Applies after unwanted enclosures have been removed
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
|
|
16
16
|
/**
|
|
17
17
|
* Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
|
|
18
18
|
* and number has been trimmed for whitespaces
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
|
|
22
22
|
/** Regular expression matching one or more spaces. */
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
const MULTIPLE_WHITESPACES_REGEX = /\s+/g;
|
|
25
25
|
/**
|
|
26
26
|
* Regular expression matching languages for which we currently don't support initials.
|
|
27
27
|
* Arabic: Arabic, Arabic Supplement, Arabic Extended-A.
|
|
@@ -32,11 +32,11 @@ var MULTIPLE_WHITESPACES_REGEX = /\s+/g;
|
|
|
32
32
|
*/
|
|
33
33
|
// eslint-disable-next-line @fluentui/max-len
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
const UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
|
|
36
36
|
|
|
37
37
|
function getInitialsLatin(displayName, isRtl) {
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
let initials = '';
|
|
39
|
+
const splits = displayName.split(' ');
|
|
40
40
|
|
|
41
41
|
if (splits.length === 2) {
|
|
42
42
|
initials += splits[0].charAt(0).toUpperCase();
|
|
@@ -65,7 +65,12 @@ function cleanupDisplayName(displayName) {
|
|
|
65
65
|
/**
|
|
66
66
|
* Get (up to 2 characters) initials based on display name of the persona.
|
|
67
67
|
*
|
|
68
|
-
* @
|
|
68
|
+
* @param displayName - The full name of the person or entity
|
|
69
|
+
* @param isRtl - Whether the display is in RTL
|
|
70
|
+
* @param allowPhoneInitials - Should initials be generated from phone numbers (default false)
|
|
71
|
+
*
|
|
72
|
+
* @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
|
|
73
|
+
* could be derived from the name.
|
|
69
74
|
*/
|
|
70
75
|
|
|
71
76
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/getInitials.ts"],"names":[],"mappings":"AAAA;;AAEG;;AAEH;;;AAGG;AACH,
|
|
1
|
+
{"version":3,"sources":["../../src/utils/getInitials.ts"],"names":[],"mappings":"AAAA;;AAEG;;AAEH;;;AAGG;AACH,MAAM,yBAAyB,GAAW,6BAA1C;AAEA;;;AAGG;;AACH,MAAM,oBAAoB,GAAW,4DAArC;AAEA;;;AAGG;;AACH,MAAM,iBAAiB,GAAW,+BAAlC;AAEA;;AACA,MAAM,0BAA0B,GAAW,MAA3C;AAEA;;;;;;;AAOG;AACH;;AACA,MAAM,sBAAsB,GAAW,4MAAvC;;AAEA,SAAS,gBAAT,CAA0B,WAA1B,EAA+C,KAA/C,EAA6D;AAC3D,MAAI,QAAQ,GAAG,EAAf;AAEA,QAAM,MAAM,GAAa,WAAW,CAAC,KAAZ,CAAkB,GAAlB,CAAzB;;AAEA,MAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACA,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD,GAHD,MAGO,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AAC9B,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACA,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD,GAHM,MAGA,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AAC9B,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;;AAED,MAAI,KAAK,IAAI,QAAQ,CAAC,MAAT,GAAkB,CAA/B,EAAkC;AAChC,WAAO,QAAQ,CAAC,MAAT,CAAgB,CAAhB,IAAqB,QAAQ,CAAC,MAAT,CAAgB,CAAhB,CAA5B;AACD;;AAED,SAAO,QAAP;AACD;;AAED,SAAS,kBAAT,CAA4B,WAA5B,EAA+C;AAC7C,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,yBAApB,EAA+C,EAA/C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,oBAApB,EAA0C,EAA1C,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,OAAZ,CAAoB,0BAApB,EAAgD,GAAhD,CAAd;AACA,EAAA,WAAW,GAAG,WAAW,CAAC,IAAZ,EAAd;AAEA,SAAO,WAAP;AACD;AAED;;;;;;;;;AASG;;;AACH,OAAM,SAAU,WAAV,CACJ,WADI,EAEJ,KAFI,EAGJ,kBAHI,EAGwB;AAE5B,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,EAAP;AACD;;AAED,EAAA,WAAW,GAAG,kBAAkB,CAAC,WAAD,CAAhC,CAN4B,CAQ5B;;AACA,MAAI,sBAAsB,CAAC,IAAvB,CAA4B,WAA5B,KAA6C,CAAC,kBAAD,IAAuB,iBAAiB,CAAC,IAAlB,CAAuB,WAAvB,CAAxE,EAA8G;AAC5G,WAAO,EAAP;AACD;;AAED,SAAO,gBAAgB,CAAC,WAAD,EAAc,KAAd,CAAvB;AACD","sourceRoot":""}
|
package/lib-commonjs/Avatar.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
8
|
|
|
9
9
|
tslib_1.__exportStar(require("./components/Avatar/index"), exports);
|
|
10
10
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.Avatar = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const renderAvatar_1 = /*#__PURE__*/require("./renderAvatar");
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
const useAvatar_1 = /*#__PURE__*/require("./useAvatar");
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const useAvatarStyles_1 = /*#__PURE__*/require("./useAvatarStyles");
|
|
15
15
|
|
|
16
|
-
exports.Avatar = /*#__PURE__*/React.forwardRef(
|
|
17
|
-
|
|
18
|
-
useAvatarStyles_1.
|
|
19
|
-
return renderAvatar_1.
|
|
16
|
+
exports.Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
17
|
+
const state = useAvatar_1.useAvatar_unstable(props, ref);
|
|
18
|
+
useAvatarStyles_1.useAvatarStyles_unstable(state);
|
|
19
|
+
return renderAvatar_1.renderAvatar_unstable(state);
|
|
20
20
|
});
|
|
21
21
|
exports.Avatar.displayName = 'Avatar';
|
|
22
22
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAIa,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
|
|
@@ -1,39 +1,41 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type { ComponentProps, ComponentState,
|
|
3
|
-
import type { PresenceBadgeProps } from '@fluentui/react-badge';
|
|
1
|
+
import { PresenceBadge } from '@fluentui/react-badge';
|
|
2
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
4
3
|
export declare type AvatarSlots = {
|
|
5
|
-
root:
|
|
6
|
-
children?: never;
|
|
7
|
-
};
|
|
4
|
+
root: Slot<'span'>;
|
|
8
5
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
6
|
+
* The Avatar's image.
|
|
7
|
+
*
|
|
8
|
+
* Usage e.g.: `image={{ src: '...' }}`
|
|
11
9
|
*/
|
|
12
|
-
image?:
|
|
10
|
+
image?: Slot<'img'>;
|
|
13
11
|
/**
|
|
14
|
-
*
|
|
12
|
+
* (optional) Custom initials.
|
|
13
|
+
*
|
|
14
|
+
* It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
|
|
15
|
+
* using the `getInitials` function.
|
|
16
|
+
*
|
|
17
|
+
* The initials are displayed when there is no image (including while the image is loading).
|
|
15
18
|
*/
|
|
16
|
-
|
|
19
|
+
initials?: Slot<'span'>;
|
|
17
20
|
/**
|
|
18
|
-
* Icon to be displayed when the avatar doesn't have an image or
|
|
21
|
+
* Icon to be displayed when the avatar doesn't have an image or initials.
|
|
19
22
|
*
|
|
20
|
-
* @defaultvalue `
|
|
23
|
+
* @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
|
|
21
24
|
*/
|
|
22
|
-
icon?:
|
|
25
|
+
icon?: Slot<'span'>;
|
|
23
26
|
/**
|
|
24
27
|
* Badge to show the avatar's presence status.
|
|
25
28
|
*/
|
|
26
|
-
badge?:
|
|
29
|
+
badge?: Slot<typeof PresenceBadge>;
|
|
27
30
|
};
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* The name used for displaying the initials of the avatar if the image is not provided
|
|
31
|
-
*/
|
|
32
|
-
name: string;
|
|
31
|
+
declare type AvatarCommons = {
|
|
33
32
|
/**
|
|
34
|
-
*
|
|
33
|
+
* The name of the person or entity represented by this Avatar. This should always be provided if it is available.
|
|
34
|
+
*
|
|
35
|
+
* The name will be used to determine the initials displayed when there is no icon, as well as provided to
|
|
36
|
+
* accessibility tools.
|
|
35
37
|
*/
|
|
36
|
-
|
|
38
|
+
name?: string;
|
|
37
39
|
/**
|
|
38
40
|
* Size of the avatar in pixels.
|
|
39
41
|
*
|
|
@@ -68,7 +70,7 @@ export declare type AvatarCommons = Omit<React.HTMLAttributes<HTMLElement>, 'chi
|
|
|
68
70
|
*
|
|
69
71
|
* @defaultvalue ring
|
|
70
72
|
*/
|
|
71
|
-
activeAppearance: 'ring' | 'shadow' | '
|
|
73
|
+
activeAppearance: 'ring' | 'shadow' | 'ring-shadow';
|
|
72
74
|
/**
|
|
73
75
|
* The color when displaying either an icon or initials.
|
|
74
76
|
* * neutral (default): gray
|
|
@@ -92,15 +94,7 @@ export declare type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpki
|
|
|
92
94
|
/**
|
|
93
95
|
* Properties for Avatar
|
|
94
96
|
*/
|
|
95
|
-
export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, '
|
|
96
|
-
/**
|
|
97
|
-
* The Avatar's image. Cannot be typed as a normal slot since it should not accept any children
|
|
98
|
-
* but can accept a children render function.
|
|
99
|
-
*/
|
|
100
|
-
image?: Omit<IntrinsicShorthandProps<'img'>, 'children'> & {
|
|
101
|
-
children?: ShorthandRenderFunction<React.HTMLAttributes<HTMLImageElement>>;
|
|
102
|
-
};
|
|
103
|
-
};
|
|
97
|
+
export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & Partial<AvatarCommons>;
|
|
104
98
|
/**
|
|
105
99
|
* State used in rendering Avatar
|
|
106
100
|
*/
|
|
@@ -110,3 +104,4 @@ export declare type AvatarState = ComponentState<AvatarSlots> & AvatarCommons &
|
|
|
110
104
|
*/
|
|
111
105
|
color: Exclude<AvatarCommons['color'], 'colorful'>;
|
|
112
106
|
};
|
|
107
|
+
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { AvatarState } from './Avatar.types';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const renderAvatar_unstable: (state: AvatarState) => JSX.Element;
|
|
@@ -3,21 +3,24 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.renderAvatar_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
const renderAvatar_unstable = state => {
|
|
13
|
+
const {
|
|
14
|
+
slots,
|
|
15
|
+
slotProps
|
|
16
|
+
} = react_utilities_1.getSlots(state);
|
|
17
|
+
return React.createElement(slots.root, { ...slotProps.root
|
|
18
|
+
}, slots.initials && React.createElement(slots.initials, { ...slotProps.initials
|
|
19
|
+
}), slots.icon && React.createElement(slots.icon, { ...slotProps.icon
|
|
20
|
+
}), slots.image && React.createElement(slots.image, { ...slotProps.image
|
|
21
|
+
}), slots.badge && React.createElement(slots.badge, { ...slotProps.badge
|
|
22
|
+
}));
|
|
20
23
|
};
|
|
21
24
|
|
|
22
|
-
exports.
|
|
25
|
+
exports.renderAvatar_unstable = renderAvatar_unstable;
|
|
23
26
|
//# sourceMappingURL=renderAvatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Avatar/renderAvatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CADrB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJlB,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourceRoot":""}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { AvatarProps, AvatarState } from './Avatar.types';
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const useAvatar_unstable: (props: AvatarProps, ref: React.Ref<HTMLElement>) => AvatarState;
|
|
@@ -3,114 +3,130 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useAvatar_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
const index_1 = /*#__PURE__*/require("../../utils/index");
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
const react_badge_1 = /*#__PURE__*/require("@fluentui/react-badge");
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
const useAvatar_unstable = (props, ref) => {
|
|
21
|
+
var _a;
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
idForColor = props.idForColor,
|
|
37
|
-
_j = props.getInitials,
|
|
38
|
-
getInitials = _j === void 0 ? index_1.getInitials : _j;
|
|
39
|
-
var _k = props.color,
|
|
40
|
-
color = _k === void 0 ? 'neutral' : _k; // Resolve 'colorful' to a specific color name
|
|
23
|
+
const {
|
|
24
|
+
dir
|
|
25
|
+
} = react_shared_contexts_1.useFluent();
|
|
26
|
+
const {
|
|
27
|
+
name,
|
|
28
|
+
size = 32,
|
|
29
|
+
shape = 'circular',
|
|
30
|
+
active = 'unset',
|
|
31
|
+
activeAppearance = 'ring',
|
|
32
|
+
idForColor
|
|
33
|
+
} = props;
|
|
34
|
+
let {
|
|
35
|
+
color = 'neutral'
|
|
36
|
+
} = props; // Resolve 'colorful' to a specific color name
|
|
41
37
|
|
|
42
38
|
if (color === 'colorful') {
|
|
43
|
-
color = avatarColors[getHashCode((
|
|
39
|
+
color = avatarColors[getHashCode((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % avatarColors.length];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const baseId = react_utilities_1.useId('avatar-');
|
|
43
|
+
const root = react_utilities_1.getNativeElementProps('span', {
|
|
44
|
+
role: 'img',
|
|
45
|
+
id: baseId,
|
|
46
|
+
// aria-label and/or aria-labelledby are resolved below
|
|
47
|
+
...props,
|
|
48
|
+
ref
|
|
49
|
+
},
|
|
50
|
+
/* excludedPropNames: */
|
|
51
|
+
['name']); // Resolve the initials slot, defaulted to getInitials.
|
|
52
|
+
|
|
53
|
+
let initials = react_utilities_1.resolveShorthand(props.initials, {
|
|
54
|
+
required: true,
|
|
55
|
+
defaultProps: {
|
|
56
|
+
children: index_1.getInitials(name, dir === 'rtl'),
|
|
57
|
+
'aria-hidden': true
|
|
58
|
+
}
|
|
59
|
+
}); // Render the icon slot *only if* there aren't any initials to display.
|
|
60
|
+
|
|
61
|
+
let icon = undefined;
|
|
62
|
+
|
|
63
|
+
if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
|
|
64
|
+
initials = undefined;
|
|
65
|
+
icon = react_utilities_1.resolveShorthand(props.icon, {
|
|
66
|
+
required: true,
|
|
67
|
+
defaultProps: {
|
|
68
|
+
children: React.createElement(react_icons_1.PersonRegular, null),
|
|
69
|
+
'aria-hidden': true,
|
|
70
|
+
id: baseId + '__initials'
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const image = react_utilities_1.resolveShorthand(props.image, {
|
|
76
|
+
defaultProps: {
|
|
77
|
+
alt: '',
|
|
78
|
+
role: 'presentation',
|
|
79
|
+
'aria-hidden': true
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
const badge = react_utilities_1.resolveShorthand(props.badge, {
|
|
83
|
+
defaultProps: {
|
|
84
|
+
size: getBadgeSize(size),
|
|
85
|
+
role: 'presentation',
|
|
86
|
+
'aria-hidden': true,
|
|
87
|
+
id: baseId + '__badge'
|
|
88
|
+
}
|
|
89
|
+
}); // Resolve aria-label and/or aria-labelledby if not provided by the user
|
|
90
|
+
|
|
91
|
+
if (!root['aria-label'] && !root['aria-labelledby']) {
|
|
92
|
+
if (name) {
|
|
93
|
+
root['aria-label'] = name; // Include the badge in labelledby if it exists
|
|
94
|
+
|
|
95
|
+
if (badge) {
|
|
96
|
+
root['aria-labelledby'] = root.id + ' ' + badge.id;
|
|
97
|
+
}
|
|
98
|
+
} else if (initials) {
|
|
99
|
+
// root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
|
|
100
|
+
root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
|
|
101
|
+
}
|
|
44
102
|
}
|
|
45
103
|
|
|
46
|
-
|
|
47
|
-
size
|
|
48
|
-
name
|
|
49
|
-
shape
|
|
50
|
-
active
|
|
51
|
-
activeAppearance
|
|
52
|
-
color
|
|
53
|
-
idForColor
|
|
54
|
-
getInitials: getInitials,
|
|
104
|
+
return {
|
|
105
|
+
size,
|
|
106
|
+
name,
|
|
107
|
+
shape,
|
|
108
|
+
active,
|
|
109
|
+
activeAppearance,
|
|
110
|
+
color,
|
|
111
|
+
idForColor,
|
|
55
112
|
components: {
|
|
56
113
|
root: 'span',
|
|
57
|
-
|
|
114
|
+
initials: 'span',
|
|
58
115
|
icon: 'span',
|
|
59
116
|
image: 'img',
|
|
60
117
|
badge: react_badge_1.PresenceBadge
|
|
61
118
|
},
|
|
62
|
-
root
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
badge: react_utilities_1.resolveShorthand(props.badge, {
|
|
69
|
-
defaultProps: {
|
|
70
|
-
size: getBadgeSize(size)
|
|
71
|
-
}
|
|
72
|
-
})
|
|
73
|
-
}; // If a label was not provided, use the initials and fall back to the icon if initials aren't available
|
|
74
|
-
|
|
75
|
-
if (!((_c = state.label) === null || _c === void 0 ? void 0 : _c.children)) {
|
|
76
|
-
var initials = state.getInitials(state.name, dir === 'rtl');
|
|
77
|
-
|
|
78
|
-
if (initials) {
|
|
79
|
-
state.label = tslib_1.__assign(tslib_1.__assign({}, state.label), {
|
|
80
|
-
children: initials
|
|
81
|
-
});
|
|
82
|
-
} else {
|
|
83
|
-
state.icon = react_utilities_1.resolveShorthand(props.icon, {
|
|
84
|
-
required: true,
|
|
85
|
-
defaultProps: {
|
|
86
|
-
children: getDefaultIcon(state.size)
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
return state;
|
|
119
|
+
root,
|
|
120
|
+
initials,
|
|
121
|
+
icon,
|
|
122
|
+
image,
|
|
123
|
+
badge
|
|
124
|
+
};
|
|
93
125
|
};
|
|
94
126
|
|
|
95
|
-
exports.
|
|
96
|
-
|
|
97
|
-
var getDefaultIcon = function (size) {
|
|
98
|
-
if (size <= 24) {
|
|
99
|
-
return React.createElement(react_icons_1.Person16Regular, null);
|
|
100
|
-
} else if (size <= 40) {
|
|
101
|
-
return React.createElement(react_icons_1.Person20Regular, null);
|
|
102
|
-
} else if (size <= 48) {
|
|
103
|
-
return React.createElement(react_icons_1.Person24Regular, null);
|
|
104
|
-
} else if (size <= 56) {
|
|
105
|
-
return React.createElement(react_icons_1.Person28Regular, null);
|
|
106
|
-
} else if (size <= 72) {
|
|
107
|
-
return React.createElement(react_icons_1.Person32Regular, null);
|
|
108
|
-
} else {
|
|
109
|
-
return React.createElement(react_icons_1.Person48Regular, null);
|
|
110
|
-
}
|
|
111
|
-
};
|
|
127
|
+
exports.useAvatar_unstable = useAvatar_unstable;
|
|
112
128
|
|
|
113
|
-
|
|
129
|
+
const getBadgeSize = size => {
|
|
114
130
|
if (size >= 96) {
|
|
115
131
|
return 'extra-large';
|
|
116
132
|
} else if (size >= 64) {
|
|
@@ -126,14 +142,14 @@ var getBadgeSize = function (size) {
|
|
|
126
142
|
}
|
|
127
143
|
};
|
|
128
144
|
|
|
129
|
-
|
|
145
|
+
const 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'];
|
|
130
146
|
|
|
131
|
-
|
|
132
|
-
|
|
147
|
+
const getHashCode = str => {
|
|
148
|
+
let hashCode = 0;
|
|
133
149
|
|
|
134
|
-
for (
|
|
135
|
-
|
|
136
|
-
|
|
150
|
+
for (let len = str.length - 1; len >= 0; len--) {
|
|
151
|
+
const ch = str.charCodeAt(len);
|
|
152
|
+
const shift = len % 8;
|
|
137
153
|
hashCode ^= (ch << shift) + (ch >> 8 - shift); // eslint-disable-line no-bitwise
|
|
138
154
|
}
|
|
139
155
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourceRoot":""}
|