@fluentui/react-avatar 9.0.0-rc.1 → 9.0.0-rc.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.
- package/CHANGELOG.json +52 -1
- package/CHANGELOG.md +17 -2
- package/MIGRATION.md +71 -66
- package/SPEC.md +160 -135
- package/lib/Avatar.js.map +1 -1
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/Avatar/Avatar.types.js.map +1 -1
- package/lib/components/Avatar/index.js.map +1 -1
- package/lib/components/Avatar/renderAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatar.js +14 -2
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/getInitials.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib-commonjs/Avatar.js.map +1 -1
- 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.map +1 -1
- package/lib-commonjs/components/Avatar/renderAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatar.js +15 -2
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/getInitials.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,58 @@
|
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 18 Feb 2022 13:33:42 GMT",
|
|
6
|
+
"tag": "@fluentui/react-avatar_v9.0.0-rc.3",
|
|
7
|
+
"version": "9.0.0-rc.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "behowell@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-avatar",
|
|
13
|
+
"commit": "36b34c86e38b362cfda7deb3840f6fac2a860931",
|
|
14
|
+
"comment": "Hide Avatar's image if it fails to load, rather than displaying the broken image icon"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "lingfangao@hotmail.com",
|
|
18
|
+
"package": "@fluentui/react-avatar",
|
|
19
|
+
"commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
|
|
20
|
+
"comment": "fix: Source maps contain original source code"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "behowell@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-avatar",
|
|
25
|
+
"commit": "d80c90385389e1e4eee52400dd7cf4b4dbe067fd",
|
|
26
|
+
"comment": "Update Avatar SPEC.md and MIGRATION.md"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-avatar",
|
|
31
|
+
"comment": "Bump @fluentui/react-badge to v9.0.0-rc.3",
|
|
32
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-avatar",
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.3",
|
|
38
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-avatar",
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
|
|
44
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-avatar",
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3",
|
|
50
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Thu, 10 Feb 2022 08:52:19 GMT",
|
|
6
57
|
"tag": "@fluentui/react-avatar_v9.0.0-rc.1",
|
|
7
58
|
"version": "9.0.0-rc.1",
|
|
8
59
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-avatar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 18 Feb 2022 13:33:42 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.3)
|
|
8
|
+
|
|
9
|
+
Fri, 18 Feb 2022 13:33:42 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.1..@fluentui/react-avatar_v9.0.0-rc.3)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Hide Avatar's image if it fails to load, rather than displaying the broken image icon ([PR #21636](https://github.com/microsoft/fluentui/pull/21636) by behowell@microsoft.com)
|
|
15
|
+
- fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
|
|
16
|
+
- Update Avatar SPEC.md and MIGRATION.md ([PR #21702](https://github.com/microsoft/fluentui/pull/21702) by behowell@microsoft.com)
|
|
17
|
+
- Bump @fluentui/react-badge to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
21
|
+
|
|
7
22
|
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.1)
|
|
8
23
|
|
|
9
|
-
Thu, 10 Feb 2022 08:
|
|
24
|
+
Thu, 10 Feb 2022 08:52:19 GMT
|
|
10
25
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-beta.4..@fluentui/react-avatar_v9.0.0-rc.1)
|
|
11
26
|
|
|
12
27
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -1,19 +1,15 @@
|
|
|
1
1
|
# Avatar Migration
|
|
2
2
|
|
|
3
|
-
## STATUS: WIP 🚧
|
|
4
|
-
|
|
5
|
-
This Migration guide is a work in progress and is not yet ready for use.
|
|
6
|
-
|
|
7
3
|
## Migration from v8
|
|
8
4
|
|
|
9
|
-
The existing `Persona` control supports many more props than the `Avatar` control: notably the extra display text to the side of the image. As such, Avatar is only a direct replacement for Persona in cases where it was only being used to display the image (`hidePersonaDetails` is true).
|
|
5
|
+
The existing `Persona` control supports many more props than the `Avatar` control: notably the extra display text to the side of the image. As such, Avatar is only a direct replacement for `Persona` in cases where it was only being used to display the image (`hidePersonaDetails` is true). To fully replace `Persona`, `Avatar` needs to be used in conjunction with another component that displays additional content.
|
|
10
6
|
|
|
11
7
|
In cases where migration is possible, the following props will need to be renamed:
|
|
12
8
|
|
|
13
9
|
- `text` => `name`
|
|
14
10
|
- `size` converted from an enum to a number, and not all previous sizes are supported:
|
|
15
|
-
- `PersonaSize.size8` => Not Supported. Use the `
|
|
16
|
-
- `PersonaSize.size16` => Not Supported.
|
|
11
|
+
- `PersonaSize.size8` => Not Supported. Use the `PresenceBadge` component since this size of Persona only displays the badge.
|
|
12
|
+
- `PersonaSize.size16` => Not Supported. Use `size={20}`, and optionally add `style={{ width: '16px', height: '16px' }}` if the exact size is needed.
|
|
17
13
|
- `PersonaSize.size24` => `size={24}`
|
|
18
14
|
- `PersonaSize.size28` => `size={28}`
|
|
19
15
|
- `PersonaSize.size32` => `size={32}`
|
|
@@ -21,31 +17,38 @@ In cases where migration is possible, the following props will need to be rename
|
|
|
21
17
|
- `PersonaSize.size48` => `size={48}`
|
|
22
18
|
- `PersonaSize.size56` => `size={56}`
|
|
23
19
|
- `PersonaSize.size72` => `size={72}`
|
|
24
|
-
- `PersonaSize.size100` => Not Supported.
|
|
20
|
+
- `PersonaSize.size100` => Not Supported. Use `size={96}`, and optionally add `style={{ width: '100px', height: '100px' }}` if the exact size is needed.
|
|
25
21
|
- `PersonaSize.size120` => `size={120}`
|
|
26
22
|
- `coinSize` => Use `size`
|
|
27
|
-
- `imageUrl` => `image`
|
|
28
|
-
- `imageAlt` =>
|
|
29
|
-
- `imageInitials` => `
|
|
30
|
-
- `presence` =>
|
|
31
|
-
- `
|
|
32
|
-
- `
|
|
33
|
-
- `
|
|
34
|
-
- `
|
|
35
|
-
- `
|
|
36
|
-
- `
|
|
37
|
-
- `
|
|
38
|
-
- `
|
|
39
|
-
- `
|
|
40
|
-
- `
|
|
41
|
-
|
|
23
|
+
- `imageUrl` => `image={{ src: '...' }}`
|
|
24
|
+
- `imageAlt` => The Avatar's `aria-label` can be used.
|
|
25
|
+
- `imageInitials` => `initials`
|
|
26
|
+
- `presence` => `badge` (see the `PresenceBadge` component for more details)
|
|
27
|
+
- `PersonaPresence.none` => (Default)
|
|
28
|
+
- `PersonaPresence.away` => `badge={{ status: 'away' }}`
|
|
29
|
+
- `PersonaPresence.blocked` => Not Supported.
|
|
30
|
+
- `PersonaPresence.busy` => `badge={{ status: 'busy' }}`
|
|
31
|
+
- `PersonaPresence.dnd` => `badge={{ status: 'doNotDisturb' }}`
|
|
32
|
+
- `PersonaPresence.offline` => `badge={{ status: 'offline' }}`
|
|
33
|
+
- `PersonaPresence.online` => `badge={{ status: 'available' }}`
|
|
34
|
+
- `presenceColors` => Not Supported. However, the badge can be styled using CSS. E.g. `badge={{ style: { color: '...' } }}`
|
|
35
|
+
- `presenceTitle` => Not Supported.
|
|
36
|
+
- `isOutOfOffice` => `badge={{ status: ..., outOfOffice: true }}`
|
|
37
|
+
- `showUnknownPersonaCoin` => Not Supported. An approximation is: `icon={<QuestionRegular />}`
|
|
38
|
+
- `initialsColor` => `color="colorful"`, or specify a color by name like `color="darkRed"`
|
|
39
|
+
- `showInitialsUntilImageLoad` => Not Supported. This is always true for `Avatar`.
|
|
40
|
+
- `imageShouldFadeIn` => Not Supported. Add a CSS class to the image if desired: `image={{ className: 'myFadeInClass' }}`
|
|
41
|
+
- `imageShouldStartVisible` => Not Supported. This is always true for `Avatar`.
|
|
42
|
+
- `onPhotoLoadingStateChange` => Add event listeners to the image slot for the `<img>` events: `image={{ onLoad: ..., onError: ... }}`
|
|
43
|
+
- `onRender*` => Avatar's slots allow render functions, such as `image={(Component, props) => <Component {...props} />}`
|
|
44
|
+
- To render a square image, use `shape="square"`.
|
|
42
45
|
|
|
43
46
|
## Migration from v0
|
|
44
47
|
|
|
45
48
|
The v0 Avatar maps more closely to the converged Avatar.
|
|
46
49
|
|
|
47
|
-
- `variables` => Replaced by
|
|
48
|
-
- `design` => Replaced by
|
|
50
|
+
- `variables` => Replaced by theme
|
|
51
|
+
- `design` => Replaced by theme
|
|
49
52
|
- `accessibility` => Not needed
|
|
50
53
|
- `size` is converted from `SizeValue` to a number:
|
|
51
54
|
- `size="smallest"` => `size={20}`
|
|
@@ -55,47 +58,49 @@ The v0 Avatar maps more closely to the converged Avatar.
|
|
|
55
58
|
- `size="large"` => `size={44}`
|
|
56
59
|
- `size="larger"` => `size={64}`
|
|
57
60
|
- `size="largest"` => `size={96}`
|
|
61
|
+
- `getInitials` => Set the initials directly: `initials={getInitials(name)}`
|
|
62
|
+
- `as` => Only allows `as="span"` (which is the default)
|
|
58
63
|
|
|
59
64
|
## Property mapping
|
|
60
65
|
|
|
61
|
-
| v8 `Persona`
|
|
62
|
-
|
|
|
63
|
-
| text | name | name
|
|
64
|
-
| size (PersonaSize enum) | size (SizeValue) | size (number)
|
|
65
|
-
| coinSize | -
|
|
66
|
-
| imageUrl | image (slot) | image
|
|
67
|
-
| imageAlt | -
|
|
68
|
-
| imageInitials | label (slot) |
|
|
69
|
-
| -
|
|
70
|
-
| presence | status (slot) | badge (slot)
|
|
71
|
-
| presenceColors | -
|
|
72
|
-
| presenceTitle | -
|
|
73
|
-
| initialsColor | -
|
|
74
|
-
|
|
|
75
|
-
| -
|
|
76
|
-
| showUnknownPersonaCoin | -
|
|
77
|
-
| className | className | className
|
|
78
|
-
| -
|
|
79
|
-
| -
|
|
80
|
-
| -
|
|
81
|
-
| -
|
|
82
|
-
| -
|
|
83
|
-
| -
|
|
84
|
-
| -
|
|
85
|
-
| -
|
|
86
|
-
| secondaryText | -
|
|
87
|
-
| showSecondaryText | -
|
|
88
|
-
| tertiaryText | -
|
|
89
|
-
| optionalText | -
|
|
90
|
-
| isOutOfOffice | -
|
|
91
|
-
| hidePersonaDetails | -
|
|
92
|
-
| showInitialsUntilImageLoad | -
|
|
93
|
-
| imageShouldFadeIn | -
|
|
94
|
-
| imageShouldStartVisible | -
|
|
95
|
-
| onPhotoLoadingStateChange | -
|
|
96
|
-
| onRenderInitials | -
|
|
97
|
-
| onRenderPersonaCoin | -
|
|
98
|
-
| onRenderPrimaryText | -
|
|
99
|
-
| onRenderSecondaryText | -
|
|
100
|
-
| onRenderTertiaryText | -
|
|
101
|
-
| onRenderOptionalText | -
|
|
66
|
+
| v8 `Persona` | v0 `Avatar` | v9 `Avatar` |
|
|
67
|
+
| ---------------------------- | ------------------ | --------------------------------------- |
|
|
68
|
+
| `text` | `name` | `name` |
|
|
69
|
+
| `size` (PersonaSize enum) | `size` (SizeValue) | `size` (number) |
|
|
70
|
+
| `coinSize` | - | - |
|
|
71
|
+
| `imageUrl` | `image` (slot) | `src` prop of the `image` slot |
|
|
72
|
+
| `imageAlt` | - | `aria-label` |
|
|
73
|
+
| `imageInitials` | `label` (slot) | `initials` (slot) |
|
|
74
|
+
| - | `getInitials` | - |
|
|
75
|
+
| `presence` | `status` (slot) | `badge` (slot) |
|
|
76
|
+
| `presenceColors` | - | - |
|
|
77
|
+
| `presenceTitle` | - | - |
|
|
78
|
+
| `initialsColor` | - | `color` |
|
|
79
|
+
| | - | `idForColor` |
|
|
80
|
+
| - | `icon` (slot) | `icon` (slot) |
|
|
81
|
+
| `showUnknownPersonaCoin` | - | - |
|
|
82
|
+
| `className` | `className` | `className` |
|
|
83
|
+
| - | `square` | `shape` |
|
|
84
|
+
| - | - | `active` |
|
|
85
|
+
| - | - | `activeAppearance` |
|
|
86
|
+
| - | `styles` | (theme) |
|
|
87
|
+
| - | `variables` | (theme) |
|
|
88
|
+
| - | `design` | (theme) |
|
|
89
|
+
| - | `accessibility` | - |
|
|
90
|
+
| - | `as` | - |
|
|
91
|
+
| `secondaryText` | - | - |
|
|
92
|
+
| `showSecondaryText` | - | - |
|
|
93
|
+
| `tertiaryText` | - | - |
|
|
94
|
+
| `optionalText` | - | - |
|
|
95
|
+
| `isOutOfOffice` | - | `outOfOffice` prop of the `badge` slot |
|
|
96
|
+
| `hidePersonaDetails` | - | - |
|
|
97
|
+
| `showInitialsUntilImageLoad` | - | - |
|
|
98
|
+
| `imageShouldFadeIn` | - | - |
|
|
99
|
+
| `imageShouldStartVisible` | - | - |
|
|
100
|
+
| `onPhotoLoadingStateChange` | - | `image={{ onLoad: ..., onError: ... }}` |
|
|
101
|
+
| `onRenderInitials` | - | Render function for the `initials` slot |
|
|
102
|
+
| `onRenderPersonaCoin` | - | Render function for the Avatar |
|
|
103
|
+
| `onRenderPrimaryText` | - | - |
|
|
104
|
+
| `onRenderSecondaryText` | - | - |
|
|
105
|
+
| `onRenderTertiaryText` | - | - |
|
|
106
|
+
| `onRenderOptionalText` | - | - |
|
package/SPEC.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
The Avatar component represents a person or entity. It displays the person's image, initials, or an icon, and can be either circular or square.
|
|
8
8
|
|
|
9
|
-
Note: The Avatar control has been mostly implemented already. Visit [Avatar Storybook Examples](
|
|
9
|
+
Note: The Avatar control has been mostly implemented already. Visit [Avatar Storybook Examples](https://fluentuipr.z22.web.core.windows.net/heads/master/react-components/storybook/index.html?path=/docs/components-avatar--default) to see the current state of the implementation.
|
|
10
10
|
|
|
11
11
|
## Prior Art
|
|
12
12
|
|
|
@@ -35,25 +35,34 @@ Both components support showing a badge to indicate status, but they have differ
|
|
|
35
35
|
|
|
36
36
|
## Sample Code
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
Display a user's initials:
|
|
39
39
|
|
|
40
40
|
```jsx
|
|
41
41
|
<Avatar name="Miguel Garcia" />
|
|
42
|
-
<Avatar size={72} name="Mona Kane" image="./MonaKane.jpg" />
|
|
43
|
-
<Avatar shape="square" icon={<IDBadgeIcon />} />
|
|
44
42
|
```
|
|
45
43
|
|
|
46
|
-
|
|
44
|
+
Display a user's image:
|
|
47
45
|
|
|
48
46
|
```jsx
|
|
49
|
-
<Avatar name="
|
|
47
|
+
<Avatar size={72} name="Mona Kane" image={{ src: './MonaKane.jpg' }} />
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Display an icon only:
|
|
51
|
+
|
|
52
|
+
```jsx
|
|
53
|
+
<Avatar aria-label="Team" icon={<PeopleTeamRegular />} shape="square" />
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Display a badge:
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
<Avatar name="Allan Munger" badge={{ status: 'busy' }} />
|
|
50
60
|
```
|
|
51
61
|
|
|
52
62
|
With active state indication:
|
|
53
63
|
|
|
54
64
|
```jsx
|
|
55
|
-
<Avatar name="Daisy Phillips" active=
|
|
56
|
-
<Avatar name="Robin Counts" active="inactive" />
|
|
65
|
+
<Avatar name="Daisy Phillips" active={isUserActive ? 'active' : 'inactive'} activeAppearance="ring-shadow" />
|
|
57
66
|
```
|
|
58
67
|
|
|
59
68
|
## Variants
|
|
@@ -65,37 +74,12 @@ The Avatar supports color variants when displaying initials or an icon:
|
|
|
65
74
|
- **Neutral** - Gray (default)
|
|
66
75
|
- **Brand** - Brand colors from the theme
|
|
67
76
|
- **Colorful** - Pick from a list of pre-defined Avatar colors. The color will be assigned based on a hash of the name
|
|
68
|
-
(to "randomly" assign a person a color). The color
|
|
77
|
+
(to "randomly" assign a person a color). The color name (like `darkRed`) can also be specified explicitly in case the use case
|
|
69
78
|
requires a different algorithm to pick the color.
|
|
70
79
|
|
|
71
80
|
### Shape
|
|
72
81
|
|
|
73
|
-
The Avatar
|
|
74
|
-
|
|
75
|
-
```jsx
|
|
76
|
-
<Avatar
|
|
77
|
-
icon={<ChatBotIcon />}
|
|
78
|
-
display="icon"
|
|
79
|
-
tokens={{
|
|
80
|
-
width: 'calc(var(--avatar-height) * 1.125)',
|
|
81
|
-
background: `url('${hexagonSvg}') 0px/contain no-repeat`,
|
|
82
|
-
borderRadius: '0',
|
|
83
|
-
}}
|
|
84
|
-
/>
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
Where hexagonSvg is defined as:
|
|
88
|
-
|
|
89
|
-
```js
|
|
90
|
-
hexagonSvg =
|
|
91
|
-
'data:image/svg+xml;utf8,' +
|
|
92
|
-
'<svg width="36" height="32" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg">' +
|
|
93
|
-
'<path fill="rgb(232,232,232)" d="M0.407926 17.528C-0.135976 16.5859 -0.135975 15.4141 0.407926 14.472' +
|
|
94
|
-
'L7.91541 1.46793C8.44076 0.557947 9.39444 0 10.4245 0H25.5755C26.6056 0 27.5592 0.557951 28.0846 1.46793' +
|
|
95
|
-
'L35.5921 14.472C36.136 15.4141 36.136 16.5859 35.5921 17.528L28.0846 30.5321' +
|
|
96
|
-
'C27.5592 31.4421 26.6056 32 25.5755 32H10.4245C9.39443 32 8.44076 31.4421 7.91541 30.5321L0.407926 17.528Z"/>' +
|
|
97
|
-
'</svg>';
|
|
98
|
-
```
|
|
82
|
+
The Avatar supports a circular and square (with rounded corners) shape.
|
|
99
83
|
|
|
100
84
|
## API
|
|
101
85
|
|
|
@@ -104,97 +88,112 @@ From [Avatar.types.tsx](https://github.com/microsoft/fluentui/blob/master/packag
|
|
|
104
88
|
### Slots
|
|
105
89
|
|
|
106
90
|
- `root` - The root element of the Avatar.
|
|
107
|
-
- `image` - The Avatar's image, if
|
|
108
|
-
- `
|
|
91
|
+
- `image` - The Avatar's image, if provided.
|
|
92
|
+
- `initials` - The text shown when there's no image. Defaults to the initials derived from `name`.
|
|
109
93
|
- `icon` - Icon displayed when there's no image or intials available.
|
|
110
|
-
- `badge` -
|
|
94
|
+
- `badge` - PresenceBadge to show the avatar's status.
|
|
111
95
|
|
|
112
96
|
### Props
|
|
113
97
|
|
|
114
98
|
```ts
|
|
115
|
-
export type
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
99
|
+
export type AvatarSlots = {
|
|
100
|
+
root: Slot<'span'>;
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* The Avatar's image.
|
|
104
|
+
*
|
|
105
|
+
* Usage e.g.: `image={{ src: '...' }}`
|
|
106
|
+
*/
|
|
107
|
+
image?: Slot<'img'>;
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* (optional) Custom initials.
|
|
111
|
+
*
|
|
112
|
+
* It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
|
|
113
|
+
* using the `getInitials` function.
|
|
114
|
+
*
|
|
115
|
+
* The initials are displayed when there is no image (including while the image is loading).
|
|
116
|
+
*/
|
|
117
|
+
initials?: Slot<'span'>;
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Icon to be displayed when the avatar doesn't have an image or initials.
|
|
121
|
+
*
|
|
122
|
+
* @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
|
|
123
|
+
*/
|
|
124
|
+
icon?: Slot<'span'>;
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Badge to show the avatar's presence status.
|
|
128
|
+
*/
|
|
129
|
+
badge?: Slot<typeof PresenceBadge>;
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
|
|
133
|
+
/**
|
|
134
|
+
* The name of the person or entity represented by this Avatar. This should always be provided if it is available.
|
|
135
|
+
*
|
|
136
|
+
* The name will be used to determine the initials displayed when there is no icon, as well as provided to
|
|
137
|
+
* accessibility tools.
|
|
138
|
+
*/
|
|
139
|
+
name?: string;
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Size of the avatar in pixels.
|
|
143
|
+
*
|
|
144
|
+
* Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
|
|
145
|
+
* based on design guidelines for the Avatar control.
|
|
146
|
+
*
|
|
147
|
+
* If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
|
|
148
|
+
* to override the rendered size.
|
|
149
|
+
*
|
|
150
|
+
* For example, to set the avatar to 45px in size:
|
|
151
|
+
* `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`
|
|
152
|
+
*
|
|
153
|
+
* @defaultvalue 32
|
|
154
|
+
*/
|
|
155
|
+
size?: 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* The avatar can have a circular or square shape.
|
|
159
|
+
* @defaultvalue circular
|
|
160
|
+
*/
|
|
161
|
+
shape?: 'circular' | 'square';
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* Optional activity indicator
|
|
165
|
+
* * active: the avatar will be decorated according to activeAppearance
|
|
166
|
+
* * inactive: the avatar will be reduced in size and partially transparent
|
|
167
|
+
* * unset: normal display
|
|
168
|
+
*
|
|
169
|
+
* @defaultvalue unset
|
|
170
|
+
*/
|
|
171
|
+
active?: 'active' | 'inactive' | 'unset';
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* The appearance when `active="active"`
|
|
175
|
+
*
|
|
176
|
+
* @defaultvalue ring
|
|
177
|
+
*/
|
|
178
|
+
activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* The color when displaying either an icon or initials.
|
|
182
|
+
* * neutral (default): gray
|
|
183
|
+
* * brand: color from the brand palette
|
|
184
|
+
* * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
|
|
185
|
+
* * [AvatarNamedColor]: a specific color from the theme
|
|
186
|
+
*
|
|
187
|
+
* @defaultvalue neutral
|
|
188
|
+
*/
|
|
189
|
+
color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* Specify a string to be used instead of the name, to determine which color to use when color="colorful".
|
|
193
|
+
* Use this when a name is not available, but there is another unique identifier that can be used instead.
|
|
194
|
+
*/
|
|
195
|
+
idForColor?: string | undefined;
|
|
196
|
+
};
|
|
198
197
|
|
|
199
198
|
/**
|
|
200
199
|
* A specific named color for the Avatar
|
|
@@ -234,21 +233,36 @@ export type AvatarNamedColor =
|
|
|
234
233
|
|
|
235
234
|
## Structure
|
|
236
235
|
|
|
236
|
+
JSX Tree:
|
|
237
|
+
|
|
238
|
+
```jsx
|
|
239
|
+
<slots.root {...slotProps.root}>
|
|
240
|
+
{slots.initials && <slots.initials {...slotProps.initials} />}
|
|
241
|
+
{slots.icon && <slots.icon {...slotProps.icon} />}
|
|
242
|
+
{slots.image && <slots.image {...slotProps.image} />}
|
|
243
|
+
{slots.badge && <slots.badge {...slotProps.badge} />}
|
|
244
|
+
</slots.root>
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
Resulting HTML (in this example, "avatar-42" is an ID generated by `useId`):
|
|
248
|
+
|
|
237
249
|
```html
|
|
238
|
-
<span class="root">
|
|
239
|
-
<!--
|
|
240
|
-
<span class="
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
250
|
+
<span class="{root}" id="avatar-42" aria-label="Miguel Garcia" aria-labelledby="avatar-42 avatar-42__badge">
|
|
251
|
+
<!-- Only one of initials OR icon will be rendered, never both -->
|
|
252
|
+
<span class="{initials}" aria-hidden="true">MG</span>
|
|
253
|
+
<span class="{icon}" aria-hidden="true"><svg>...</svg></span>
|
|
254
|
+
|
|
255
|
+
<!-- The Image -->
|
|
256
|
+
<img class="{image}" src="..." aria-hidden="true" role="presentation" alt="" />
|
|
257
|
+
|
|
258
|
+
<!-- The PresenceBadge's HTML is rendered here -->
|
|
259
|
+
<span class="{PresenceBadge}" id="avatar-42__badge" aria-hidden="true">...</span>
|
|
246
260
|
</span>
|
|
247
261
|
```
|
|
248
262
|
|
|
249
263
|
## Migration
|
|
250
264
|
|
|
251
|
-
See [MIGRATION.md](
|
|
265
|
+
See [MIGRATION.md](./MIGRATION.md).
|
|
252
266
|
|
|
253
267
|
## Behaviors
|
|
254
268
|
|
|
@@ -257,8 +271,8 @@ See [MIGRATION.md](https://github.com/microsoft/fluentui/blob/master/packages/re
|
|
|
257
271
|
- **Display** - The Avatar will use the following priority:
|
|
258
272
|
|
|
259
273
|
- The `image` property, if provided.
|
|
274
|
+
- Initials derived from the `name` property (this is always displayed, so it is visible while the image is loading, and if the image fails to load).
|
|
260
275
|
- The `icon` property, if provided.
|
|
261
|
-
- Initials derived from the `name` property (this is also displayed while the image is loading).
|
|
262
276
|
- If no `image`, `icon`, or `name` is provided, the default "person" icon will be used.
|
|
263
277
|
|
|
264
278
|
- **Active** - The `active` property affects the display of the avatar if set. There will be an animation when switching between active and inactive.
|
|
@@ -271,11 +285,22 @@ See [MIGRATION.md](https://github.com/microsoft/fluentui/blob/master/packages/re
|
|
|
271
285
|
The Avatar is non-interactive.
|
|
272
286
|
|
|
273
287
|
- **Keyboard** - Not keyboard focusable.
|
|
274
|
-
- **Mouse**
|
|
275
|
-
- Hover: Show tooltip (TODO: Need to figure out how the tooltip content will be generated based on the name and status).
|
|
276
|
-
- Click: No action
|
|
288
|
+
- **Mouse** - Nothing
|
|
277
289
|
- **Touch** - Nothing
|
|
278
290
|
|
|
279
291
|
## Accessibility
|
|
280
292
|
|
|
281
|
-
|
|
293
|
+
The Avatar presents as a single img element to accessibility tools, regardless of what it is displaying (image, initials, or icon).
|
|
294
|
+
|
|
295
|
+
- The Avatar's root has `role="img"`
|
|
296
|
+
- All other slots have `aria-hidden="true"`.
|
|
297
|
+
- The `<img>` additionally has `alt="" role="presentation"`
|
|
298
|
+
|
|
299
|
+
The Avatar root's label is determined using the following priority:
|
|
300
|
+
|
|
301
|
+
- If `aria-label` and/or `aria-labelledby` is provided on props, do not add anything else.
|
|
302
|
+
- If `name` is provided, set the root's `aria-label={name}`.
|
|
303
|
+
- If a badge is present, _also_ set the root's `aria-labelledby={root.id + ' ' + badge.id}`.
|
|
304
|
+
- This means the Avatar is labelled by both its root and badge slots, and results in a label like "Miguel Garcia Busy".
|
|
305
|
+
- If there's no `name`, but `initials` are provided, set the root's `aria-labelledby={initials.id}`.
|
|
306
|
+
- If a badge is present, _instead_ set the root's `aria-labelledby={initials.id + ' ' + badge.id}`.
|
package/lib/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"../src/","sources":["Avatar.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Avatar/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","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"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarSlots = {\n root: Slot<'span'>;\n\n /**\n * The Avatar's image.\n *\n * Usage e.g.: `image={{ src: '...' }}`\n */\n image?: Slot<'img'>;\n\n /**\n * (optional) Custom initials.\n *\n * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n * using the `getInitials` function.\n *\n * The initials are displayed when there is no image (including while the image is loading).\n */\n initials?: Slot<'span'>;\n\n /**\n * Icon to be displayed when the avatar doesn't have an image or initials.\n *\n * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)\n */\n icon?: Slot<'span'>;\n\n /**\n * Badge to show the avatar's presence status.\n */\n badge?: Slot<typeof PresenceBadge>;\n};\n\ntype AvatarCommons = {\n /**\n * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n *\n * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n * accessibility tools.\n */\n name?: string;\n\n /**\n * Size of the avatar in pixels.\n *\n * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n * based on design guidelines for the Avatar control.\n *\n * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n * to override the rendered size.\n *\n * For example, to set the avatar to 45px in size:\n * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n *\n * @defaultvalue 32\n */\n size: 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n /**\n * The avatar can have a circular or square shape.\n * @defaultvalue circular\n */\n shape: 'circular' | 'square';\n\n /**\n * Optional activity indicator\n * * active: the avatar will be decorated according to activeAppearance\n * * inactive: the avatar will be reduced in size and partially transparent\n * * unset: normal display\n *\n * @defaultvalue unset\n */\n active: 'active' | 'inactive' | 'unset';\n\n /**\n * The appearance when `active=\"active\"`\n *\n * @defaultvalue ring\n */\n activeAppearance: 'ring' | 'shadow' | 'ring-shadow';\n\n /**\n * The color when displaying either an icon or initials.\n * * neutral (default): gray\n * * brand: color from the brand palette\n * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n * * [AvatarNamedColor]: a specific color from the theme\n *\n * @defaultvalue neutral\n */\n color: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n /**\n * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n * Use this when a name is not available, but there is another unique identifier that can be used instead.\n */\n idForColor: string | undefined;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n | 'darkRed'\n | 'cranberry'\n | 'red'\n | 'pumpkin'\n | 'peach'\n | 'marigold'\n | 'gold'\n | 'brass'\n | 'brown'\n | 'forest'\n | 'seafoam'\n | 'darkGreen'\n | 'lightTeal'\n | 'teal'\n | 'steel'\n | 'blue'\n | 'royalBlue'\n | 'cornflower'\n | 'navy'\n | 'lavender'\n | 'purple'\n | 'grape'\n | 'lilac'\n | 'pink'\n | 'magenta'\n | 'plum'\n | 'beige'\n | 'mink'\n | 'platinum'\n | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & Partial<AvatarCommons>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n AvatarCommons & {\n /**\n * The Avatar's color, with `'colorful'` resolved to a named color\n */\n color: Exclude<AvatarCommons['color'], 'colorful'>;\n };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CADrB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJlB,CADF;AAQD,CAXM","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 </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -4,6 +4,7 @@ import { getInitials } from '../../utils/index';
|
|
|
4
4
|
import { PersonRegular } from '@fluentui/react-icons';
|
|
5
5
|
import { PresenceBadge } from '@fluentui/react-badge';
|
|
6
6
|
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
7
|
+
import { useMergedEventCallbacks } from '@fluentui/react-utilities';
|
|
7
8
|
export const useAvatar_unstable = (props, ref) => {
|
|
8
9
|
var _a;
|
|
9
10
|
|
|
@@ -59,13 +60,24 @@ export const useAvatar_unstable = (props, ref) => {
|
|
|
59
60
|
});
|
|
60
61
|
}
|
|
61
62
|
|
|
63
|
+
const [imageHidden, setImageHidden] = React.useState(undefined);
|
|
62
64
|
const image = resolveShorthand(props.image, {
|
|
63
65
|
defaultProps: {
|
|
64
66
|
alt: '',
|
|
65
67
|
role: 'presentation',
|
|
66
|
-
'aria-hidden': true
|
|
68
|
+
'aria-hidden': true,
|
|
69
|
+
hidden: imageHidden
|
|
67
70
|
}
|
|
68
|
-
});
|
|
71
|
+
}); // Hide the image if it fails to load and restore it on a successful load
|
|
72
|
+
|
|
73
|
+
const imageOnError = useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onError, () => setImageHidden(true));
|
|
74
|
+
const imageOnLoad = useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onLoad, () => setImageHidden(undefined));
|
|
75
|
+
|
|
76
|
+
if (image) {
|
|
77
|
+
image.onError = imageOnError;
|
|
78
|
+
image.onLoad = imageOnLoad;
|
|
79
|
+
}
|
|
80
|
+
|
|
69
81
|
const badge = resolveShorthand(props.badge, {
|
|
70
82
|
defaultProps: {
|
|
71
83
|
size: getBadgeSize(size),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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 } from '@fluentui/react-shared-contexts';\nimport { useMergedEventCallbacks } from '@fluentui/react-utilities';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = 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 // 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'),\n 'aria-hidden': true,\n },\n });\n\n // Render the icon slot *only if* there aren't any initials to display.\n let icon: AvatarState['icon'] = undefined;\n if (!initials?.children) {\n initials = undefined;\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n id: baseId + '__initials',\n },\n });\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 const imageOnError = useMergedEventCallbacks(image?.onError, () => setImageHidden(true));\n const imageOnLoad = useMergedEventCallbacks(image?.onLoad, () => setImageHidden(undefined));\n if (image) {\n image.onError = imageOnError;\n image.onLoad = imageOnLoad;\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n role: 'presentation',\n 'aria-hidden': true,\n id: baseId + '__badge',\n },\n });\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\n return {\n size,\n name,\n shape,\n active,\n activeAppearance,\n color,\n idForColor,\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 'darkRed',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'darkGreen',\n 'lightTeal',\n 'teal',\n 'steel',\n 'blue',\n 'royalBlue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,eAAe,GAAG,YAAxB,C,CAEP;AACA;AACA;;AAEA,MAAM,iBAAiB,GAAG;AACxB,EAAA,UAAU,EAAE,MADY;AAExB,EAAA,WAAW,EAAE,OAFW;AAGxB,EAAA,WAAW,EAAE,OAHW;AAIxB,EAAA,WAAW,EAAE,OAJW;AAKxB,EAAA,WAAW,EAAE,OALW;AAMxB,EAAA,WAAW,EAAE,OANW;AAOxB,EAAA,WAAW,EAAE;AAPW,CAA1B;AAUA,MAAM,eAAe,GAAG;AACtB,EAAA,SAAS,EAAE,iBAAiB,CAAC,UADP;AAEtB,EAAA,MAAM,EAAE,iBAAiB,CAAC,WAFJ;AAGtB,EAAA,IAAI,EAAE,iBAAiB,CAAC,WAHF;AAItB,EAAA,MAAM,EAAE,iBAAiB,CAAC,WAJJ;AAKtB,EAAA,IAAI,EAAE,iBAAiB,CAAC,WALF;AAMtB,EAAA,MAAM,EAAE,iBAAiB,CAAC,WANJ;AAOtB,EAAA,SAAS,EAAE,iBAAiB,CAAC;AAPP,CAAxB;AAUA,MAAM,cAAc,GAAG;AACrB,EAAA,aAAa,EAAE,mCADM;AAErB,EAAA,aAAa,EAAE,mCAFM;AAGrB,EAAA,aAAa,EAAE,mCAHM;AAIrB,EAAA,aAAa,EAAE,mCAJM;AAKrB,EAAA,aAAa,EAAE,mCALM;AAMrB,EAAA,aAAa,EAAE,mCANM;AAOrB,EAAA,WAAW,EAAE,mCAPQ;AAQrB,EAAA,QAAQ,EAAE,mCARW;AASrB,EAAA,MAAM,EAAE;AATa,CAAvB;AAYA,MAAM,UAAU,GAAG;AACjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aADhB;AAEjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aAFhB;AAGjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aAHhB;AAIjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aAJhB;AAKjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aALhB;AAMjB,EAAA,gBAAgB,EAAE,cAAc,CAAC,aANhB;AAOjB,EAAA,QAAQ,EAAE,cAAc,CAAC,WAPR;AAQjB,EAAA,UAAU,EAAE,cAAc,CAAC,QARV;AASjB,EAAA,UAAU,EAAE,cAAc,CAAC;AATV,CAAnB;;AAYA,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAwJA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgBA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAmIA,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,KAAR;AAAe,IAAA,MAAf;AAAuB,IAAA,gBAAvB;AAAyC,IAAA;AAAzC,MAAmD,KAAzD;AAEA,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM,WAAW,GAAG,CAAC,MAAM,CAAC,IAAR,EAAc,UAAU,CAAC,IAAD,CAAxB,EAAgC,WAAW,CAAC,KAAD,CAA3C,CAApB;;AAEA,MAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;AACD,GAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,kBAAxB;AACD,GAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,eAAxB;AACD,GAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,aAAxB;AACD,GAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,aAAxB;AACD,GAFM,MAEA;AACL,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,SAAxB;AACD;;AAED,MAAI,KAAK,KAAK,QAAd,EAAwB;AACtB,QAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;AACD,KAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;AACD,KAFM,MAEA;AACL,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;AACD;AACF;;AAED,MAAI,MAAM,KAAK,QAAX,IAAuB,MAAM,KAAK,UAAtC,EAAkD;AAChD,IAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,gBAAxB;;AAEA,QAAI,gBAAgB,KAAK,MAArB,IAA+B,gBAAgB,KAAK,aAAxD,EAAuE;AACrE,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,IAAxB;;AAEA,UAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,SAAxB;AACD,OAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,WAAxB;AACD,OAFM,MAEA;AACL,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,YAAxB;AACD;AACF;;AAED,QAAI,gBAAgB,KAAK,QAArB,IAAiC,gBAAgB,KAAK,aAA1D,EAAyE;AACvE,UAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,OAAxB;AACD,OAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,OAAxB;AACD,OAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;AACD,OAFM,MAEA;AACL,QAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;AACD;AACF,KAzB+C,CA2BhD;;;AACA,QAAI,MAAM,KAAK,UAAf,EAA2B;AACzB,MAAA,WAAW,CAAC,IAAZ,CAAiB,MAAM,CAAC,QAAxB;AACD;AACF;;AAED,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,eAAD,EAAkB,GAAG,WAArB,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,KAAR,EAAe,IAAI,IAAI,EAAR,IAAc,MAAM,CAAC,UAApC,EAAgD,KAAK,CAAC,KAAN,CAAY,SAA5D,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,KAAR,EAAe,KAAK,CAAC,KAAN,CAAY,SAA3B,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,KAAK,CAAC,QAAN,CAAe,SAArC,CAAvC;AACD;;AAED,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,QAAI,aAAJ;;AACA,QAAI,IAAI,IAAI,EAAZ,EAAgB;AACd,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFD,MAEO,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA,IAAI,IAAI,IAAI,EAAZ,EAAgB;AACrB,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD,KAFM,MAEA;AACL,MAAA,aAAa,GAAG,MAAM,CAAC,MAAvB;AACD;;AAED,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,aAAtB,EAAqC,KAAK,CAAC,IAAN,CAAW,SAAhD,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CAtGM","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":["components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarState } from './Avatar.types';\n\nexport const avatarClassName = 'fui-Avatar';\n\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n duration50: '50ms',\n duration100: '100ms',\n duration150: '150ms',\n duration200: '200ms',\n duration300: '300ms',\n duration400: '400ms',\n duration500: '500ms',\n};\n\nconst animationTiming = {\n ultraFast: animationDuration.duration50,\n faster: animationDuration.duration100,\n fast: animationDuration.duration150,\n normal: animationDuration.duration200,\n slow: animationDuration.duration300,\n slower: animationDuration.duration400,\n ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n linear: 'linear',\n};\n\nconst animations = {\n fastOutSlowInMax: animationLines.decelerateMax,\n fastOutSlowInMid: animationLines.decelerateMid,\n fastOutSlowInMin: animationLines.decelerateMin,\n slowOutFastInMax: animationLines.accelerateMax,\n slowOutFastInMid: animationLines.accelerateMid,\n slowOutFastInMin: animationLines.accelerateMin,\n fastEase: animationLines.maxEasyEase,\n normalEase: animationLines.easyEase,\n nullEasing: animationLines.linear,\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightRegular,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n },\n },\n\n ring: {\n ':before': {\n ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n ':before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n ':before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n ':before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { ':before': { boxShadow: tokens.shadow4 } },\n shadow8: { ':before': { boxShadow: tokens.shadow8 } },\n shadow16: { ':before': { boxShadow: tokens.shadow16 } },\n shadow28: { ':before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n ':before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n ...shorthands.borderRadius('inherit'),\n },\n\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nconst useSizeStyles = makeStyles({\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n },\n brand: {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n },\n darkRed: {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n },\n darkGreen: {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n },\n lightTeal: {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n },\n royalBlue: {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n rootClasses.push(styles.textBody1Strong);\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassName, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);\n }\n\n if (state.image) {\n state.image.className = mergeClasses(styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(styles.iconInitials, iconSizeClass, state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC","sourcesContent":["export * from './Avatar';\nexport * from './utils/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["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","sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n * so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic: Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n * CJK Unified Ideographs Extension B\n */\n// eslint-disable-next-line @fluentui/max-len\nconst UNSUPPORTED_TEXT_REGEX: RegExp = /[\\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]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean): string {\n let initials = '';\n\n const splits: string[] = displayName.split(' ');\n\n if (splits.length === 2) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[1].charAt(0).toUpperCase();\n } else if (splits.length === 3) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[2].charAt(0).toUpperCase();\n } else if (splits.length !== 0) {\n initials += splits[0].charAt(0).toUpperCase();\n }\n\n if (isRtl && initials.length > 1) {\n return initials.charAt(1) + initials.charAt(0);\n }\n\n return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n displayName = displayName.trim();\n\n return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n */\nexport function getInitials(\n displayName: string | undefined | null,\n isRtl: boolean,\n allowPhoneInitials?: boolean,\n): string {\n if (!displayName) {\n return '';\n }\n\n displayName = cleanupDisplayName(displayName);\n\n // For names containing CJK characters, and phone numbers, we don't display initials\n if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {\n return '';\n }\n\n return getInitialsLatin(displayName, isRtl);\n}\n"],"sourceRoot":"../src/"}
|
package/lib/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { getInitials } from './getInitials';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Avatar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Avatar/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["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","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"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Avatar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["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","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 </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -17,6 +17,8 @@ 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
|
+
const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
21
|
+
|
|
20
22
|
const useAvatar_unstable = (props, ref) => {
|
|
21
23
|
var _a;
|
|
22
24
|
|
|
@@ -72,13 +74,24 @@ const useAvatar_unstable = (props, ref) => {
|
|
|
72
74
|
});
|
|
73
75
|
}
|
|
74
76
|
|
|
77
|
+
const [imageHidden, setImageHidden] = React.useState(undefined);
|
|
75
78
|
const image = react_utilities_1.resolveShorthand(props.image, {
|
|
76
79
|
defaultProps: {
|
|
77
80
|
alt: '',
|
|
78
81
|
role: 'presentation',
|
|
79
|
-
'aria-hidden': true
|
|
82
|
+
'aria-hidden': true,
|
|
83
|
+
hidden: imageHidden
|
|
80
84
|
}
|
|
81
|
-
});
|
|
85
|
+
}); // Hide the image if it fails to load and restore it on a successful load
|
|
86
|
+
|
|
87
|
+
const imageOnError = react_utilities_2.useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onError, () => setImageHidden(true));
|
|
88
|
+
const imageOnLoad = react_utilities_2.useMergedEventCallbacks(image === null || image === void 0 ? void 0 : image.onLoad, () => setImageHidden(undefined));
|
|
89
|
+
|
|
90
|
+
if (image) {
|
|
91
|
+
image.onError = imageOnError;
|
|
92
|
+
image.onLoad = imageOnLoad;
|
|
93
|
+
}
|
|
94
|
+
|
|
82
95
|
const badge = react_utilities_1.resolveShorthand(props.badge, {
|
|
83
96
|
defaultProps: {
|
|
84
97
|
size: getBadgeSize(size),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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 } from '@fluentui/react-shared-contexts';\nimport { useMergedEventCallbacks } from '@fluentui/react-utilities';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n const { dir } = useFluent();\n const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = 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 // 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'),\n 'aria-hidden': true,\n },\n });\n\n // Render the icon slot *only if* there aren't any initials to display.\n let icon: AvatarState['icon'] = undefined;\n if (!initials?.children) {\n initials = undefined;\n icon = resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n children: <PersonRegular />,\n 'aria-hidden': true,\n id: baseId + '__initials',\n },\n });\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 const imageOnError = useMergedEventCallbacks(image?.onError, () => setImageHidden(true));\n const imageOnLoad = useMergedEventCallbacks(image?.onLoad, () => setImageHidden(undefined));\n if (image) {\n image.onError = imageOnError;\n image.onLoad = imageOnLoad;\n }\n\n const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n defaultProps: {\n size: getBadgeSize(size),\n role: 'presentation',\n 'aria-hidden': true,\n id: baseId + '__badge',\n },\n });\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\n return {\n size,\n name,\n shape,\n active,\n activeAppearance,\n color,\n idForColor,\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 'darkRed',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'darkGreen',\n 'lightTeal',\n 'teal',\n 'steel',\n 'blue',\n 'royalBlue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":["components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarState } from './Avatar.types';\n\nexport const avatarClassName = 'fui-Avatar';\n\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n duration50: '50ms',\n duration100: '100ms',\n duration150: '150ms',\n duration200: '200ms',\n duration300: '300ms',\n duration400: '400ms',\n duration500: '500ms',\n};\n\nconst animationTiming = {\n ultraFast: animationDuration.duration50,\n faster: animationDuration.duration100,\n fast: animationDuration.duration150,\n normal: animationDuration.duration200,\n slow: animationDuration.duration300,\n slower: animationDuration.duration400,\n ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n linear: 'linear',\n};\n\nconst animations = {\n fastOutSlowInMax: animationLines.decelerateMax,\n fastOutSlowInMid: animationLines.decelerateMid,\n fastOutSlowInMin: animationLines.decelerateMin,\n slowOutFastInMax: animationLines.accelerateMax,\n slowOutFastInMid: animationLines.accelerateMid,\n slowOutFastInMin: animationLines.accelerateMin,\n fastEase: animationLines.maxEasyEase,\n normalEase: animationLines.easyEase,\n nullEasing: animationLines.linear,\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightRegular,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n },\n },\n\n ring: {\n ':before': {\n ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n ':before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n ':before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n ':before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { ':before': { boxShadow: tokens.shadow4 } },\n shadow8: { ':before': { boxShadow: tokens.shadow8 } },\n shadow16: { ':before': { boxShadow: tokens.shadow16 } },\n shadow28: { ':before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n ':before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n ...shorthands.borderRadius('inherit'),\n },\n\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nconst useSizeStyles = makeStyles({\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n },\n brand: {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n },\n darkRed: {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n },\n darkGreen: {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n },\n lightTeal: {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n },\n royalBlue: {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n rootClasses.push(styles.textBody1Strong);\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassName, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);\n }\n\n if (state.image) {\n state.image.className = mergeClasses(styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(styles.iconInitials, iconSizeClass, state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Avatar';\nexport * from './utils/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["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,SAAgB,WAAhB,CACE,WADF,EAEE,KAFF,EAGE,kBAHF,EAG8B;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;;AAjBD,OAAA,CAAA,WAAA,GAAA,WAAA","sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n * so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic: Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n * CJK Unified Ideographs Extension B\n */\n// eslint-disable-next-line @fluentui/max-len\nconst UNSUPPORTED_TEXT_REGEX: RegExp = /[\\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]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean): string {\n let initials = '';\n\n const splits: string[] = displayName.split(' ');\n\n if (splits.length === 2) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[1].charAt(0).toUpperCase();\n } else if (splits.length === 3) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[2].charAt(0).toUpperCase();\n } else if (splits.length !== 0) {\n initials += splits[0].charAt(0).toUpperCase();\n }\n\n if (isRtl && initials.length > 1) {\n return initials.charAt(1) + initials.charAt(0);\n }\n\n return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n displayName = displayName.trim();\n\n return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n */\nexport function getInitials(\n displayName: string | undefined | null,\n isRtl: boolean,\n allowPhoneInitials?: boolean,\n): string {\n if (!displayName) {\n return '';\n }\n\n displayName = cleanupDisplayName(displayName);\n\n // For names containing CJK characters, and phone numbers, we don't display initials\n if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {\n return '';\n }\n\n return getInitialsLatin(displayName, isRtl);\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["utils/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,WAAA;AAAW;AAAX,CAAA","sourcesContent":["export { getInitials } from './getInitials';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.3",
|
|
4
4
|
"description": "React components for building Microsoft web experiences.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.3",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0",
|
|
33
33
|
"@types/enzyme": "3.10.3",
|
|
34
34
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"react-test-renderer": "^16.3.0"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@fluentui/react-badge": "9.0.0-rc.
|
|
46
|
+
"@fluentui/react-badge": "9.0.0-rc.3",
|
|
47
47
|
"@fluentui/react-icons": "^2.0.159-beta.10",
|
|
48
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
49
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
48
|
+
"@fluentui/react-theme": "9.0.0-rc.3",
|
|
49
|
+
"@fluentui/react-utilities": "9.0.0-rc.3",
|
|
50
50
|
"@griffel/react": "1.0.0",
|
|
51
51
|
"tslib": "^2.1.0"
|
|
52
52
|
},
|