@fluentui/react-avatar 9.0.0-rc.6 → 9.0.0-rc.9
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 +223 -6
- package/CHANGELOG.md +186 -134
- package/SPEC-AvatarGroup.md +185 -0
- package/dist/{react-avatar.d.ts → index.d.ts} +120 -65
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Avatar/Avatar.types.js.map +1 -1
- package/lib/components/Avatar/useAvatar.js +3 -3
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.js +12 -3
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.strings.js +4 -0
- package/lib/components/AvatarGroup/AvatarGroup.strings.js.map +1 -0
- package/lib/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js +27 -3
- package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js +14 -3
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/getInitials.js +14 -12
- package/lib/utils/getInitials.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatar.js +3 -3
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js +12 -3
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.strings.js +10 -0
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.strings.js.map +1 -0
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js +29 -2
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js +15 -4
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/getInitials.js +14 -12
- package/lib-commonjs/utils/getInitials.js.map +1 -1
- package/package.json +13 -10
- package/lib/Avatar.d.ts +0 -1
- package/lib/AvatarGroup.d.ts +0 -1
- package/lib/components/Avatar/Avatar.d.ts +0 -3
- package/lib/components/Avatar/Avatar.types.d.ts +0 -107
- package/lib/components/Avatar/index.d.ts +0 -5
- package/lib/components/Avatar/renderAvatar.d.ts +0 -2
- package/lib/components/Avatar/useAvatar.d.ts +0 -3
- package/lib/components/Avatar/useAvatarStyles.d.ts +0 -8
- package/lib/components/AvatarGroup/AvatarGroup.d.ts +0 -6
- package/lib/components/AvatarGroup/AvatarGroup.types.d.ts +0 -14
- package/lib/components/AvatarGroup/index.d.ts +0 -5
- package/lib/components/AvatarGroup/renderAvatarGroup.d.ts +0 -5
- package/lib/components/AvatarGroup/useAvatarGroup.d.ts +0 -12
- package/lib/components/AvatarGroup/useAvatarGroupStyles.d.ts +0 -7
- package/lib/index.d.ts +0 -5
- package/lib/utils/getInitials.d.ts +0 -14
- package/lib/utils/index.d.ts +0 -1
- package/lib-commonjs/Avatar.d.ts +0 -1
- package/lib-commonjs/AvatarGroup.d.ts +0 -1
- package/lib-commonjs/components/Avatar/Avatar.d.ts +0 -3
- package/lib-commonjs/components/Avatar/Avatar.types.d.ts +0 -107
- package/lib-commonjs/components/Avatar/index.d.ts +0 -5
- package/lib-commonjs/components/Avatar/renderAvatar.d.ts +0 -2
- package/lib-commonjs/components/Avatar/useAvatar.d.ts +0 -3
- package/lib-commonjs/components/Avatar/useAvatarStyles.d.ts +0 -8
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.d.ts +0 -6
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.types.d.ts +0 -14
- package/lib-commonjs/components/AvatarGroup/index.d.ts +0 -5
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.d.ts +0 -5
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.d.ts +0 -12
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.d.ts +0 -7
- package/lib-commonjs/index.d.ts +0 -5
- package/lib-commonjs/utils/getInitials.d.ts +0 -14
- package/lib-commonjs/utils/index.d.ts +0 -1
|
@@ -1 +1 @@
|
|
|
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 { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `avatarClassNames.root` instead.\n */\nexport const avatarClassName = 'fui-Avatar';\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\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 textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\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.textCaption2Strong);\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(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, 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(\n avatarClassNames.icon,\n styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
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 { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `avatarClassNames.root` instead.\n */\nexport const avatarClassName = 'fui-Avatar';\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\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 textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\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 icon12: { fontSize: '12px' },\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 16: { width: '16px', height: '16px' },\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.textCaption2Strong);\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(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else 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(\n avatarClassNames.icon,\n styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.avatarGroupDefaultStrings = void 0;
|
|
7
|
+
exports.avatarGroupDefaultStrings = {
|
|
8
|
+
tooltipContent: '{numOverflowedAvatars} more people.'
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=AvatarGroup.strings.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/AvatarGroup/AvatarGroup.strings.tsx"],"names":[],"mappings":";;;;;;AAEa,OAAA,CAAA,yBAAA,GAAgD;AAC3D,EAAA,cAAc,EAAE;AAD2C,CAAhD","sourcesContent":["import type { AvatarGroupStrings } from './AvatarGroup.types';\n\nexport const avatarGroupDefaultStrings: AvatarGroupStrings = {\n tooltipContent: '{numOverflowedAvatars} more people.',\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useAvatarGroup_unstable = void 0;
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
|
|
10
|
+
const react_popover_1 = /*#__PURE__*/require("@fluentui/react-popover");
|
|
11
|
+
|
|
12
|
+
const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
|
|
13
|
+
|
|
14
|
+
const AvatarGroup_strings_1 = /*#__PURE__*/require("./AvatarGroup.strings");
|
|
9
15
|
/**
|
|
10
16
|
* Create the state required to render AvatarGroup.
|
|
11
17
|
*
|
|
@@ -18,17 +24,38 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
18
24
|
|
|
19
25
|
|
|
20
26
|
const useAvatarGroup_unstable = (props, ref) => {
|
|
27
|
+
const {
|
|
28
|
+
children,
|
|
29
|
+
strings = AvatarGroup_strings_1.avatarGroupDefaultStrings
|
|
30
|
+
} = props;
|
|
21
31
|
return {
|
|
22
|
-
// TODO
|
|
32
|
+
// TODO: Replace with actual logic.
|
|
33
|
+
tooltipContent: strings.tooltipContent.replace('{numOverflowedAvatars}', String(10)),
|
|
23
34
|
components: {
|
|
24
35
|
// TODO add each slot's element type or component
|
|
25
|
-
root: 'div'
|
|
36
|
+
root: 'div',
|
|
37
|
+
popoverSurface: react_popover_1.PopoverSurface,
|
|
38
|
+
popoverTrigger: react_button_1.Button
|
|
26
39
|
},
|
|
27
40
|
// TODO add appropriate slots, for example:
|
|
28
41
|
// mySlot: resolveShorthand(props.mySlot),
|
|
29
42
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
30
43
|
ref,
|
|
31
44
|
...props
|
|
45
|
+
}),
|
|
46
|
+
popoverTrigger: react_utilities_1.resolveShorthand(props.popoverTrigger, {
|
|
47
|
+
required: true,
|
|
48
|
+
defaultProps: {
|
|
49
|
+
// TODO: Update children
|
|
50
|
+
children: '+10'
|
|
51
|
+
}
|
|
52
|
+
}),
|
|
53
|
+
popoverSurface: react_utilities_1.resolveShorthand(props.popoverSurface, {
|
|
54
|
+
required: true,
|
|
55
|
+
defaultProps: {
|
|
56
|
+
// TODO: Update children
|
|
57
|
+
children: children
|
|
58
|
+
}
|
|
32
59
|
})
|
|
33
60
|
};
|
|
34
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["components/AvatarGroup/useAvatarGroup.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,OAAO,GAAG,qBAAA,CAAA;AAAtB,MAAoD,KAA1D;AAEA,SAAO;AACL;AACA,IAAA,cAAc,EAAE,OAAO,CAAC,cAAR,CAAuB,OAAvB,CAA+B,wBAA/B,EAAyD,MAAM,CAAC,EAAD,CAA/D,CAFX;AAGL,IAAA,UAAU,EAAE;AACV;AACA,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,cAAc,EAAE,eAAA,CAAA,cAHN;AAIV,MAAA,cAAc,EAAE,cAAA,CAAA;AAJN,KAHP;AASL;AACA;AACA,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAXD;AAeL,IAAA,cAAc,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,cAAvB,EAAuC;AACrD,MAAA,QAAQ,EAAE,IAD2C;AAErD,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,QAAQ,EAAE;AAFE;AAFuC,KAAvC,CAfX;AAsBL,IAAA,cAAc,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,cAAvB,EAAuC;AACrD,MAAA,QAAQ,EAAE,IAD2C;AAErD,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,QAAQ,EAAE;AAFE;AAFuC,KAAvC;AAtBX,GAAP;AA8BD,CAjCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport { Button } from '@fluentui/react-button';\nimport { avatarGroupDefaultStrings } from './AvatarGroup.strings';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { children, strings = avatarGroupDefaultStrings } = props;\n\n return {\n // TODO: Replace with actual logic.\n tooltipContent: strings.tooltipContent.replace('{numOverflowedAvatars}', String(10)),\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n popoverSurface: PopoverSurface,\n popoverTrigger: Button,\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n popoverTrigger: resolveShorthand(props.popoverTrigger, {\n required: true,\n defaultProps: {\n // TODO: Update children\n children: '+10',\n },\n }),\n popoverSurface: resolveShorthand(props.popoverSurface, {\n required: true,\n defaultProps: {\n // TODO: Update children\n children: children,\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,14 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useAvatarGroupStyles_unstable = exports.avatarGroupClassNames = void 0;
|
|
6
|
+
exports.useAvatarGroupStyles_unstable = exports.extraAvatarGroupClassNames = exports.avatarGroupClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
exports.avatarGroupClassNames = {
|
|
11
|
-
root: 'fui-AvatarGroup'
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
root: 'fui-AvatarGroup',
|
|
12
|
+
popoverSurface: 'fui-AvatarGroup__popoverSurface',
|
|
13
|
+
popoverTrigger: 'fui-AvatarGroup__popoverTrigger'
|
|
14
|
+
};
|
|
15
|
+
exports.extraAvatarGroupClassNames = {
|
|
16
|
+
popoverSurfaceItem: 'fui-AvatarGroup__popoverSurfaceItem'
|
|
14
17
|
};
|
|
15
18
|
/**
|
|
16
19
|
* Styles for the root slot
|
|
@@ -29,6 +32,14 @@ const useAvatarGroupStyles_unstable = state => {
|
|
|
29
32
|
state.root.className = react_1.mergeClasses(exports.avatarGroupClassNames.root, styles.root, state.root.className); // TODO Add class names to slots, for example:
|
|
30
33
|
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
31
34
|
|
|
35
|
+
if (state.popoverSurface) {
|
|
36
|
+
state.popoverSurface.className = react_1.mergeClasses(exports.avatarGroupClassNames.popoverSurface, state.popoverSurface.className);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (state.popoverTrigger) {
|
|
40
|
+
state.popoverTrigger.className = react_1.mergeClasses(exports.avatarGroupClassNames.popoverTrigger, state.popoverTrigger.className);
|
|
41
|
+
}
|
|
42
|
+
|
|
32
43
|
return state;
|
|
33
44
|
};
|
|
34
45
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE,iBAD+D,
|
|
1
|
+
{"version":3,"sources":["components/AvatarGroup/useAvatarGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,cAAc,EAAE,iCAFqD;AAGrE,EAAA,cAAc,EAAE;AAHqD,CAA1D;AAMA,OAAA,CAAA,0BAAA,GAA6B;AACxC,EAAA,kBAAkB,EAAE;AADoB,CAA7B;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB,CAFyF,CAIzF;AACA;;AAEA,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,cAAnC,EAAmD,KAAK,CAAC,cAAN,CAAqB,SAAxE,CAAjC;AACD;;AAED,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,IAAA,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,cAAnC,EAAmD,KAAK,CAAC,cAAN,CAAqB,SAAxE,CAAjC;AACD;;AAED,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n popoverSurface: 'fui-AvatarGroup__popoverSurface',\n popoverTrigger: 'fui-AvatarGroup__popoverTrigger',\n};\n\nexport const extraAvatarGroupClassNames = {\n popoverSurfaceItem: 'fui-AvatarGroup__popoverSurfaceItem',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n // TODO Add default styles for the root element\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const styles = useStyles();\n state.root.className = mergeClasses(avatarGroupClassNames.root, styles.root, state.root.className);\n\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n if (state.popoverSurface) {\n state.popoverSurface.className = mergeClasses(avatarGroupClassNames.popoverSurface, state.popoverSurface.className);\n }\n\n if (state.popoverTrigger) {\n state.popoverTrigger.className = mergeClasses(avatarGroupClassNames.popoverTrigger, state.popoverTrigger.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;;AAGF,IAAA,OAAA,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,OAAA,CAAA,WAAA;AAAW;AAAX,CAAA;;AACT,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,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;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourcesContent":["export {\n Avatar,\n // eslint-disable-next-line deprecation/deprecation\n avatarClassName,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;;AAGF,IAAA,OAAA,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,OAAA,CAAA,WAAA;AAAW;AAAX,CAAA;;AACT,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,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;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourcesContent":["export {\n Avatar,\n // eslint-disable-next-line deprecation/deprecation\n avatarClassName,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';\n"],"sourceRoot":"../src/"}
|
|
@@ -40,20 +40,22 @@ const MULTIPLE_WHITESPACES_REGEX = /\s+/g;
|
|
|
40
40
|
|
|
41
41
|
const UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
|
|
42
42
|
|
|
43
|
-
function getInitialsLatin(displayName, isRtl) {
|
|
43
|
+
function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
|
|
44
44
|
let initials = '';
|
|
45
45
|
const splits = displayName.split(' ');
|
|
46
46
|
|
|
47
|
-
if (splits.length
|
|
48
|
-
initials += splits[0].charAt(0).toUpperCase();
|
|
49
|
-
initials += splits[1].charAt(0).toUpperCase();
|
|
50
|
-
} else if (splits.length === 3) {
|
|
51
|
-
initials += splits[0].charAt(0).toUpperCase();
|
|
52
|
-
initials += splits[2].charAt(0).toUpperCase();
|
|
53
|
-
} else if (splits.length !== 0) {
|
|
47
|
+
if (splits.length !== 0) {
|
|
54
48
|
initials += splits[0].charAt(0).toUpperCase();
|
|
55
49
|
}
|
|
56
50
|
|
|
51
|
+
if (!firstInitialOnly) {
|
|
52
|
+
if (splits.length === 2) {
|
|
53
|
+
initials += splits[1].charAt(0).toUpperCase();
|
|
54
|
+
} else if (splits.length === 3) {
|
|
55
|
+
initials += splits[2].charAt(0).toUpperCase();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
57
59
|
if (isRtl && initials.length > 1) {
|
|
58
60
|
return initials.charAt(1) + initials.charAt(0);
|
|
59
61
|
}
|
|
@@ -73,25 +75,25 @@ function cleanupDisplayName(displayName) {
|
|
|
73
75
|
*
|
|
74
76
|
* @param displayName - The full name of the person or entity
|
|
75
77
|
* @param isRtl - Whether the display is in RTL
|
|
76
|
-
* @param
|
|
78
|
+
* @param options - Extra options to control the behavior of getInitials
|
|
77
79
|
*
|
|
78
80
|
* @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
|
|
79
81
|
* could be derived from the name.
|
|
80
82
|
*/
|
|
81
83
|
|
|
82
84
|
|
|
83
|
-
function getInitials(displayName, isRtl,
|
|
85
|
+
function getInitials(displayName, isRtl, options) {
|
|
84
86
|
if (!displayName) {
|
|
85
87
|
return '';
|
|
86
88
|
}
|
|
87
89
|
|
|
88
90
|
displayName = cleanupDisplayName(displayName); // For names containing CJK characters, and phone numbers, we don't display initials
|
|
89
91
|
|
|
90
|
-
if (UNSUPPORTED_TEXT_REGEX.test(displayName) || !allowPhoneInitials && PHONENUMBER_REGEX.test(displayName)) {
|
|
92
|
+
if (UNSUPPORTED_TEXT_REGEX.test(displayName) || !(options === null || options === void 0 ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName)) {
|
|
91
93
|
return '';
|
|
92
94
|
}
|
|
93
95
|
|
|
94
|
-
return getInitialsLatin(displayName, isRtl);
|
|
96
|
+
return getInitialsLatin(displayName, isRtl, options === null || options === void 0 ? void 0 : options.firstInitialOnly);
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
exports.getInitials = getInitials;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,EAA+D,gBAA/D,EAAyF;AACvF,MAAI,QAAQ,GAAG,EAAf;AAEA,QAAM,MAAM,GAAa,WAAW,CAAC,KAAZ,CAAkB,GAAlB,CAAzB;;AACA,MAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,IAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;;AAED,MAAI,CAAC,gBAAL,EAAuB;AACrB,QAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AACvB,MAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD,KAFD,MAEO,IAAI,MAAM,CAAC,MAAP,KAAkB,CAAtB,EAAyB;AAC9B,MAAA,QAAQ,IAAI,MAAM,CAAC,CAAD,CAAN,CAAU,MAAV,CAAiB,CAAjB,EAAoB,WAApB,EAAZ;AACD;AACF;;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,OAHF,EASG;AAED,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,EAAP;AACD;;AAED,EAAA,WAAW,GAAG,kBAAkB,CAAC,WAAD,CAAhC,CANC,CAQD;;AACA,MACE,sBAAsB,CAAC,IAAvB,CAA4B,WAA5B,KACC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,kBAAV,KAAgC,iBAAiB,CAAC,IAAlB,CAAuB,WAAvB,CAFnC,EAGE;AACA,WAAO,EAAP;AACD;;AAED,SAAO,gBAAgB,CAAC,WAAD,EAAc,KAAd,EAAqB,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,gBAA9B,CAAvB;AACD;;AA1BD,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, firstInitialOnly?: boolean): string {\n let initials = '';\n\n const splits: string[] = displayName.split(' ');\n if (splits.length !== 0) {\n initials += splits[0].charAt(0).toUpperCase();\n }\n\n if (!firstInitialOnly) {\n if (splits.length === 2) {\n initials += splits[1].charAt(0).toUpperCase();\n } else if (splits.length === 3) {\n initials += splits[2].charAt(0).toUpperCase();\n }\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 options - Extra options to control the behavior of getInitials\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 options?: {\n /** Should initials be generated from phone numbers (default false) */\n allowPhoneInitials?: boolean;\n\n /** Returns only the first initial */\n firstInitialOnly?: boolean;\n },\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 (\n UNSUPPORTED_TEXT_REGEX.test(displayName) ||\n (!options?.allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))\n ) {\n return '';\n }\n\n return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);\n}\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.9",
|
|
4
4
|
"description": "React components for building Microsoft web experiences.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -21,24 +21,27 @@
|
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
|
25
|
-
"storybook": "node
|
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-avatar/src && yarn docs",
|
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
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.6",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0",
|
|
33
33
|
"es6-weak-map": "^2.0.2"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-badge": "9.0.0-rc.
|
|
36
|
+
"@fluentui/react-badge": "9.0.0-rc.9",
|
|
37
|
+
"@fluentui/react-button": "9.0.0-rc.10",
|
|
37
38
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
38
|
-
"@fluentui/react-
|
|
39
|
-
"@fluentui/react-
|
|
40
|
-
"@fluentui/react-
|
|
41
|
-
"@
|
|
39
|
+
"@fluentui/react-popover": "9.0.0-rc.10",
|
|
40
|
+
"@fluentui/react-tooltip": "9.0.0-rc.10",
|
|
41
|
+
"@fluentui/react-theme": "9.0.0-rc.8",
|
|
42
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.8",
|
|
43
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
|
44
|
+
"@griffel/react": "1.0.5",
|
|
42
45
|
"tslib": "^2.1.0"
|
|
43
46
|
},
|
|
44
47
|
"peerDependencies": {
|
package/lib/Avatar.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Avatar/index';
|
package/lib/AvatarGroup.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/AvatarGroup/index';
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { PresenceBadge } from '@fluentui/react-badge';
|
|
2
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type AvatarSlots = {
|
|
4
|
-
root: Slot<'span'>;
|
|
5
|
-
/**
|
|
6
|
-
* The Avatar's image.
|
|
7
|
-
*
|
|
8
|
-
* Usage e.g.: `image={{ src: '...' }}`
|
|
9
|
-
*/
|
|
10
|
-
image?: Slot<'img'>;
|
|
11
|
-
/**
|
|
12
|
-
* (optional) Custom initials.
|
|
13
|
-
*
|
|
14
|
-
* It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
|
|
15
|
-
* using the `getInitials` function.
|
|
16
|
-
*
|
|
17
|
-
* The initials are displayed when there is no image (including while the image is loading).
|
|
18
|
-
*/
|
|
19
|
-
initials?: Slot<'span'>;
|
|
20
|
-
/**
|
|
21
|
-
* Icon to be displayed when the avatar doesn't have an image or initials.
|
|
22
|
-
*
|
|
23
|
-
* @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
|
|
24
|
-
*/
|
|
25
|
-
icon?: Slot<'span'>;
|
|
26
|
-
/**
|
|
27
|
-
* Badge to show the avatar's presence status.
|
|
28
|
-
*/
|
|
29
|
-
badge?: Slot<typeof PresenceBadge>;
|
|
30
|
-
};
|
|
31
|
-
declare type AvatarCommons = {
|
|
32
|
-
/**
|
|
33
|
-
* The name of the person or entity represented by this Avatar. This should always be provided if it is available.
|
|
34
|
-
*
|
|
35
|
-
* The name will be used to determine the initials displayed when there is no icon, as well as provided to
|
|
36
|
-
* accessibility tools.
|
|
37
|
-
*/
|
|
38
|
-
name?: string;
|
|
39
|
-
/**
|
|
40
|
-
* Size of the avatar in pixels.
|
|
41
|
-
*
|
|
42
|
-
* Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
|
|
43
|
-
* based on design guidelines for the Avatar control.
|
|
44
|
-
*
|
|
45
|
-
* If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
|
|
46
|
-
* to override the rendered size.
|
|
47
|
-
*
|
|
48
|
-
* For example, to set the avatar to 45px in size:
|
|
49
|
-
* `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`
|
|
50
|
-
*
|
|
51
|
-
* @defaultvalue 32
|
|
52
|
-
*/
|
|
53
|
-
size: 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
|
|
54
|
-
/**
|
|
55
|
-
* The avatar can have a circular or square shape.
|
|
56
|
-
* @defaultvalue circular
|
|
57
|
-
*/
|
|
58
|
-
shape: 'circular' | 'square';
|
|
59
|
-
/**
|
|
60
|
-
* Optional activity indicator
|
|
61
|
-
* * active: the avatar will be decorated according to activeAppearance
|
|
62
|
-
* * inactive: the avatar will be reduced in size and partially transparent
|
|
63
|
-
* * unset: normal display
|
|
64
|
-
*
|
|
65
|
-
* @defaultvalue unset
|
|
66
|
-
*/
|
|
67
|
-
active: 'active' | 'inactive' | 'unset';
|
|
68
|
-
/**
|
|
69
|
-
* The appearance when `active="active"`
|
|
70
|
-
*
|
|
71
|
-
* @defaultvalue ring
|
|
72
|
-
*/
|
|
73
|
-
activeAppearance: 'ring' | 'shadow' | 'ring-shadow';
|
|
74
|
-
/**
|
|
75
|
-
* The color when displaying either an icon or initials.
|
|
76
|
-
* * neutral (default): gray
|
|
77
|
-
* * brand: color from the brand palette
|
|
78
|
-
* * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
|
|
79
|
-
* * [AvatarNamedColor]: a specific color from the theme
|
|
80
|
-
*
|
|
81
|
-
* @defaultvalue neutral
|
|
82
|
-
*/
|
|
83
|
-
color: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
|
|
84
|
-
/**
|
|
85
|
-
* Specify a string to be used instead of the name, to determine which color to use when color="colorful".
|
|
86
|
-
* Use this when a name is not available, but there is another unique identifier that can be used instead.
|
|
87
|
-
*/
|
|
88
|
-
idForColor: string | undefined;
|
|
89
|
-
};
|
|
90
|
-
/**
|
|
91
|
-
* A specific named color for the Avatar
|
|
92
|
-
*/
|
|
93
|
-
export declare type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
|
|
94
|
-
/**
|
|
95
|
-
* Properties for Avatar
|
|
96
|
-
*/
|
|
97
|
-
export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & Partial<AvatarCommons>;
|
|
98
|
-
/**
|
|
99
|
-
* State used in rendering Avatar
|
|
100
|
-
*/
|
|
101
|
-
export declare type AvatarState = ComponentState<AvatarSlots> & AvatarCommons & {
|
|
102
|
-
/**
|
|
103
|
-
* The Avatar's color, with `'colorful'` resolved to a named color
|
|
104
|
-
*/
|
|
105
|
-
color: Exclude<AvatarCommons['color'], 'colorful'>;
|
|
106
|
-
};
|
|
107
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { AvatarSlots, AvatarState } from './Avatar.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `avatarClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const avatarClassName = "fui-Avatar";
|
|
7
|
-
export declare const avatarClassNames: SlotClassNames<AvatarSlots>;
|
|
8
|
-
export declare const useAvatarStyles_unstable: (state: AvatarState) => AvatarState;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type AvatarGroupSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
};
|
|
5
|
-
declare type AvatarGroupCommons = {};
|
|
6
|
-
/**
|
|
7
|
-
* AvatarGroup Props
|
|
8
|
-
*/
|
|
9
|
-
export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & AvatarGroupCommons;
|
|
10
|
-
/**
|
|
11
|
-
* State used in rendering AvatarGroup
|
|
12
|
-
*/
|
|
13
|
-
export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & AvatarGroupCommons;
|
|
14
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render AvatarGroup.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,
|
|
7
|
-
* before being passed to renderAvatarGroup_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of AvatarGroup
|
|
10
|
-
* @param ref - reference to root HTMLElement of AvatarGroup
|
|
11
|
-
*/
|
|
12
|
-
export declare const useAvatarGroup_unstable: (props: AvatarGroupProps, ref: React.Ref<HTMLElement>) => AvatarGroupState;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
export declare const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots>;
|
|
4
|
-
/**
|
|
5
|
-
* Apply styling to the AvatarGroup slots based on the state
|
|
6
|
-
*/
|
|
7
|
-
export declare const useAvatarGroupStyles_unstable: (state: AvatarGroupState) => AvatarGroupState;
|
package/lib/index.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { Avatar, avatarClassName, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, } from './Avatar';
|
|
2
|
-
export type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState } from './Avatar';
|
|
3
|
-
export { getInitials } from './utils/index';
|
|
4
|
-
export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvatarGroupStyles_unstable, useAvatarGroup_unstable, } from './AvatarGroup';
|
|
5
|
-
export type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupState } from './AvatarGroup';
|