@fluentui/react-avatar 9.11.2 → 9.11.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.md +18 -2
- package/lib/components/Avatar/useAvatarStyles.styles.js +0 -2
- package/lib/components/Avatar/useAvatarStyles.styles.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.styles.raw.js +0 -1
- package/lib/components/Avatar/useAvatarStyles.styles.raw.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js +0 -2
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js +0 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js +0 -2
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js +0 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js +0 -2
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js +0 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.js +0 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.js +0 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js +0 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js +0 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Avatar/useAvatarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\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// CSS variables used internally in Avatar's styles\nconst vars = {\n badgeRadius: '--fui-Avatar-badgeRadius',\n badgeGap: '--fui-Avatar-badgeGap',\n badgeAlign: '--fui-Avatar-badgeAlign',\n ringWidth: '--fui-Avatar-ringWidth',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n\n // ::before is the ring, and ::after is the shadow.\n // These are not displayed by default; the ring and shadow clases set content: \"\" to display them when appropriate.\n '::before,::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n zIndex: -1,\n margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,\n borderRadius: 'inherit',\n transitionProperty: 'margin, opacity',\n transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n '::before': {\n borderStyle: 'solid',\n borderWidth: `var(${vars.ringWidth})`,\n },\n});\n\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n 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 borderRadius: 'inherit',\n});\n\n/**\n * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.\n * This creates a transparent gap between the badge and Avatar.\n *\n * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.\n */\nconst badgeMask = (margin?: string) => {\n // Center the cutout at the badge's radius away from the edge.\n // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.\n const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;\n // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px\n // to \"fade\" from transparent to opaque over a half-pixel and ease the transition.\n const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;\n const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;\n\n return (\n `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` +\n `transparent ${innerRadius}, white ${outerRadius})`\n );\n};\n\nconst useStyles = makeStyles({\n textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: { borderRadius: tokens.borderRadiusSmall },\n squareMedium: { borderRadius: tokens.borderRadiusMedium },\n squareLarge: { borderRadius: tokens.borderRadiusLarge },\n squareXLarge: { borderRadius: tokens.borderRadiusXLarge },\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: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n\n ring: {\n // Show the ::before pseudo-element, which is the ring\n '::before': { content: '\"\"' },\n },\n ringBadgeCutout: {\n '::before': { maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`) },\n },\n ringThick: {\n [vars.ringWidth]: tokens.strokeWidthThick,\n },\n ringThicker: {\n [vars.ringWidth]: tokens.strokeWidthThicker,\n },\n ringThickest: {\n [vars.ringWidth]: tokens.strokeWidthThickest,\n },\n\n shadow: {\n // Show the ::after pseudo-element, which is the shadow\n '::after': { content: '\"\"' },\n },\n shadow4: {\n '::after': { boxShadow: tokens.shadow4 },\n },\n shadow8: {\n '::after': { boxShadow: tokens.shadow8 },\n },\n shadow16: {\n '::after': { boxShadow: tokens.shadow16 },\n },\n shadow28: {\n '::after': { boxShadow: tokens.shadow28 },\n },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n\n '::before,::after': {\n margin: 0,\n opacity: 0,\n transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n },\n },\n\n // Applied to the badge slot\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n },\n\n // Applied to the image, initials, or icon slot when there is a badge\n badgeCutout: {\n maskImage: badgeMask(),\n },\n\n // Applied to the root when there is a badge\n badgeAlign: {\n // Griffel won't auto-flip the \"right\" alignment to \"left\" in RTL if it is inline in the maskImage,\n // so split it out into a css variable that will auto-flip.\n [vars.badgeAlign]: 'right',\n },\n\n // Badge size: applied to root when there is a badge\n tiny: {\n [vars.badgeRadius]: '3px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n 'extra-small': {\n [vars.badgeRadius]: '5px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n small: {\n [vars.badgeRadius]: '6px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n medium: {\n [vars.badgeRadius]: '8px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n large: {\n [vars.badgeRadius]: '10px',\n [vars.badgeGap]: tokens.strokeWidthThick,\n },\n 'extra-large': {\n [vars.badgeRadius]: '14px',\n [vars.badgeGap]: tokens.strokeWidthThick,\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\nexport const 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.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n },\n 'dark-red': {\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 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n },\n 'light-teal': {\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 'royal-blue': {\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\nconst useRingColorStyles = makeStyles({\n neutral: {\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n 'use no memo';\n\n const { size, shape, active, activeAppearance, color } = state;\n\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n const ringColorStyles = useRingColorStyles();\n\n const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]];\n\n if (state.badge) {\n rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);\n }\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 // Default text size included in useRootClassName\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.textTitle3);\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, ringColorStyles[color]);\n if (state.badge) {\n rootClasses.push(styles.ringBadgeCutout);\n }\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 rootClasses.push(styles.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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n // eslint-disable-next-line react-hooks/immutability\n state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);\n }\n\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = mergeClasses(\n avatarClassNames.image,\n imageClassName,\n colorStyles[color],\n state.badge && styles.badgeCutout,\n state.image.className,\n );\n }\n\n if (state.initials) {\n // eslint-disable-next-line react-hooks/immutability\n state.initials.className = mergeClasses(\n avatarClassNames.initials,\n iconInitialsClassName,\n colorStyles[color],\n state.badge && styles.badgeCutout,\n state.initials.className,\n );\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 // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n iconInitialsClassName,\n iconSizeClass,\n colorStyles[color],\n state.badge && styles.badgeCutout,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","makeResetStyles","makeStyles","mergeClasses","avatarClassNames","root","image","initials","icon","badge","vars","badgeRadius","badgeGap","badgeAlign","ringWidth","useRootClassName","display","flexShrink","position","verticalAlign","borderRadius","borderRadiusCircular","fontFamily","fontFamilyBase","fontWeight","fontWeightSemibold","fontSize","fontSizeBase300","width","height","top","left","bottom","right","zIndex","margin","transitionProperty","transitionTimingFunction","curveEasyEaseMax","curveLinear","transitionDuration","durationUltraSlow","durationSlower","borderStyle","borderWidth","useImageClassName","objectFit","useIconInitialsClassName","boxSizing","lineHeight","border","strokeWidthThin","colorTransparentStroke","alignItems","justifyContent","textAlign","userSelect","badgeMask","centerOffset","innerRadius","outerRadius","useStyles","textCaption2Strong","fontSizeBase100","textCaption1Strong","fontSizeBase200","textSubtitle2","fontSizeBase400","textSubtitle1","fontSizeBase500","textTitle3","fontSizeBase600","squareSmall","borderRadiusSmall","squareMedium","borderRadiusMedium","squareLarge","borderRadiusLarge","squareXLarge","borderRadiusXLarge","activeOrInactive","transform","durationFaster","ring","content","ringBadgeCutout","maskImage","ringThick","strokeWidthThick","ringThicker","strokeWidthThicker","ringThickest","strokeWidthThickest","shadow","shadow4","boxShadow","shadow8","shadow16","shadow28","inactive","opacity","curveDecelerateMin","badgeCutout","tiny","small","medium","large","icon12","icon16","icon20","icon24","icon28","icon32","icon48","useSizeStyles","useColorStyles","neutral","color","colorNeutralForeground3","backgroundColor","colorNeutralBackground6","brand","colorNeutralForegroundStaticInverted","colorBrandBackgroundStatic","colorPaletteDarkRedForeground2","colorPaletteDarkRedBackground2","cranberry","colorPaletteCranberryForeground2","colorPaletteCranberryBackground2","red","colorPaletteRedForeground2","colorPaletteRedBackground2","pumpkin","colorPalettePumpkinForeground2","colorPalettePumpkinBackground2","peach","colorPalettePeachForeground2","colorPalettePeachBackground2","marigold","colorPaletteMarigoldForeground2","colorPaletteMarigoldBackground2","gold","colorPaletteGoldForeground2","colorPaletteGoldBackground2","brass","colorPaletteBrassForeground2","colorPaletteBrassBackground2","brown","colorPaletteBrownForeground2","colorPaletteBrownBackground2","forest","colorPaletteForestForeground2","colorPaletteForestBackground2","seafoam","colorPaletteSeafoamForeground2","colorPaletteSeafoamBackground2","colorPaletteDarkGreenForeground2","colorPaletteDarkGreenBackground2","colorPaletteLightTealForeground2","colorPaletteLightTealBackground2","teal","colorPaletteTealForeground2","colorPaletteTealBackground2","steel","colorPaletteSteelForeground2","colorPaletteSteelBackground2","blue","colorPaletteBlueForeground2","colorPaletteBlueBackground2","colorPaletteRoyalBlueForeground2","colorPaletteRoyalBlueBackground2","cornflower","colorPaletteCornflowerForeground2","colorPaletteCornflowerBackground2","navy","colorPaletteNavyForeground2","colorPaletteNavyBackground2","lavender","colorPaletteLavenderForeground2","colorPaletteLavenderBackground2","purple","colorPalettePurpleForeground2","colorPalettePurpleBackground2","grape","colorPaletteGrapeForeground2","colorPaletteGrapeBackground2","lilac","colorPaletteLilacForeground2","colorPaletteLilacBackground2","pink","colorPalettePinkForeground2","colorPalettePinkBackground2","magenta","colorPaletteMagentaForeground2","colorPaletteMagentaBackground2","plum","colorPalettePlumForeground2","colorPalettePlumBackground2","beige","colorPaletteBeigeForeground2","colorPaletteBeigeBackground2","mink","colorPaletteMinkForeground2","colorPaletteMinkBackground2","platinum","colorPalettePlatinumForeground2","colorPalettePlatinumBackground2","anchor","colorPaletteAnchorForeground2","colorPaletteAnchorBackground2","useRingColorStyles","colorBrandStroke1","colorPaletteDarkRedBorderActive","colorPaletteCranberryBorderActive","colorPaletteRedBorderActive","colorPalettePumpkinBorderActive","colorPalettePeachBorderActive","colorPaletteMarigoldBorderActive","colorPaletteGoldBorderActive","colorPaletteBrassBorderActive","colorPaletteBrownBorderActive","colorPaletteForestBorderActive","colorPaletteSeafoamBorderActive","colorPaletteDarkGreenBorderActive","colorPaletteLightTealBorderActive","colorPaletteTealBorderActive","colorPaletteSteelBorderActive","colorPaletteBlueBorderActive","colorPaletteRoyalBlueBorderActive","colorPaletteCornflowerBorderActive","colorPaletteNavyBorderActive","colorPaletteLavenderBorderActive","colorPalettePurpleBorderActive","colorPaletteGrapeBorderActive","colorPaletteLilacBorderActive","colorPalettePinkBorderActive","colorPaletteMagentaBorderActive","colorPalettePlumBorderActive","colorPaletteBeigeBorderActive","colorPaletteMinkBorderActive","colorPalettePlatinumBorderActive","colorPaletteAnchorBorderActive","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","ringColorStyles","rootClasses","push","className","iconSizeClass"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Avatar/useAvatarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\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// CSS variables used internally in Avatar's styles\nconst vars = {\n badgeRadius: '--fui-Avatar-badgeRadius',\n badgeGap: '--fui-Avatar-badgeGap',\n badgeAlign: '--fui-Avatar-badgeAlign',\n ringWidth: '--fui-Avatar-ringWidth',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n\n // ::before is the ring, and ::after is the shadow.\n // These are not displayed by default; the ring and shadow clases set content: \"\" to display them when appropriate.\n '::before,::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n zIndex: -1,\n margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,\n borderRadius: 'inherit',\n transitionProperty: 'margin, opacity',\n transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n '::before': {\n borderStyle: 'solid',\n borderWidth: `var(${vars.ringWidth})`,\n },\n});\n\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n 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 borderRadius: 'inherit',\n});\n\n/**\n * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.\n * This creates a transparent gap between the badge and Avatar.\n *\n * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.\n */\nconst badgeMask = (margin?: string) => {\n // Center the cutout at the badge's radius away from the edge.\n // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.\n const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;\n // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px\n // to \"fade\" from transparent to opaque over a half-pixel and ease the transition.\n const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;\n const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;\n\n return (\n `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` +\n `transparent ${innerRadius}, white ${outerRadius})`\n );\n};\n\nconst useStyles = makeStyles({\n textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: { borderRadius: tokens.borderRadiusSmall },\n squareMedium: { borderRadius: tokens.borderRadiusMedium },\n squareLarge: { borderRadius: tokens.borderRadiusLarge },\n squareXLarge: { borderRadius: tokens.borderRadiusXLarge },\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: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n\n ring: {\n // Show the ::before pseudo-element, which is the ring\n '::before': { content: '\"\"' },\n },\n ringBadgeCutout: {\n '::before': { maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`) },\n },\n ringThick: {\n [vars.ringWidth]: tokens.strokeWidthThick,\n },\n ringThicker: {\n [vars.ringWidth]: tokens.strokeWidthThicker,\n },\n ringThickest: {\n [vars.ringWidth]: tokens.strokeWidthThickest,\n },\n\n shadow: {\n // Show the ::after pseudo-element, which is the shadow\n '::after': { content: '\"\"' },\n },\n shadow4: {\n '::after': { boxShadow: tokens.shadow4 },\n },\n shadow8: {\n '::after': { boxShadow: tokens.shadow8 },\n },\n shadow16: {\n '::after': { boxShadow: tokens.shadow16 },\n },\n shadow28: {\n '::after': { boxShadow: tokens.shadow28 },\n },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n\n '::before,::after': {\n margin: 0,\n opacity: 0,\n transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`,\n },\n },\n\n // Applied to the badge slot\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n },\n\n // Applied to the image, initials, or icon slot when there is a badge\n badgeCutout: {\n maskImage: badgeMask(),\n },\n\n // Applied to the root when there is a badge\n badgeAlign: {\n // Griffel won't auto-flip the \"right\" alignment to \"left\" in RTL if it is inline in the maskImage,\n // so split it out into a css variable that will auto-flip.\n [vars.badgeAlign]: 'right',\n },\n\n // Badge size: applied to root when there is a badge\n tiny: {\n [vars.badgeRadius]: '3px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n 'extra-small': {\n [vars.badgeRadius]: '5px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n small: {\n [vars.badgeRadius]: '6px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n medium: {\n [vars.badgeRadius]: '8px',\n [vars.badgeGap]: tokens.strokeWidthThin,\n },\n large: {\n [vars.badgeRadius]: '10px',\n [vars.badgeGap]: tokens.strokeWidthThick,\n },\n 'extra-large': {\n [vars.badgeRadius]: '14px',\n [vars.badgeGap]: tokens.strokeWidthThick,\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\nexport const 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.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n },\n 'dark-red': {\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 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n },\n 'light-teal': {\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 'royal-blue': {\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\nconst useRingColorStyles = makeStyles({\n neutral: {\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n const ringColorStyles = useRingColorStyles();\n\n const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]];\n\n if (state.badge) {\n rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);\n }\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 // Default text size included in useRootClassName\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.textTitle3);\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, ringColorStyles[color]);\n if (state.badge) {\n rootClasses.push(styles.ringBadgeCutout);\n }\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 rootClasses.push(styles.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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n // eslint-disable-next-line react-hooks/immutability\n state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);\n }\n\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = mergeClasses(\n avatarClassNames.image,\n imageClassName,\n colorStyles[color],\n state.badge && styles.badgeCutout,\n state.image.className,\n );\n }\n\n if (state.initials) {\n // eslint-disable-next-line react-hooks/immutability\n state.initials.className = mergeClasses(\n avatarClassNames.initials,\n iconInitialsClassName,\n colorStyles[color],\n state.badge && styles.badgeCutout,\n state.initials.className,\n );\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 // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n iconInitialsClassName,\n iconSizeClass,\n colorStyles[color],\n state.badge && styles.badgeCutout,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","makeResetStyles","makeStyles","mergeClasses","avatarClassNames","root","image","initials","icon","badge","vars","badgeRadius","badgeGap","badgeAlign","ringWidth","useRootClassName","display","flexShrink","position","verticalAlign","borderRadius","borderRadiusCircular","fontFamily","fontFamilyBase","fontWeight","fontWeightSemibold","fontSize","fontSizeBase300","width","height","top","left","bottom","right","zIndex","margin","transitionProperty","transitionTimingFunction","curveEasyEaseMax","curveLinear","transitionDuration","durationUltraSlow","durationSlower","borderStyle","borderWidth","useImageClassName","objectFit","useIconInitialsClassName","boxSizing","lineHeight","border","strokeWidthThin","colorTransparentStroke","alignItems","justifyContent","textAlign","userSelect","badgeMask","centerOffset","innerRadius","outerRadius","useStyles","textCaption2Strong","fontSizeBase100","textCaption1Strong","fontSizeBase200","textSubtitle2","fontSizeBase400","textSubtitle1","fontSizeBase500","textTitle3","fontSizeBase600","squareSmall","borderRadiusSmall","squareMedium","borderRadiusMedium","squareLarge","borderRadiusLarge","squareXLarge","borderRadiusXLarge","activeOrInactive","transform","durationFaster","ring","content","ringBadgeCutout","maskImage","ringThick","strokeWidthThick","ringThicker","strokeWidthThicker","ringThickest","strokeWidthThickest","shadow","shadow4","boxShadow","shadow8","shadow16","shadow28","inactive","opacity","curveDecelerateMin","badgeCutout","tiny","small","medium","large","icon12","icon16","icon20","icon24","icon28","icon32","icon48","useSizeStyles","useColorStyles","neutral","color","colorNeutralForeground3","backgroundColor","colorNeutralBackground6","brand","colorNeutralForegroundStaticInverted","colorBrandBackgroundStatic","colorPaletteDarkRedForeground2","colorPaletteDarkRedBackground2","cranberry","colorPaletteCranberryForeground2","colorPaletteCranberryBackground2","red","colorPaletteRedForeground2","colorPaletteRedBackground2","pumpkin","colorPalettePumpkinForeground2","colorPalettePumpkinBackground2","peach","colorPalettePeachForeground2","colorPalettePeachBackground2","marigold","colorPaletteMarigoldForeground2","colorPaletteMarigoldBackground2","gold","colorPaletteGoldForeground2","colorPaletteGoldBackground2","brass","colorPaletteBrassForeground2","colorPaletteBrassBackground2","brown","colorPaletteBrownForeground2","colorPaletteBrownBackground2","forest","colorPaletteForestForeground2","colorPaletteForestBackground2","seafoam","colorPaletteSeafoamForeground2","colorPaletteSeafoamBackground2","colorPaletteDarkGreenForeground2","colorPaletteDarkGreenBackground2","colorPaletteLightTealForeground2","colorPaletteLightTealBackground2","teal","colorPaletteTealForeground2","colorPaletteTealBackground2","steel","colorPaletteSteelForeground2","colorPaletteSteelBackground2","blue","colorPaletteBlueForeground2","colorPaletteBlueBackground2","colorPaletteRoyalBlueForeground2","colorPaletteRoyalBlueBackground2","cornflower","colorPaletteCornflowerForeground2","colorPaletteCornflowerBackground2","navy","colorPaletteNavyForeground2","colorPaletteNavyBackground2","lavender","colorPaletteLavenderForeground2","colorPaletteLavenderBackground2","purple","colorPalettePurpleForeground2","colorPalettePurpleBackground2","grape","colorPaletteGrapeForeground2","colorPaletteGrapeBackground2","lilac","colorPaletteLilacForeground2","colorPaletteLilacBackground2","pink","colorPalettePinkForeground2","colorPalettePinkBackground2","magenta","colorPaletteMagentaForeground2","colorPaletteMagentaBackground2","plum","colorPalettePlumForeground2","colorPalettePlumBackground2","beige","colorPaletteBeigeForeground2","colorPaletteBeigeBackground2","mink","colorPaletteMinkForeground2","colorPaletteMinkBackground2","platinum","colorPalettePlatinumForeground2","colorPalettePlatinumBackground2","anchor","colorPaletteAnchorForeground2","colorPaletteAnchorBackground2","useRingColorStyles","colorBrandStroke1","colorPaletteDarkRedBorderActive","colorPaletteCranberryBorderActive","colorPaletteRedBorderActive","colorPalettePumpkinBorderActive","colorPalettePeachBorderActive","colorPaletteMarigoldBorderActive","colorPaletteGoldBorderActive","colorPaletteBrassBorderActive","colorPaletteBrownBorderActive","colorPaletteForestBorderActive","colorPaletteSeafoamBorderActive","colorPaletteDarkGreenBorderActive","colorPaletteLightTealBorderActive","colorPaletteTealBorderActive","colorPaletteSteelBorderActive","colorPaletteBlueBorderActive","colorPaletteRoyalBlueBorderActive","colorPaletteCornflowerBorderActive","colorPaletteNavyBorderActive","colorPaletteLavenderBorderActive","colorPalettePurpleBorderActive","colorPaletteGrapeBorderActive","colorPaletteLilacBorderActive","colorPalettePinkBorderActive","colorPaletteMagentaBorderActive","colorPalettePlumBorderActive","colorPaletteBeigeBorderActive","colorPaletteMinkBorderActive","colorPalettePlatinumBorderActive","colorPaletteAnchorBorderActive","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","ringColorStyles","rootClasses","push","className","iconSizeClass"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n root: 'fui-AvatarGroup'\n};\n/**\n * Styles for the root slot.\n */ const useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative'\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n }\n});\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n root: 'fui-AvatarGroup'\n};\n/**\n * Styles for the root slot.\n */ const useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative'\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n }\n});\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","By8wz76","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,qBAAqB;;;IAoBjBY,6BAA6B;;;;uBAvBL,gBAAgB;uCAE3B,kCAAkC;AACzD,8BAA8B;IACjCX,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,MAAM,EAAEC,MAAM,EAAEC,IAAAA,EAAM,GAAGF,KAAK;IAC9B,MAAMG,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,MAAMe,UAAU,OAAGlB,oCAAa,CAAC,CAAC;IAClC,oDAAA;IACAc,KAAK,CAACZ,IAAI,CAACiB,SAAS,OAAGrB,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAEe,MAAM,CAACb,IAAI,EAAEW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAED,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAAEO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;IACxK,OAAOL,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\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};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\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};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.pie,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","display","position","pie","clipPath","backgroundColor","colorTransparentStroke","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,qBAAAA;;;iCAwBAU;;;;uBA9B4B,iBAAiB;4BACnC,wBAAwB;uCACjB,mCAAmC;AAI1D,8BAAgE;IACrET,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,MAAM;QACJC,SAAS;QACTC,UAAU;IACZ;IACAC,KAAK;QACHC,UAAU;QACVC,iBAAiBV,kBAAAA,CAAOW,sBAAsB;QAC9C,kCAAkC;YAChCD,iBAAiB;QACnB;IACF;AACF;AAKO,MAAME,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IACzB,MAAMG,SAASZ;IACf,MAAMa,iBAAahB,oCAAAA;IAEnB,oDAAoD;IACpDY,MAAMV,IAAI,CAACe,SAAS,OAAGnB,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1Ba,OAAOX,IAAI,EACXS,WAAW,SAASG,UAAU,CAACF,KAAK,EACpCD,WAAW,SAASE,OAAOR,GAAG,EAC9BK,MAAMV,IAAI,CAACe,SAAS;IAGtB,OAAOL;AACT,EAAE"}
|
|
@@ -319,7 +319,6 @@ const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
|
|
|
319
319
|
]
|
|
320
320
|
});
|
|
321
321
|
const useAvatarGroupItemStyles_unstable = (state)=>{
|
|
322
|
-
'use no memo';
|
|
323
322
|
const { isOverflowItem, layout, size } = state;
|
|
324
323
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
325
324
|
const avatarStyles = useAvatarStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAvatarGroupItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nexport const avatarGroupItemClassNames = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel'\n};\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative'\n },\n overflowItem: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`\n },\n nonOverflowItem: {\n borderRadius: tokens.borderRadiusCircular\n }\n});\n/**\n * Styles for the avatar slot\n */ const useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute'\n },\n pie: {\n borderRadius: '0'\n }\n});\n/**\n * Styles for the label slot\n */ const useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1\n }\n});\n/**\n * Styles for the stack layout\n */ const useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`\n },\n xxs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})`\n }\n },\n xs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})`\n }\n },\n s: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})`\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})`\n }\n }\n});\n/**\n * Styles for the spread layout\n */ const useSpreadStyles = makeStyles({\n s: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalS\n }\n },\n mNudge: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalMNudge\n }\n },\n m: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalM\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalL\n }\n },\n xl: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalXL\n }\n }\n});\n/**\n * Styles for the pie layout\n */ const usePieStyles = makeStyles({\n base: {\n position: 'absolute'\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%'\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n }\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0'\n }\n },\n thick: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick\n },\n thicker: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker\n },\n thickest: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest\n }\n});\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */ export const useAvatarGroupItemStyles_unstable = (state)=>{\n 'use no memo';\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const rootClasses = [\n rootStyles.base\n ];\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n rootClasses.push(pieStyles.slices);\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);\n if (state.overflowLabel) {\n // eslint-disable-next-line react-hooks/immutability\n state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);\n }\n return state;\n};\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */ export const useGroupChildClassName = (layout, size)=>{\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n return mergeClasses(...layoutClasses);\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","Bt984gj","mc9l5x","Bnnss6s","qhf8xq","overflowItem","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","nonOverflowItem","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useAvatarStyles","pie","useOverflowLabelStyles","Frg6f3","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useStackStyles","thick","E5pizo","thicker","thickest","xxs","jhia2w","xs","s","l","useSpreadStyles","mNudge","m","xl","usePieStyles","slices","B3gf25r","Be2twx7","Bvaow4n","Gpecfs","bhabj1","B7rc6i7","Bwrfys5","Bwuzm9m","fflka","do7bja","Be8zqhl","Bij0kh0","Bwexnyt","Bhe5x6o","B3kv7bh","rtlSlices","uiicq7","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useAvatarGroupItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nexport const avatarGroupItemClassNames = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel'\n};\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative'\n },\n overflowItem: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`\n },\n nonOverflowItem: {\n borderRadius: tokens.borderRadiusCircular\n }\n});\n/**\n * Styles for the avatar slot\n */ const useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute'\n },\n pie: {\n borderRadius: '0'\n }\n});\n/**\n * Styles for the label slot\n */ const useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1\n }\n});\n/**\n * Styles for the stack layout\n */ const useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`\n },\n xxs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})`\n }\n },\n xs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})`\n }\n },\n s: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})`\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})`\n }\n }\n});\n/**\n * Styles for the spread layout\n */ const useSpreadStyles = makeStyles({\n s: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalS\n }\n },\n mNudge: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalMNudge\n }\n },\n m: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalM\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalL\n }\n },\n xl: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalXL\n }\n }\n});\n/**\n * Styles for the pie layout\n */ const usePieStyles = makeStyles({\n base: {\n position: 'absolute'\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%'\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n }\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0'\n }\n },\n thick: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick\n },\n thicker: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker\n },\n thickest: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest\n }\n});\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */ export const useAvatarGroupItemStyles_unstable = (state)=>{\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const rootClasses = [\n rootStyles.base\n ];\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n rootClasses.push(pieStyles.slices);\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);\n if (state.overflowLabel) {\n // eslint-disable-next-line react-hooks/immutability\n state.overflowLabel.className = mergeClasses(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);\n }\n return state;\n};\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */ export const useGroupChildClassName = (layout, size)=>{\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n return mergeClasses(...layoutClasses);\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","Bt984gj","mc9l5x","Bnnss6s","qhf8xq","overflowItem","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","nonOverflowItem","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useAvatarStyles","pie","useOverflowLabelStyles","Frg6f3","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useStackStyles","thick","E5pizo","thicker","thickest","xxs","jhia2w","xs","s","l","useSpreadStyles","mNudge","m","xl","usePieStyles","slices","B3gf25r","Be2twx7","Bvaow4n","Gpecfs","bhabj1","B7rc6i7","Bwrfys5","Bwuzm9m","fflka","do7bja","Be8zqhl","Bij0kh0","Bwexnyt","Bhe5x6o","B3kv7bh","rtlSlices","uiicq7","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"mappings":"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"}
|
|
@@ -205,7 +205,6 @@ const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
|
|
|
205
205
|
}
|
|
206
206
|
});
|
|
207
207
|
const useAvatarGroupItemStyles_unstable = (state)=>{
|
|
208
|
-
'use no memo';
|
|
209
208
|
const { isOverflowItem, layout, size } = state;
|
|
210
209
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
211
210
|
const avatarStyles = useAvatarStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: { padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}` },\n nonOverflowItem: { borderRadius: tokens.borderRadiusCircular },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: { borderRadius: '0' },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n 'use no memo';\n\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.avatar.className = mergeClasses(\n avatarGroupItemClassNames.avatar,\n !isOverflowItem && avatarStyles.nonOverflowItem,\n layout === 'pie' && avatarStyles.pie,\n state.avatar.className,\n );\n\n if (state.overflowLabel) {\n // eslint-disable-next-line react-hooks/immutability\n state.overflowLabel.className = mergeClasses(\n avatarGroupItemClassNames.overflowLabel,\n overflowLabelStyles.base,\n state.overflowLabel.className,\n );\n }\n\n return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n\n return mergeClasses(...layoutClasses);\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","alignItems","display","flexShrink","position","overflowItem","padding","spacingVerticalXS","spacingHorizontalXS","nonOverflowItem","borderRadius","borderRadiusCircular","useAvatarStyles","pie","useOverflowLabelStyles","marginLeft","spacingHorizontalS","color","colorNeutralForeground1","body1","useStackStyles","thick","boxShadow","strokeWidthThick","colorNeutralBackground2","thicker","strokeWidthThicker","thickest","strokeWidthThickest","xxs","spacingHorizontalXXS","xs","s","l","spacingHorizontalL","useSpreadStyles","mNudge","spacingHorizontalMNudge","m","spacingHorizontalM","xl","spacingHorizontalXL","usePieStyles","slices","clipPath","left","transform","transformOrigin","top","rtlSlices","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: { padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}` },\n nonOverflowItem: { borderRadius: tokens.borderRadiusCircular },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: { borderRadius: '0' },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.avatar.className = mergeClasses(\n avatarGroupItemClassNames.avatar,\n !isOverflowItem && avatarStyles.nonOverflowItem,\n layout === 'pie' && avatarStyles.pie,\n state.avatar.className,\n );\n\n if (state.overflowLabel) {\n // eslint-disable-next-line react-hooks/immutability\n state.overflowLabel.className = mergeClasses(\n avatarGroupItemClassNames.overflowLabel,\n overflowLabelStyles.base,\n state.overflowLabel.className,\n );\n }\n\n return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n\n return mergeClasses(...layoutClasses);\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","useSizeStyles","useFluent_unstable","useFluent","avatarGroupItemClassNames","root","avatar","overflowLabel","avatarGroupItemDividerWidthVar","useRootStyles","base","alignItems","display","flexShrink","position","overflowItem","padding","spacingVerticalXS","spacingHorizontalXS","nonOverflowItem","borderRadius","borderRadiusCircular","useAvatarStyles","pie","useOverflowLabelStyles","marginLeft","spacingHorizontalS","color","colorNeutralForeground1","body1","useStackStyles","thick","boxShadow","strokeWidthThick","colorNeutralBackground2","thicker","strokeWidthThicker","thickest","strokeWidthThickest","xxs","spacingHorizontalXXS","xs","s","l","spacingHorizontalL","useSpreadStyles","mNudge","spacingHorizontalMNudge","m","spacingHorizontalM","xl","spacingHorizontalXL","usePieStyles","slices","clipPath","left","transform","transformOrigin","top","rtlSlices","useAvatarGroupItemStyles_unstable","state","isOverflowItem","layout","size","dir","avatarStyles","overflowLabelStyles","pieStyles","rootStyles","sizeStyles","groupChildClassName","useGroupChildClassName","rootClasses","push","className","stackStyles","spreadStyles","layoutClasses"],"mappings":"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"}
|
|
@@ -454,7 +454,6 @@ const avatarGroupPopoverClassNames = {
|
|
|
454
454
|
]
|
|
455
455
|
});
|
|
456
456
|
const useAvatarGroupPopoverStyles_unstable = (state)=>{
|
|
457
|
-
'use no memo';
|
|
458
457
|
const { indicator, size, layout, popoverOpen } = state;
|
|
459
458
|
const sizeStyles = (0, _useAvatarStylesstyles.useSizeStyles)();
|
|
460
459
|
const triggerButtonStyles = useTriggerButtonStyles();
|
package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAvatarGroupPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupPopoverClassNames = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton'\n};\n/**\n * Styles for the content slot.\n */ const useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/**\n * Styles for the popoverSurface slot.\n */ const usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n overflow: 'hidden scroll',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n width: '220px'\n }\n});\n/**\n * Styles for the triggerButton slot.\n */ const useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusCircular,\n ...shorthands.borderStyle('solid'),\n padding: '0',\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText')\n }\n },\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent'\n },\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none'\n }),\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n },\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n icon12: {\n fontSize: '12px'\n },\n icon16: {\n fontSize: '16px'\n },\n icon20: {\n fontSize: '20px'\n },\n icon24: {\n fontSize: '24px'\n },\n icon28: {\n fontSize: '28px'\n },\n icon32: {\n fontSize: '32px'\n },\n icon48: {\n fontSize: '48px'\n },\n caption2Strong: {\n ...typographyStyles.caption2Strong\n },\n caption1Strong: {\n ...typographyStyles.caption1Strong\n },\n body1Strong: {\n ...typographyStyles.body1Strong\n },\n subtitle2: {\n ...typographyStyles.subtitle2\n },\n subtitle1: {\n ...typographyStyles.subtitle1\n },\n title3: {\n ...typographyStyles.title3\n },\n borderThin: {\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n borderThick: {\n ...shorthands.borderWidth(tokens.strokeWidthThick)\n },\n borderThicker: {\n ...shorthands.borderWidth(tokens.strokeWidthThicker)\n },\n borderThickest: {\n ...shorthands.borderWidth(tokens.strokeWidthThickest)\n }\n});\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const triggerButtonClasses = [];\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.className = mergeClasses(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);\n // eslint-disable-next-line react-hooks/immutability\n state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","__styles","mergeClasses","shorthands","tokens","typographyStyles","useGroupChildClassName","useSizeStyles","avatarGroupPopoverClassNames","root","content","popoverSurface","tooltip","triggerButton","useContentStyles","base","dclx09","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","d","p","usePopoverSurfaceStyles","Bxyxcbc","sshi5w","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useTriggerButtonStyles","qhf8xq","Bnnss6s","Brf1p80","Bt984gj","sj55zd","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","oivjwe","wvpqe5","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","pie","focusIndicator","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","g9k6zt","states","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","lj723h","ecr2s2","B6oc9vd","ak43y8","wmxk5l","B50zh58","selected","icon12","Be2twd7","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","Bahqtrf","Bhrd7zp","Bg96gwp","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","borderThick","borderThicker","borderThickest","m","h","a","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useAvatarGroupPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupPopoverClassNames = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton'\n};\n/**\n * Styles for the content slot.\n */ const useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/**\n * Styles for the popoverSurface slot.\n */ const usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n overflow: 'hidden scroll',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n width: '220px'\n }\n});\n/**\n * Styles for the triggerButton slot.\n */ const useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusCircular,\n ...shorthands.borderStyle('solid'),\n padding: '0',\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText')\n }\n },\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent'\n },\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none'\n }),\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n },\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n icon12: {\n fontSize: '12px'\n },\n icon16: {\n fontSize: '16px'\n },\n icon20: {\n fontSize: '20px'\n },\n icon24: {\n fontSize: '24px'\n },\n icon28: {\n fontSize: '28px'\n },\n icon32: {\n fontSize: '32px'\n },\n icon48: {\n fontSize: '48px'\n },\n caption2Strong: {\n ...typographyStyles.caption2Strong\n },\n caption1Strong: {\n ...typographyStyles.caption1Strong\n },\n body1Strong: {\n ...typographyStyles.body1Strong\n },\n subtitle2: {\n ...typographyStyles.subtitle2\n },\n subtitle1: {\n ...typographyStyles.subtitle1\n },\n title3: {\n ...typographyStyles.title3\n },\n borderThin: {\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n borderThick: {\n ...shorthands.borderWidth(tokens.strokeWidthThick)\n },\n borderThicker: {\n ...shorthands.borderWidth(tokens.strokeWidthThicker)\n },\n borderThickest: {\n ...shorthands.borderWidth(tokens.strokeWidthThickest)\n }\n});\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const triggerButtonClasses = [];\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.className = mergeClasses(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);\n // eslint-disable-next-line react-hooks/immutability\n state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","__styles","mergeClasses","shorthands","tokens","typographyStyles","useGroupChildClassName","useSizeStyles","avatarGroupPopoverClassNames","root","content","popoverSurface","tooltip","triggerButton","useContentStyles","base","dclx09","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","d","p","usePopoverSurfaceStyles","Bxyxcbc","sshi5w","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useTriggerButtonStyles","qhf8xq","Bnnss6s","Brf1p80","Bt984gj","sj55zd","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","oivjwe","wvpqe5","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","pie","focusIndicator","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","g9k6zt","states","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","lj723h","ecr2s2","B6oc9vd","ak43y8","wmxk5l","B50zh58","selected","icon12","Be2twd7","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","Bahqtrf","Bhrd7zp","Bg96gwp","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","borderThick","borderThicker","borderThickest","m","h","a","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAMCQ,4BAA4B;;;IAiIxBoH,oCAAoC;;;;uBArIA,gBAAgB;gDAE9B,oDAAoD;uCAC7D,kCAAkC;AACzD,qCAAqC;IACxCnH,IAAI,EAAE,wBAAwB;IAC9BC,OAAO,EAAE,iCAAiC;IAC1CC,cAAc,EAAE,wCAAwC;IACxDC,OAAO,EAAE,iCAAiC;IAC1CC,aAAa,EAAE;AACnB,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGb,eAAA,EAAA;IAAAc,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAQ5B,CAAC;AACF;;CAEA,GAAI,MAAMC,uBAAuB,GAAA,WAAA,OAAG9B,eAAA,EAAA;IAAAc,IAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAd,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAR,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAQnC,CAAC;AACF;;CAEA,GAAI,MAAMQ,sBAAsB,GAAA,WAAA,OAAGrC,eAAA,EAAA;IAAAc,IAAA,EAAA;QAAAY,MAAA,EAAA;QAAAY,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAnC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAgC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,GAAA,EAAA;QAAAlB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAL,MAAA,EAAA;IAAA;IAAAoB,cAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAApD,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAgD,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,MAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;IAAAI,MAAA,EAAA;QAAAJ,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAL,OAAA,EAAA;IAAA;IAAAM,MAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;IAAAO,cAAA,EAAA;QAAAC,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAH,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,WAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,SAAA,EAAA;QAAAL,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAI,SAAA,EAAA;QAAAN,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAP,OAAA,EAAA;QAAAR,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,UAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,WAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,aAAA,EAAA;QAAAL,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAG,cAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAxF,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAA2F,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA+FlC,CAAC;AAGS,8CAA8CE,KAAK,IAAG;IAC7D,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,MAAM,EAAEC,WAAAA,EAAa,GAAGJ,KAAK;IACtD,MAAMK,UAAU,GAAG3H,wCAAa,CAAC,CAAC;IAClC,MAAM4H,mBAAmB,GAAG7F,sBAAsB,CAAC,CAAC;IACpD,MAAM8F,aAAa,GAAGtH,gBAAgB,CAAC,CAAC;IACxC,MAAMuH,oBAAoB,GAAGtG,uBAAuB,CAAC,CAAC;IACtD,MAAMuG,mBAAmB,OAAGhI,sDAAsB,EAAC0H,MAAM,EAAED,IAAI,CAAC;IAChE,MAAMQ,oBAAoB,GAAG,EAAE;IAC/B,IAAIR,IAAI,GAAG,EAAE,EAAE;QACXQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAAClB,UAAU,CAAC;IAC7D,CAAC,MAAM,IAAIc,IAAI,GAAG,EAAE,EAAE;QAClBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACb,WAAW,CAAC;IAC9D,CAAC,MAAM,IAAIS,IAAI,GAAG,EAAE,EAAE;QAClBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACZ,aAAa,CAAC;IAChE,CAAC,MAAM;QACHgB,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACX,cAAc,CAAC;IACjE;IACA,IAAIM,SAAS,KAAK,OAAO,EAAE;QACvB,IAAIC,IAAI,IAAI,EAAE,EAAE;YACZQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAAC3B,cAAc,CAAC;QACjE,CAAC,MAAM,IAAIuB,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACvB,cAAc,CAAC;QACjE,CAAC,MAAM,IAAImB,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACtB,WAAW,CAAC;QAC9D,CAAC,MAAM,IAAIkB,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACrB,SAAS,CAAC;QAC5D,CAAC,MAAM,IAAIiB,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACpB,SAAS,CAAC;QAC5D,CAAC,MAAM;YACHwB,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACnB,MAAM,CAAC;QACzD;IACJ,CAAC,MAAM;QACH,IAAIe,IAAI,IAAI,EAAE,EAAE;YACZQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACnC,MAAM,CAAC;QACzD,CAAC,MAAM,IAAI+B,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAACjC,MAAM,CAAC;QACzD,CAAC,MAAM,IAAI6B,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAAChC,MAAM,CAAC;QACzD,CAAC,MAAM,IAAI4B,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAAC/B,MAAM,CAAC;QACzD,CAAC,MAAM,IAAI2B,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAAC9B,MAAM,CAAC;QACzD,CAAC,MAAM,IAAI0B,IAAI,IAAI,EAAE,EAAE;YACnBQ,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAAC7B,MAAM,CAAC;QACzD,CAAC,MAAM;YACHiC,oBAAoB,CAACC,IAAI,CAACL,mBAAmB,CAAC5B,MAAM,CAAC;QACzD;IACJ;IACA,oDAAA;IACAsB,KAAK,CAAChH,aAAa,CAAC4H,SAAS,GAAGvI,uBAAY,EAACM,4BAA4B,CAACK,aAAa,EAAEyH,mBAAmB,EAAEJ,UAAU,CAACH,IAAI,CAAC,EAAEI,mBAAmB,CAACpH,IAAI,EAAEiH,MAAM,KAAK,KAAK,IAAIG,mBAAmB,CAACrE,GAAG,EAAEqE,mBAAmB,CAACpE,cAAc,EAAEiE,MAAM,KAAK,KAAK,IAAIG,mBAAmB,CAACjD,MAAM,EAAE8C,MAAM,KAAK,KAAK,IAAIC,WAAW,IAAIE,mBAAmB,CAACpC,QAAQ,EAAE,GAAGwC,oBAAoB,EAAEV,KAAK,CAAChH,aAAa,CAAC4H,SAAS,CAAC;IACnZ,oDAAA;IACAZ,KAAK,CAACnH,OAAO,CAAC+H,SAAS,OAAGvI,mBAAY,EAACM,4BAA4B,CAACE,OAAO,EAAE0H,aAAa,CAACrH,IAAI,EAAE8G,KAAK,CAACnH,OAAO,CAAC+H,SAAS,CAAC;IACzH,oDAAA;IACAZ,KAAK,CAAClH,cAAc,CAAC8H,SAAS,OAAGvI,mBAAY,EAACM,4BAA4B,CAACG,cAAc,EAAE0H,oBAAoB,CAACtH,IAAI,EAAE8G,KAAK,CAAClH,cAAc,CAAC8H,SAAS,CAAC;IACrJ,OAAOZ,KAAK;AAChB,CAAC"}
|
package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js
CHANGED
|
@@ -150,7 +150,6 @@ const avatarGroupPopoverClassNames = {
|
|
|
150
150
|
}
|
|
151
151
|
});
|
|
152
152
|
const useAvatarGroupPopoverStyles_unstable = (state)=>{
|
|
153
|
-
'use no memo';
|
|
154
153
|
const { indicator, size, layout, popoverOpen } = state;
|
|
155
154
|
const sizeStyles = (0, _useAvatarStylesstyles.useSizeStyles)();
|
|
156
155
|
const triggerButtonStyles = useTriggerButtonStyles();
|