@fluentui/react-avatar 9.2.10 → 9.2.11
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 +72 -1
- package/CHANGELOG.md +18 -2
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/Avatar/renderAvatar.js +10 -5
- package/lib/components/Avatar/renderAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatar.js +17 -32
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.js +405 -424
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.js +0 -1
- package/lib/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/renderAvatarGroup.js +2 -2
- package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js +0 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js +10 -13
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js +0 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js +6 -4
- package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js +2 -5
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js +99 -124
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js +0 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +10 -6
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js +0 -7
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +166 -176
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
- package/lib/contexts/AvatarContext.js +0 -3
- package/lib/contexts/AvatarContext.js.map +1 -1
- package/lib/contexts/AvatarGroupContext.js +0 -1
- package/lib/contexts/AvatarGroupContext.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/getInitials.js +2 -17
- package/lib/utils/getInitials.js.map +1 -1
- package/lib/utils/partitionAvatarGroupItems.js +0 -3
- package/lib/utils/partitionAvatarGroupItems.js.map +1 -1
- package/lib-commonjs/Avatar.js +0 -2
- package/lib-commonjs/Avatar.js.map +1 -1
- package/lib-commonjs/AvatarGroup.js +0 -2
- package/lib-commonjs/AvatarGroup.js.map +1 -1
- package/lib-commonjs/AvatarGroupItem.js +0 -2
- package/lib-commonjs/AvatarGroupItem.js.map +1 -1
- package/lib-commonjs/AvatarGroupPopover.js +0 -2
- package/lib-commonjs/AvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/Avatar/Avatar.js +0 -5
- package/lib-commonjs/components/Avatar/Avatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/Avatar.types.js.map +1 -1
- package/lib-commonjs/components/Avatar/index.js +0 -6
- package/lib-commonjs/components/Avatar/index.js.map +1 -1
- package/lib-commonjs/components/Avatar/renderAvatar.js +10 -9
- package/lib-commonjs/components/Avatar/renderAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatar.js +17 -42
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js +405 -428
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.js +0 -7
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/index.js +0 -7
- package/lib-commonjs/components/AvatarGroup/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js +2 -7
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js +0 -4
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js +0 -2
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js +10 -18
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js +0 -6
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/index.js +0 -6
- package/lib-commonjs/components/AvatarGroupItem/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/renderAvatarGroupItem.js +6 -8
- package/lib-commonjs/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js +2 -12
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js +91 -123
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js +0 -7
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/index.js +0 -6
- package/lib-commonjs/components/AvatarGroupPopover/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js +10 -12
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js +0 -16
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +0 -2
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +166 -183
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
- package/lib-commonjs/contexts/AvatarContext.js +0 -6
- package/lib-commonjs/contexts/AvatarContext.js.map +1 -1
- package/lib-commonjs/contexts/AvatarGroupContext.js +0 -5
- package/lib-commonjs/contexts/AvatarGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +0 -3
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/index.js +0 -12
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/getInitials.js +3 -19
- package/lib-commonjs/utils/getInitials.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -4
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/partitionAvatarGroupItems.js +0 -5
- package/lib-commonjs/utils/partitionAvatarGroupItems.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,78 @@
|
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 04 Jan 2023 01:36:12 GMT",
|
|
6
|
+
"tag": "@fluentui/react-avatar_v9.2.11",
|
|
7
|
+
"version": "9.2.11",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-avatar",
|
|
13
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
|
14
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "martinhochel@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-avatar",
|
|
19
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
|
20
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"patch": [
|
|
24
|
+
{
|
|
25
|
+
"author": "olfedias@microsoft.com",
|
|
26
|
+
"package": "@fluentui/react-avatar",
|
|
27
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
|
28
|
+
"comment": "chore: Update Griffel to latest version"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-avatar",
|
|
33
|
+
"comment": "Bump @fluentui/react-badge to v9.0.17",
|
|
34
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-avatar",
|
|
39
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.4",
|
|
40
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-avatar",
|
|
45
|
+
"comment": "Bump @fluentui/react-popover to v9.3.6",
|
|
46
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-avatar",
|
|
51
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.5",
|
|
52
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"author": "beachball",
|
|
56
|
+
"package": "@fluentui/react-avatar",
|
|
57
|
+
"comment": "Bump @fluentui/react-tooltip to v9.1.6",
|
|
58
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"author": "beachball",
|
|
62
|
+
"package": "@fluentui/react-avatar",
|
|
63
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
|
64
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "beachball",
|
|
68
|
+
"package": "@fluentui/react-avatar",
|
|
69
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
|
70
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"date": "Wed, 21 Dec 2022 10:20:33 GMT",
|
|
6
77
|
"tag": "@fluentui/react-avatar_v9.2.10",
|
|
7
78
|
"version": "9.2.10",
|
|
8
79
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-avatar
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 01:36:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.11)
|
|
8
|
+
|
|
9
|
+
Wed, 04 Jan 2023 01:36:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.10..@fluentui/react-avatar_v9.2.11)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-badge to v9.0.17 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
17
|
+
- Bump @fluentui/react-popover to v9.3.6 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tooltip to v9.1.6 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
22
|
+
|
|
7
23
|
## [9.2.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.10)
|
|
8
24
|
|
|
9
|
-
Wed, 21 Dec 2022 10:
|
|
25
|
+
Wed, 21 Dec 2022 10:20:33 GMT
|
|
10
26
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.9..@fluentui/react-avatar_v9.2.10)
|
|
11
27
|
|
|
12
28
|
### Patches
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,wBAAwB,QAAQ,mBAAmB;AAI5D,OAAO,MAAMC,MAAM,gBAAqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGN,kBAAkB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAE5CJ,wBAAwB,CAACK,KAAK,CAAC;EAE/B,OAAOP,qBAAqB,CAACO,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFJ,MAAM,CAACK,WAAW,GAAG,QAAQ","names":["React","renderAvatar_unstable","useAvatar_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n const state = useAvatar_unstable(props, ref);\n\n useAvatarStyles_unstable(state);\n\n return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"]}
|
|
@@ -5,11 +5,16 @@ export const renderAvatar_unstable = state => {
|
|
|
5
5
|
slots,
|
|
6
6
|
slotProps
|
|
7
7
|
} = getSlots(state);
|
|
8
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
}), slots.
|
|
8
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
|
9
|
+
...slotProps.root
|
|
10
|
+
}, slots.initials && /*#__PURE__*/React.createElement(slots.initials, {
|
|
11
|
+
...slotProps.initials
|
|
12
|
+
}), slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
|
|
13
|
+
...slotProps.icon
|
|
14
|
+
}), slots.image && /*#__PURE__*/React.createElement(slots.image, {
|
|
15
|
+
...slotProps.image
|
|
16
|
+
}), slots.badge && /*#__PURE__*/React.createElement(slots.badge, {
|
|
17
|
+
...slotProps.badge
|
|
13
18
|
}), state.activeAriaLabelElement);
|
|
14
19
|
};
|
|
15
20
|
//# sourceMappingURL=renderAvatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EAEzD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,QAAQ,iBAAIP,oBAACI,KAAK,CAACG,QAAQ;IAAA,GAAKF,SAAS,CAACE;EAAQ,EAAI,EAC5DH,KAAK,CAACI,IAAI,iBAAIR,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,EAChDJ,KAAK,CAACK,KAAK,iBAAIT,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnDL,KAAK,CAACM,KAAK,iBAAIV,oBAACI,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnDP,KAAK,CAACQ,sBAAsB,CAClB;AAEjB,CAAC","names":["React","getSlots","renderAvatar_unstable","state","slots","slotProps","root","initials","icon","image","badge","activeAriaLabelElement"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.initials && <slots.initials {...slotProps.initials} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.image && <slots.image {...slotProps.image} />}\n {slots.badge && <slots.badge {...slotProps.badge} />}\n {state.activeAriaLabelElement}\n </slots.root>\n );\n};\n"]}
|
|
@@ -11,7 +11,6 @@ export const DEFAULT_STRINGS = {
|
|
|
11
11
|
};
|
|
12
12
|
export const useAvatar_unstable = (props, ref) => {
|
|
13
13
|
var _a;
|
|
14
|
-
|
|
15
14
|
const {
|
|
16
15
|
dir
|
|
17
16
|
} = useFluent();
|
|
@@ -28,12 +27,11 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
28
27
|
} = props;
|
|
29
28
|
let {
|
|
30
29
|
color = 'neutral'
|
|
31
|
-
} = props;
|
|
32
|
-
|
|
30
|
+
} = props;
|
|
31
|
+
// Resolve 'colorful' to a specific color name
|
|
33
32
|
if (color === 'colorful') {
|
|
34
33
|
color = avatarColors[getHashCode((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % avatarColors.length];
|
|
35
34
|
}
|
|
36
|
-
|
|
37
35
|
const baseId = useId('avatar-');
|
|
38
36
|
const root = getNativeElementProps('span', {
|
|
39
37
|
role: 'img',
|
|
@@ -41,9 +39,7 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
41
39
|
// aria-label and/or aria-labelledby are resolved below
|
|
42
40
|
...props,
|
|
43
41
|
ref
|
|
44
|
-
},
|
|
45
|
-
/* excludedPropNames: */
|
|
46
|
-
['name']);
|
|
42
|
+
}, /* excludedPropNames: */['name']);
|
|
47
43
|
const [imageHidden, setImageHidden] = React.useState(undefined);
|
|
48
44
|
const image = resolveShorthand(props.image, {
|
|
49
45
|
defaultProps: {
|
|
@@ -52,14 +48,13 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
52
48
|
'aria-hidden': true,
|
|
53
49
|
hidden: imageHidden
|
|
54
50
|
}
|
|
55
|
-
});
|
|
56
|
-
|
|
51
|
+
});
|
|
52
|
+
// Hide the image if it fails to load and restore it on a successful load
|
|
57
53
|
if (image) {
|
|
58
54
|
image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));
|
|
59
55
|
image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
}
|
|
57
|
+
// Resolve the initials slot, defaulted to getInitials.
|
|
63
58
|
let initials = resolveShorthand(props.initials, {
|
|
64
59
|
required: true,
|
|
65
60
|
defaultProps: {
|
|
@@ -68,15 +63,13 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
68
63
|
}),
|
|
69
64
|
id: baseId + '__initials'
|
|
70
65
|
}
|
|
71
|
-
});
|
|
72
|
-
|
|
66
|
+
});
|
|
67
|
+
// Don't render the initials slot if it's empty
|
|
73
68
|
if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
|
|
74
69
|
initials = undefined;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
70
|
+
}
|
|
71
|
+
// Render the icon slot *only if* there aren't any initials or image to display
|
|
78
72
|
let icon = undefined;
|
|
79
|
-
|
|
80
73
|
if (!initials && (!image || imageHidden)) {
|
|
81
74
|
icon = resolveShorthand(props.icon, {
|
|
82
75
|
required: true,
|
|
@@ -86,31 +79,28 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
86
79
|
}
|
|
87
80
|
});
|
|
88
81
|
}
|
|
89
|
-
|
|
90
82
|
const badge = resolveShorthand(props.badge, {
|
|
91
83
|
defaultProps: {
|
|
92
84
|
size: getBadgeSize(size),
|
|
93
85
|
id: baseId + '__badge'
|
|
94
86
|
}
|
|
95
87
|
});
|
|
96
|
-
let activeAriaLabelElement;
|
|
97
|
-
|
|
88
|
+
let activeAriaLabelElement;
|
|
89
|
+
// Resolve aria-label and/or aria-labelledby if not provided by the user
|
|
98
90
|
if (!root['aria-label'] && !root['aria-labelledby']) {
|
|
99
91
|
if (name) {
|
|
100
|
-
root['aria-label'] = name;
|
|
101
|
-
|
|
92
|
+
root['aria-label'] = name;
|
|
93
|
+
// Include the badge in labelledby if it exists
|
|
102
94
|
if (badge) {
|
|
103
95
|
root['aria-labelledby'] = root.id + ' ' + badge.id;
|
|
104
96
|
}
|
|
105
97
|
} else if (initials) {
|
|
106
98
|
// root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
|
|
107
99
|
root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
100
|
+
}
|
|
101
|
+
// Add the active state to the aria label
|
|
111
102
|
if (active === 'active' || active === 'inactive') {
|
|
112
103
|
const activeText = DEFAULT_STRINGS[active];
|
|
113
|
-
|
|
114
104
|
if (root['aria-labelledby']) {
|
|
115
105
|
// If using aria-labelledby, render a hidden span and append it to the labelledby
|
|
116
106
|
const activeId = baseId + '__active';
|
|
@@ -125,7 +115,6 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
125
115
|
}
|
|
126
116
|
}
|
|
127
117
|
}
|
|
128
|
-
|
|
129
118
|
return {
|
|
130
119
|
size,
|
|
131
120
|
shape,
|
|
@@ -147,7 +136,6 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
147
136
|
badge
|
|
148
137
|
};
|
|
149
138
|
};
|
|
150
|
-
|
|
151
139
|
const getBadgeSize = size => {
|
|
152
140
|
if (size >= 96) {
|
|
153
141
|
return 'extra-large';
|
|
@@ -163,12 +151,9 @@ const getBadgeSize = size => {
|
|
|
163
151
|
return 'tiny';
|
|
164
152
|
}
|
|
165
153
|
};
|
|
166
|
-
|
|
167
154
|
const avatarColors = ['dark-red', 'cranberry', 'red', 'pumpkin', 'peach', 'marigold', 'gold', 'brass', 'brown', 'forest', 'seafoam', 'dark-green', 'light-teal', 'teal', 'steel', 'blue', 'royal-blue', 'cornflower', 'navy', 'lavender', 'purple', 'grape', 'lilac', 'pink', 'magenta', 'plum', 'beige', 'mink', 'platinum', 'anchor'];
|
|
168
|
-
|
|
169
155
|
const getHashCode = str => {
|
|
170
156
|
let hashCode = 0;
|
|
171
|
-
|
|
172
157
|
for (let len = str.length - 1; len >= 0; len--) {
|
|
173
158
|
const ch = str.charCodeAt(len);
|
|
174
159
|
const shift = len % 8;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n active: 'active',\n inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { size: contextSize } = useAvatarContext();\n const {\n name,\n size = contextSize ?? (32 as const),\n shape = 'circular',\n active = 'unset',\n activeAppearance = 'ring',\n idForColor,\n } = props;\n let { color = 'neutral' } = props;\n\n // Resolve 'colorful' to a specific color name\n if (color === 'colorful') {\n color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n }\n\n const baseId = useId('avatar-');\n\n const root: AvatarState['root'] = getNativeElementProps(\n 'span',\n {\n role: 'img',\n id: baseId,\n // aria-label and/or aria-labelledby are resolved below\n ...props,\n ref,\n },\n /* excludedPropNames: */ ['name'],\n );\n\n const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n const image: AvatarState['image'] = resolveShorthand(props.image, {\n defaultProps: {\n alt: '',\n role: 'presentation',\n 'aria-hidden': true,\n hidden: imageHidden,\n },\n });\n\n // Hide the image if it fails to load and restore it on a successful load\n if (image) {\n image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n }\n\n // Resolve the initials slot, defaulted to getInitials.\n let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n required: true,\n defaultProps: {\n children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\n },\n });\n\n // Don't render the initials slot if it's empty\n if (!initials?.children) {\n initials = undefined;\n }\n\n // Render the icon slot *only if* there aren't any initials or image to display\n let icon: AvatarState['icon'] = undefined;\n if (!initials && (!image || imageHidden)) {\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n },\n });\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n id: baseId + '__badge',\n },\n });\n\n let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n // Resolve aria-label and/or aria-labelledby if not provided by the user\n if (!root['aria-label'] && !root['aria-labelledby']) {\n if (name) {\n root['aria-label'] = name;\n\n // Include the badge in labelledby if it exists\n if (badge) {\n root['aria-labelledby'] = root.id + ' ' + badge.id;\n }\n } else if (initials) {\n // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n }\n\n // Add the active state to the aria label\n if (active === 'active' || active === 'inactive') {\n const activeText = DEFAULT_STRINGS[active];\n if (root['aria-labelledby']) {\n // If using aria-labelledby, render a hidden span and append it to the labelledby\n const activeId = baseId + '__active';\n root['aria-labelledby'] += ' ' + activeId;\n activeAriaLabelElement = (\n <span hidden id={activeId}>\n {activeText}\n </span>\n );\n } else if (root['aria-label']) {\n // Otherwise, just append it to the aria-label\n root['aria-label'] += ' ' + activeText;\n }\n }\n }\n\n return {\n size,\n shape,\n active,\n activeAppearance,\n activeAriaLabelElement,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"mappings":"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","names":["React","getNativeElementProps","mergeCallbacks","resolveShorthand","useId","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","size","contextSize","name","shape","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","root","role","id","imageHidden","setImageHidden","useState","undefined","image","defaultProps","alt","hidden","onError","onLoad","initials","required","children","firstInitialOnly","icon","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","components","str","hashCode","len","ch","charCodeAt","shift"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n active: 'active',\n inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { size: contextSize } = useAvatarContext();\n const {\n name,\n size = contextSize ?? (32 as const),\n shape = 'circular',\n active = 'unset',\n activeAppearance = 'ring',\n idForColor,\n } = props;\n let { color = 'neutral' } = props;\n\n // Resolve 'colorful' to a specific color name\n if (color === 'colorful') {\n color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n }\n\n const baseId = useId('avatar-');\n\n const root: AvatarState['root'] = getNativeElementProps(\n 'span',\n {\n role: 'img',\n id: baseId,\n // aria-label and/or aria-labelledby are resolved below\n ...props,\n ref,\n },\n /* excludedPropNames: */ ['name'],\n );\n\n const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n const image: AvatarState['image'] = resolveShorthand(props.image, {\n defaultProps: {\n alt: '',\n role: 'presentation',\n 'aria-hidden': true,\n hidden: imageHidden,\n },\n });\n\n // Hide the image if it fails to load and restore it on a successful load\n if (image) {\n image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n }\n\n // Resolve the initials slot, defaulted to getInitials.\n let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n required: true,\n defaultProps: {\n children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\n },\n });\n\n // Don't render the initials slot if it's empty\n if (!initials?.children) {\n initials = undefined;\n }\n\n // Render the icon slot *only if* there aren't any initials or image to display\n let icon: AvatarState['icon'] = undefined;\n if (!initials && (!image || imageHidden)) {\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n },\n });\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n id: baseId + '__badge',\n },\n });\n\n let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n // Resolve aria-label and/or aria-labelledby if not provided by the user\n if (!root['aria-label'] && !root['aria-labelledby']) {\n if (name) {\n root['aria-label'] = name;\n\n // Include the badge in labelledby if it exists\n if (badge) {\n root['aria-labelledby'] = root.id + ' ' + badge.id;\n }\n } else if (initials) {\n // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n }\n\n // Add the active state to the aria label\n if (active === 'active' || active === 'inactive') {\n const activeText = DEFAULT_STRINGS[active];\n if (root['aria-labelledby']) {\n // If using aria-labelledby, render a hidden span and append it to the labelledby\n const activeId = baseId + '__active';\n root['aria-labelledby'] += ' ' + activeId;\n activeAriaLabelElement = (\n <span hidden id={activeId}>\n {activeText}\n </span>\n );\n } else if (root['aria-label']) {\n // Otherwise, just append it to the aria-label\n root['aria-label'] += ' ' + activeText;\n }\n }\n }\n\n return {\n size,\n shape,\n active,\n activeAppearance,\n activeAriaLabelElement,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"]}
|