@fluentui/react-avatar 9.0.0-rc.10 → 9.0.0-rc.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,46 @@
2
2
  "name": "@fluentui/react-avatar",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 23 May 2022 18:54:45 GMT",
5
+ "date": "Thu, 26 May 2022 20:59:58 GMT",
6
+ "tag": "@fluentui/react-avatar_v9.0.0-rc.11",
7
+ "version": "9.0.0-rc.11",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "sarah.higley@microsoft.com",
12
+ "package": "@fluentui/react-avatar",
13
+ "commit": "af1794dd70ab6bc30f9c19db3ee54b7a22f3c24c",
14
+ "comment": "fix react-avatar: use initials as a fallback label even when no id is manually defined"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-avatar",
19
+ "comment": "Bump @fluentui/react-badge to v9.0.0-rc.11",
20
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-avatar",
25
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.12",
26
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-avatar",
31
+ "comment": "Bump @fluentui/react-popover to v9.0.0-rc.12",
32
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-avatar",
37
+ "comment": "Bump @fluentui/react-tooltip to v9.0.0-rc.12",
38
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
39
+ }
40
+ ]
41
+ }
42
+ },
43
+ {
44
+ "date": "Mon, 23 May 2022 18:56:40 GMT",
6
45
  "tag": "@fluentui/react-avatar_v9.0.0-rc.10",
7
46
  "version": "9.0.0-rc.10",
8
47
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,25 @@
1
1
  # Change Log - @fluentui/react-avatar
2
2
 
3
- This log was last generated on Mon, 23 May 2022 18:54:45 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 26 May 2022 20:59:58 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.11)
8
+
9
+ Thu, 26 May 2022 20:59:58 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.10..@fluentui/react-avatar_v9.0.0-rc.11)
11
+
12
+ ### Changes
13
+
14
+ - fix react-avatar: use initials as a fallback label even when no id is manually defined ([PR #23258](https://github.com/microsoft/fluentui/pull/23258) by sarah.higley@microsoft.com)
15
+ - Bump @fluentui/react-badge to v9.0.0-rc.11 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
16
+ - Bump @fluentui/react-button to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
17
+ - Bump @fluentui/react-popover to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
18
+ - Bump @fluentui/react-tooltip to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
19
+
7
20
  ## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.0.0-rc.10)
8
21
 
9
- Mon, 23 May 2022 18:54:45 GMT
22
+ Mon, 23 May 2022 18:56:40 GMT
10
23
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.0.0-rc.9..@fluentui/react-avatar_v9.0.0-rc.10)
11
24
 
12
25
  ### Changes
@@ -44,7 +44,7 @@ export const useAvatar_unstable = (props, ref) => {
44
44
  children: getInitials(name, dir === 'rtl', {
45
45
  firstInitialOnly: size <= 16
46
46
  }),
47
- 'aria-hidden': true
47
+ id: baseId + '__initials'
48
48
  }
49
49
  }); // Render the icon slot *only if* there aren't any initials to display.
50
50
 
@@ -56,8 +56,7 @@ export const useAvatar_unstable = (props, ref) => {
56
56
  required: true,
57
57
  defaultProps: {
58
58
  children: /*#__PURE__*/React.createElement(PersonRegular, null),
59
- 'aria-hidden': true,
60
- id: baseId + '__initials'
59
+ 'aria-hidden': true
61
60
  }
62
61
  });
63
62
  }
@@ -1 +1 @@
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', { firstInitialOnly: size <= 16 }),\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 shape,\n active,\n activeAppearance,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"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', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\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 },\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 shape,\n active,\n activeAppearance,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"sourceRoot":"../src/"}
@@ -58,7 +58,7 @@ const useAvatar_unstable = (props, ref) => {
58
58
  children: index_1.getInitials(name, dir === 'rtl', {
59
59
  firstInitialOnly: size <= 16
60
60
  }),
61
- 'aria-hidden': true
61
+ id: baseId + '__initials'
62
62
  }
63
63
  }); // Render the icon slot *only if* there aren't any initials to display.
64
64
 
@@ -70,8 +70,7 @@ const useAvatar_unstable = (props, ref) => {
70
70
  required: true,
71
71
  defaultProps: {
72
72
  children: React.createElement(react_icons_1.PersonRegular, null),
73
- 'aria-hidden': true,
74
- id: baseId + '__initials'
73
+ 'aria-hidden': true
75
74
  }
76
75
  });
77
76
  }
@@ -1 +1 @@
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', { firstInitialOnly: size <= 16 }),\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 shape,\n active,\n activeAppearance,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"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', { firstInitialOnly: size <= 16 }),\n id: baseId + '__initials',\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 },\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 shape,\n active,\n activeAppearance,\n color,\n\n components: {\n root: 'span',\n initials: 'span',\n icon: 'span',\n image: 'img',\n badge: PresenceBadge,\n },\n\n root,\n initials,\n icon,\n image,\n badge,\n };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n if (size >= 96) {\n return 'extra-large';\n } else if (size >= 64) {\n return 'large';\n } else if (size >= 56) {\n return 'medium';\n } else if (size >= 40) {\n return 'small';\n } else if (size >= 28) {\n return 'extra-small';\n } else {\n return 'tiny';\n }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n 'dark-red',\n 'cranberry',\n 'red',\n 'pumpkin',\n 'peach',\n 'marigold',\n 'gold',\n 'brass',\n 'brown',\n 'forest',\n 'seafoam',\n 'dark-green',\n 'light-teal',\n 'teal',\n 'steel',\n 'blue',\n 'royal-blue',\n 'cornflower',\n 'navy',\n 'lavender',\n 'purple',\n 'grape',\n 'lilac',\n 'pink',\n 'magenta',\n 'plum',\n 'beige',\n 'mink',\n 'platinum',\n 'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n let hashCode = 0;\n for (let len: number = str.length - 1; len >= 0; len--) {\n const ch = str.charCodeAt(len);\n const shift = len % 8;\n hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n }\n\n return hashCode;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-avatar",
3
- "version": "9.0.0-rc.10",
3
+ "version": "9.0.0-rc.11",
4
4
  "description": "React components for building Microsoft web experiences.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,11 +33,11 @@
33
33
  "es6-weak-map": "^2.0.2"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/react-badge": "9.0.0-rc.10",
37
- "@fluentui/react-button": "9.0.0-rc.11",
36
+ "@fluentui/react-badge": "9.0.0-rc.11",
37
+ "@fluentui/react-button": "9.0.0-rc.12",
38
38
  "@fluentui/react-icons": "^2.0.166-rc.3",
39
- "@fluentui/react-popover": "9.0.0-rc.11",
40
- "@fluentui/react-tooltip": "9.0.0-rc.11",
39
+ "@fluentui/react-popover": "9.0.0-rc.12",
40
+ "@fluentui/react-tooltip": "9.0.0-rc.12",
41
41
  "@fluentui/react-theme": "9.0.0-rc.9",
42
42
  "@fluentui/react-shared-contexts": "9.0.0-rc.9",
43
43
  "@fluentui/react-utilities": "9.0.0-rc.9",