@fluentui/react-avatar 9.11.3 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0
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 +20 -2
- package/dist/index.d.cts +473 -0
- package/lib/Avatar.js +1 -1
- package/lib/Avatar.js.map +1 -1
- package/lib/AvatarGroup.js +1 -1
- package/lib/AvatarGroup.js.map +1 -1
- package/lib/AvatarGroupItem.js +1 -1
- package/lib/AvatarGroupItem.js.map +1 -1
- package/lib/AvatarGroupPopover.js +1 -1
- package/lib/AvatarGroupPopover.js.map +1 -1
- package/lib/components/Avatar/Avatar.js +5 -5
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/Avatar/index.js +4 -4
- package/lib/components/Avatar/index.js.map +1 -1
- package/lib/components/Avatar/renderAvatar.js +1 -1
- package/lib/components/Avatar/useAvatar.js +7 -7
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.styles.js +2 -2
- package/lib/components/Avatar/useAvatarStyles.styles.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.styles.raw.js +2 -2
- package/lib/components/AvatarGroup/AvatarGroup.js +6 -6
- package/lib/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/index.js +5 -5
- package/lib/components/AvatarGroup/index.js.map +1 -1
- package/lib/components/AvatarGroup/renderAvatarGroup.js +2 -2
- package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js +3 -3
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js +3 -3
- package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js +5 -5
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/index.js +4 -4
- package/lib/components/AvatarGroupItem/index.js.map +1 -1
- package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js +5 -5
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js +4 -4
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js +4 -4
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js +5 -5
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/index.js +5 -5
- package/lib/components/AvatarGroupPopover/index.js.map +1 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +3 -3
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js +7 -7
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js +5 -5
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js +5 -5
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js.map +1 -1
- package/lib/contexts/AvatarContext.js +1 -1
- package/lib/contexts/AvatarGroupContext.js +1 -1
- package/lib/contexts/index.js +2 -2
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js +6 -6
- package/lib/index.js.map +1 -1
- package/lib/utils/index.js +2 -2
- package/lib/utils/index.js.map +1 -1
- package/lib-commonjs/{Avatar.js → Avatar.cjs} +1 -1
- package/lib-commonjs/{Avatar.js.map → Avatar.cjs.map} +1 -1
- package/lib-commonjs/{AvatarGroup.js → AvatarGroup.cjs} +1 -1
- package/lib-commonjs/{AvatarGroup.js.map → AvatarGroup.cjs.map} +1 -1
- package/lib-commonjs/{AvatarGroupItem.js → AvatarGroupItem.cjs} +1 -1
- package/lib-commonjs/{AvatarGroupItem.js.map → AvatarGroupItem.cjs.map} +1 -1
- package/lib-commonjs/{AvatarGroupPopover.js → AvatarGroupPopover.cjs} +1 -1
- package/lib-commonjs/{AvatarGroupPopover.js.map → AvatarGroupPopover.cjs.map} +1 -1
- package/lib-commonjs/components/Avatar/{Avatar.js → Avatar.cjs} +3 -3
- package/lib-commonjs/components/Avatar/{Avatar.js.map → Avatar.cjs.map} +1 -1
- package/lib-commonjs/components/Avatar/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Avatar/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Avatar/{useAvatar.js → useAvatar.cjs} +2 -2
- package/lib-commonjs/components/Avatar/{useAvatar.js.map → useAvatar.cjs.map} +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/AvatarGroup/{AvatarGroup.js → AvatarGroup.cjs} +4 -4
- package/lib-commonjs/components/AvatarGroup/{AvatarGroup.js.map → AvatarGroup.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroup/{index.js → index.cjs} +5 -5
- package/lib-commonjs/components/AvatarGroup/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroup/{renderAvatarGroup.js → renderAvatarGroup.cjs} +1 -1
- package/lib-commonjs/components/AvatarGroup/{renderAvatarGroup.js.map → renderAvatarGroup.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroup/{useAvatarGroupStyles.styles.js → useAvatarGroupStyles.styles.cjs} +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/AvatarGroup/{useAvatarGroupStyles.styles.raw.js → useAvatarGroupStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/AvatarGroup/{useAvatarGroupStyles.styles.raw.js.map → useAvatarGroupStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupItem/{AvatarGroupItem.js → AvatarGroupItem.cjs} +3 -3
- package/lib-commonjs/components/AvatarGroupItem/{AvatarGroupItem.js.map → AvatarGroupItem.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupItem/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/AvatarGroupItem/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupItem/{useAvatarGroupItem.js → useAvatarGroupItem.cjs} +3 -3
- package/lib-commonjs/components/AvatarGroupItem/{useAvatarGroupItem.js.map → useAvatarGroupItem.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupItem/{useAvatarGroupItemStyles.styles.js → useAvatarGroupItemStyles.styles.cjs} +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/AvatarGroupItem/{useAvatarGroupItemStyles.styles.raw.js → useAvatarGroupItemStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/AvatarGroupItem/{useAvatarGroupItemStyles.styles.raw.js.map → useAvatarGroupItemStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/{AvatarGroupPopover.js → AvatarGroupPopover.cjs} +4 -4
- package/lib-commonjs/components/AvatarGroupPopover/{AvatarGroupPopover.js.map → AvatarGroupPopover.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/{index.js → index.cjs} +5 -5
- package/lib-commonjs/components/AvatarGroupPopover/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/{renderAvatarGroupPopover.js → renderAvatarGroupPopover.cjs} +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/{renderAvatarGroupPopover.js.map → renderAvatarGroupPopover.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/{useAvatarGroupPopover.js → useAvatarGroupPopover.cjs} +2 -2
- package/lib-commonjs/components/AvatarGroupPopover/{useAvatarGroupPopover.js.map → useAvatarGroupPopover.cjs.map} +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/{useAvatarGroupPopoverStyles.styles.js → useAvatarGroupPopoverStyles.styles.cjs} +2 -2
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/{useAvatarGroupPopoverStyles.styles.raw.js → useAvatarGroupPopoverStyles.styles.raw.cjs} +2 -2
- package/lib-commonjs/components/AvatarGroupPopover/{useAvatarGroupPopoverStyles.styles.raw.js.map → useAvatarGroupPopoverStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/contexts/{index.js → index.cjs} +2 -2
- package/lib-commonjs/contexts/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/{index.js → index.cjs} +6 -6
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/utils/{index.js → index.cjs} +2 -2
- package/lib-commonjs/utils/{index.js.map → index.cjs.map} +1 -1
- package/package.json +23 -22
- package/lib-commonjs/components/Avatar/useAvatarStyles.styles.js.map +0 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.styles.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map +0 -1
- /package/lib-commonjs/components/Avatar/{Avatar.types.js → Avatar.types.cjs} +0 -0
- /package/lib-commonjs/components/Avatar/{Avatar.types.js.map → Avatar.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Avatar/{renderAvatar.js → renderAvatar.cjs} +0 -0
- /package/lib-commonjs/components/Avatar/{renderAvatar.js.map → renderAvatar.cjs.map} +0 -0
- /package/lib-commonjs/components/Avatar/{useAvatarStyles.styles.js → useAvatarStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/Avatar/{useAvatarStyles.styles.raw.js → useAvatarStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/Avatar/{useAvatarStyles.styles.raw.js.map → useAvatarStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/AvatarGroup/{AvatarGroup.types.js → AvatarGroup.types.cjs} +0 -0
- /package/lib-commonjs/components/AvatarGroup/{AvatarGroup.types.js.map → AvatarGroup.types.cjs.map} +0 -0
- /package/lib-commonjs/components/AvatarGroup/{useAvatarGroup.js → useAvatarGroup.cjs} +0 -0
- /package/lib-commonjs/components/AvatarGroup/{useAvatarGroup.js.map → useAvatarGroup.cjs.map} +0 -0
- /package/lib-commonjs/components/AvatarGroup/{useAvatarGroupContextValues.js → useAvatarGroupContextValues.cjs} +0 -0
- /package/lib-commonjs/components/AvatarGroup/{useAvatarGroupContextValues.js.map → useAvatarGroupContextValues.cjs.map} +0 -0
- /package/lib-commonjs/components/AvatarGroupItem/{AvatarGroupItem.types.js → AvatarGroupItem.types.cjs} +0 -0
- /package/lib-commonjs/components/AvatarGroupItem/{AvatarGroupItem.types.js.map → AvatarGroupItem.types.cjs.map} +0 -0
- /package/lib-commonjs/components/AvatarGroupItem/{renderAvatarGroupItem.js → renderAvatarGroupItem.cjs} +0 -0
- /package/lib-commonjs/components/AvatarGroupItem/{renderAvatarGroupItem.js.map → renderAvatarGroupItem.cjs.map} +0 -0
- /package/lib-commonjs/components/AvatarGroupPopover/{AvatarGroupPopover.types.js → AvatarGroupPopover.types.cjs} +0 -0
- /package/lib-commonjs/components/AvatarGroupPopover/{AvatarGroupPopover.types.js.map → AvatarGroupPopover.types.cjs.map} +0 -0
- /package/lib-commonjs/components/AvatarGroupPopover/{useAvatarGroupPopoverContextValues.js → useAvatarGroupPopoverContextValues.cjs} +0 -0
- /package/lib-commonjs/components/AvatarGroupPopover/{useAvatarGroupPopoverContextValues.js.map → useAvatarGroupPopoverContextValues.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{AvatarContext.js → AvatarContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{AvatarContext.js.map → AvatarContext.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{AvatarGroupContext.js → AvatarGroupContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{AvatarGroupContext.js.map → AvatarGroupContext.cjs.map} +0 -0
- /package/lib-commonjs/utils/{getInitials.js → getInitials.cjs} +0 -0
- /package/lib-commonjs/utils/{getInitials.js.map → getInitials.cjs.map} +0 -0
- /package/lib-commonjs/utils/{partitionAvatarGroupItems.js → partitionAvatarGroupItems.cjs} +0 -0
- /package/lib-commonjs/utils/{partitionAvatarGroupItems.js.map → partitionAvatarGroupItems.cjs.map} +0 -0
|
@@ -0,0 +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.js\";\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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"}
|
|
@@ -22,7 +22,7 @@ _export(exports, {
|
|
|
22
22
|
});
|
|
23
23
|
const _react = require("@griffel/react");
|
|
24
24
|
const _reacttheme = require("@fluentui/react-theme");
|
|
25
|
-
const _Avatar = require("../../Avatar");
|
|
25
|
+
const _Avatar = require("../../Avatar.cjs");
|
|
26
26
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
27
27
|
const avatarGroupItemClassNames = {
|
|
28
28
|
root: 'fui-AvatarGroupItem',
|
|
@@ -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 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":"AAAA;;;;;;;;;;;;IAWaO,yBAAAA;;;qCAuJAwD;eAAAA;;IAmEAY,sBAAAA;;;;uBAnO4B,iBAAiB;4BACjB,wBAAwB;wBACnC,kBAAe;qCACG,kCAAkC;AAM3E,kCAAwE;IAC7EnE,MAAM;IACNC,QAAQ;IACRC,eAAe;AACjB,EAAE;AAEF,MAAMC,iCAAiC;AAEvC;;CAEC,GACD,MAAMC,oBAAgBZ,iBAAAA,EAAW;IAC/Ba,MAAM;QACJC,YAAY;QACZC,SAAS;QACTC,YAAY;QACZC,UAAU;IACZ;IACAC,cAAc;QAAEC,SAAS,GAAGjB,kBAAAA,CAAOkB,iBAAiB,CAAC,CAAC,EAAElB,kBAAAA,CAAOmB,mBAAmB,EAAE;IAAC;IACrFC,iBAAiB;QAAEC,cAAcrB,kBAAAA,CAAOsB,oBAAoB;IAAC;AAC/D;AAEA;;CAEC,GACD,MAAMC,sBAAkBzB,iBAAAA,EAAW;IACjCsB,iBAAiB;QACfL,UAAU;IACZ;IACAS,KAAK;QAAEH,cAAc;IAAI;AAC3B;AAEA;;CAEC,GACD,MAAMI,6BAAyB3B,iBAAAA,EAAW;IACxCa,MAAM;QACJe,YAAY1B,kBAAAA,CAAO2B,kBAAkB;QACrCC,OAAO5B,kBAAAA,CAAO6B,uBAAuB;QACrC,GAAG5B,4BAAAA,CAAiB6B,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAiBjC,iBAAAA,EAAW;IAChCkC,OAAO;QACLC,WAAW,CAAC,MAAM,EAAEjC,kBAAAA,CAAOkC,gBAAgB,CAAC,CAAC,EAAElC,kBAAAA,CAAOmC,uBAAuB,EAAE;IACjF;IACAC,SAAS;QACPH,WAAW,CAAC,MAAM,EAAEjC,kBAAAA,CAAOqC,kBAAkB,CAAC,CAAC,EAAErC,kBAAAA,CAAOmC,uBAAuB,EAAE;IACnF;IACAG,UAAU;QACRL,WAAW,CAAC,MAAM,EAAEjC,kBAAAA,CAAOuC,mBAAmB,CAAC,CAAC,EAAEvC,kBAAAA,CAAOmC,uBAAuB,EAAE;IACpF;IACAK,KAAK;QAAE,uBAAuB;YAAEd,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAOyC,oBAAoB,CAAC,CAAC,CAAC;QAAC;IAAE;IAC1FC,IAAI;QAAE,uBAAuB;YAAEhB,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAOmB,mBAAmB,CAAC,CAAC,CAAC;QAAC;IAAE;IACxFwB,GAAG;QAAE,uBAAuB;YAAEjB,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAO2B,kBAAkB,CAAC,CAAC,CAAC;QAAC;IAAE;IACtFiB,GAAG;QAAE,uBAAuB;YAAElB,YAAY,CAAC,UAAU,EAAE1B,kBAAAA,CAAO6C,kBAAkB,CAAC,CAAC,CAAC;QAAC;IAAE;AACxF;AAEA;;CAEC,GACD,MAAMC,sBAAkBhD,iBAAAA,EAAW;IACjC6C,GAAG;QAAE,uBAAuB;YAAEjB,YAAY1B,kBAAAA,CAAO2B,kBAAkB;QAAC;IAAE;IACtEoB,QAAQ;QAAE,uBAAuB;YAAErB,YAAY1B,kBAAAA,CAAOgD,uBAAuB;QAAC;IAAE;IAChFC,GAAG;QAAE,uBAAuB;YAAEvB,YAAY1B,kBAAAA,CAAOkD,kBAAkB;QAAC;IAAE;IACtEN,GAAG;QAAE,uBAAuB;YAAElB,YAAY1B,kBAAAA,CAAO6C,kBAAkB;QAAC;IAAE;IACtEM,IAAI;QAAE,uBAAuB;YAAEzB,YAAY1B,kBAAAA,CAAOoD,mBAAmB;QAAC;IAAE;AAC1E;AAEA;;CAEC,GACD,MAAMC,mBAAevD,iBAAAA,EAAW;IAC9Ba,MAAM;QACJI,UAAU;IACZ;IACAuC,QAAQ;QACN,aAAa;QACb,iBAAiB;QACjB,wCAAwC;YACtCC,UAAU,CAAC,wBAAwB,EAAE9C,+BAA+B,cAAc,CAAC;YACnF+C,MAAM;QACR;QACA,iBAAiB;QACjB,wCAAwC;YACtCD,UAAU,CAAC,8BAA8B,EAAE9C,+BAA+B,QAAQ,CAAC;YACnF+C,MAAM;QACR;QAEA,eAAe;QACf,iBAAiB;QACjB,wCAAwC;YACtCD,UAAU,CAAC,wBAAwB,EAAE9C,+BAA+B,cAAc,CAAC;YACnF+C,MAAM;QACR;QACA,iBAAiB;QACjB,wCAAwC;YACtC,yGAAyG;YACzGD,UAAU,CAAC,cAAc,EAAE9C,+BAA+B,MAAM,EAAEA,+BAA+B,EAAE,CAAC;YACpG+C,MAAM;YACNC,WAAW;YACXC,iBAAiB;QACnB;QACA,iBAAiB;QACjB,wCAAwC;YACtCH,UAAU,CAAC,UAAU,EAAE9C,+BAA+B,UAAU,EAAEA,+BAA+B,EAAE,CAAC;YACpG+C,MAAM;YACNG,KAAK;YACLF,WAAW;YACXC,iBAAiB;QACnB;IACF;IACAE,WAAW;QACT,aAAa;QACb,iBAAiB;QACjB,wCAAwC;YACtCL,UAAU,CAAC,8BAA8B,EAAE9C,+BAA+B,QAAQ,CAAC;QACrF;QACA,iBAAiB;QACjB,wCAAwC;YACtC8C,UAAU,CAAC,wBAAwB,EAAE9C,+BAA+B,cAAc,CAAC;QACrF;QAEA,eAAe;QACf,iBAAiB;QACjB,wCAAwC;YACtC8C,UAAU,CAAC,8BAA8B,EAAE9C,+BAA+B,QAAQ,CAAC;QACrF;QACA,iBAAiB;QACjB,wCAAwC;YACtC8C,UAAU,CAAC,YAAY,EAAE9C,+BAA+B,MAAM,EAAEA,+BAA+B,IAAI,CAAC;YACpG+C,MAAM;QACR;QACA,iBAAiB;QACjB,wCAAwC;YACtCD,UAAU,CAAC,UAAU,EAAE9C,+BAA+B,MAAM,EAAEA,+BAA+B,MAAM,CAAC;YACpG+C,MAAM;QACR;IACF;IACAxB,OAAO;QAAE,CAACvB,+BAA+B,EAAET,kBAAAA,CAAOkC,gBAAgB;IAAC;IACnEE,SAAS;QAAE,CAAC3B,+BAA+B,EAAET,kBAAAA,CAAOqC,kBAAkB;IAAC;IACvEC,UAAU;QAAE,CAAC7B,+BAA+B,EAAET,kBAAAA,CAAOuC,mBAAmB;IAAC;AAC3E;AAKO,0CAA0C,CAACuB;IAChD,MAAM,EAAEC,cAAc,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACzC,MAAM,EAAEI,GAAG,EAAE,OAAG9D,uCAAAA;IAEhB,MAAM+D,eAAe5C;IACrB,MAAM6C,sBAAsB3C;IAC5B,MAAM4C,YAAYhB;IAClB,MAAMiB,aAAa5D;IACnB,MAAM6D,aAAarE,yBAAAA;IAEnB,MAAMsE,sBAAsBC,uBAAuBT,QAAQC;IAE3D,MAAMS,cAAc;QAACJ,WAAW3D,IAAI;KAAC;IAErC,IAAI,CAACoD,gBAAgB;QACnBW,YAAYC,IAAI,CAACL,WAAWlD,eAAe;QAC3CsD,YAAYC,IAAI,CAACH;QACjBE,YAAYC,IAAI,CAACJ,UAAU,CAACN,KAAK;QAEjC,IAAID,WAAW,OAAO;YACpBU,YAAYC,IAAI,CAACN,UAAU1D,IAAI;YAE/B,IAAIsD,OAAO,IAAI;gBACbS,YAAYC,IAAI,CAACN,UAAUrC,KAAK;YAClC,OAAO,IAAIiC,OAAO,IAAI;gBACpBS,YAAYC,IAAI,CAACN,UAAUjC,OAAO;YACpC,OAAO;gBACLsC,YAAYC,IAAI,CAACN,UAAU/B,QAAQ;YACrC;YAEAoC,YAAYC,IAAI,CAACN,UAAUf,MAAM;YAEjC,IAAIY,QAAQ,OAAO;gBACjBQ,YAAYC,IAAI,CAACN,UAAUT,SAAS;YACtC;QACF;IACF,OAAO;QACLc,YAAYC,IAAI,CAACL,WAAWtD,YAAY;IAC1C;IAEA,oDAAoD;IACpD8C,MAAMxD,IAAI,CAACsE,SAAS,OAAG7E,mBAAAA,EAAaM,0BAA0BC,IAAI,KAAKoE,aAAaZ,MAAMxD,IAAI,CAACsE,SAAS;IAExG,oDAAoD;IACpDd,MAAMvD,MAAM,CAACqE,SAAS,OAAG7E,mBAAAA,EACvBM,0BAA0BE,MAAM,EAChC,CAACwD,kBAAkBI,aAAa/C,eAAe,EAC/C4C,WAAW,SAASG,aAAa3C,GAAG,EACpCsC,MAAMvD,MAAM,CAACqE,SAAS;IAGxB,IAAId,MAAMtD,aAAa,EAAE;QACvB,oDAAoD;QACpDsD,MAAMtD,aAAa,CAACoE,SAAS,OAAG7E,mBAAAA,EAC9BM,0BAA0BG,aAAa,EACvC4D,oBAAoBzD,IAAI,EACxBmD,MAAMtD,aAAa,CAACoE,SAAS;IAEjC;IAEA,OAAOd;AACT,EAAE;AAMK,+BAA+B,CAACE,QAAoCC;IACzE,MAAMY,cAAc9C;IACpB,MAAM+C,eAAehC;IACrB,MAAMiC,gBAAgB,EAAE;IAExB,IAAId,MAAM;QACR,IAAID,WAAW,SAAS;YACtB,IAAIC,OAAO,IAAI;gBACbc,cAAcJ,IAAI,CAACE,YAAY7C,KAAK;YACtC,OAAO,IAAIiC,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACE,YAAYzC,OAAO;YACxC,OAAO;gBACL2C,cAAcJ,IAAI,CAACE,YAAYvC,QAAQ;YACzC;YAEA,IAAI2B,OAAO,IAAI;gBACbc,cAAcJ,IAAI,CAACE,YAAYrC,GAAG;YACpC,OAAO,IAAIyB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACE,YAAYnC,EAAE;YACnC,OAAO,IAAIuB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACE,YAAYlC,CAAC;YAClC,OAAO;gBACLoC,cAAcJ,IAAI,CAACE,YAAYjC,CAAC;YAClC;QACF,OAAO,IAAIoB,WAAW,UAAU;YAC9B,IAAIC,OAAO,IAAI;gBACbc,cAAcJ,IAAI,CAACG,aAAanC,CAAC;YACnC,OAAO,IAAIsB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACG,aAAa/B,MAAM;YACxC,OAAO,IAAIkB,OAAO,IAAI;gBACpBc,cAAcJ,IAAI,CAACG,aAAalC,CAAC;YACnC,OAAO;gBACLmC,cAAcJ,IAAI,CAACG,aAAa3B,EAAE;YACpC;QACF;IACF;IAEA,WAAOpD,mBAAAA,KAAgBgF;AACzB,EAAE"}
|
package/lib-commonjs/components/AvatarGroupPopover/{AvatarGroupPopover.js → AvatarGroupPopover.cjs}
RENAMED
|
@@ -9,11 +9,11 @@ Object.defineProperty(exports, "AvatarGroupPopover", {
|
|
|
9
9
|
return AvatarGroupPopover;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover");
|
|
13
|
-
const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues");
|
|
12
|
+
const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover.cjs");
|
|
13
|
+
const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues.cjs");
|
|
14
14
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
15
|
-
const _useAvatarGroupPopover = require("./useAvatarGroupPopover");
|
|
16
|
-
const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles");
|
|
15
|
+
const _useAvatarGroupPopover = require("./useAvatarGroupPopover.cjs");
|
|
16
|
+
const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles.cjs");
|
|
17
17
|
const AvatarGroupPopover = (props)=>{
|
|
18
18
|
const state = (0, _useAvatarGroupPopover.useAvatarGroupPopover_unstable)(props);
|
|
19
19
|
const contextValues = (0, _useAvatarGroupPopoverContextValues.useAvatarGroupPopoverContextValues_unstable)(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;0CAGkD,
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;0CAGkD,gCAA6B;oDACnB,0CAAuC;qCACvD,kCAAkC;uCAC/B,6BAA0B;mDACpB,0CAAuC;AAMrF,MAAMK,qBAAwDC,CAAAA;IACnE,MAAMC,YAAQJ,qDAAAA,EAA+BG;IAC7C,MAAME,oBAAgBP,+EAAAA,EAA4CM;QAElEH,uEAAAA,EAAqCG;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}
|
|
@@ -31,8 +31,8 @@ _export(exports, {
|
|
|
31
31
|
return _useAvatarGroupPopover.useAvatarGroupPopover_unstable;
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
-
const _AvatarGroupPopover = require("./AvatarGroupPopover");
|
|
35
|
-
const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover");
|
|
36
|
-
const _useAvatarGroupPopover = require("./useAvatarGroupPopover");
|
|
37
|
-
const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles");
|
|
38
|
-
const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues");
|
|
34
|
+
const _AvatarGroupPopover = require("./AvatarGroupPopover.cjs");
|
|
35
|
+
const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover.cjs");
|
|
36
|
+
const _useAvatarGroupPopover = require("./useAvatarGroupPopover.cjs");
|
|
37
|
+
const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles.cjs");
|
|
38
|
+
const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverBase_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"mappings":";;;;;;;;;;;IAASA;qDAAkB;;IAWzBI;8EAA4B;;;eAHrBH,2DAAiC;;;eACDE,yDAAkC;;;eAKlEG,+EAA2C;;;eAFlDD,uEAAoC;;;eAH7BH,qDAA8B;;;oCATJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverBase_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"mappings":";;;;;;;;;;;IAASA;qDAAkB;;IAWzBI;8EAA4B;;;eAHrBH,2DAAiC;;;eACDE,yDAAkC;;;eAKlEG,+EAA2C;;;eAFlDD,uEAAoC;;;eAH7BH,qDAA8B;;;oCATJ,0BAAuB;0CAQR,gCAA6B;uCACI,6BAA0B;mDAItG,0CAAuC;oDACc,0CAAuC"}
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "renderAvatarGroupPopover_unstable", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
|
-
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
|
|
12
|
+
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext.cjs");
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _reactpopover = require("@fluentui/react-popover");
|
|
15
15
|
const renderAvatarGroupPopover_unstable = (state, contextValues)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverBaseState,\n contextValues: AvatarGroupContextValues,\n): JSXElement => {\n assertSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <state.root>\n <PopoverTrigger disableButtonEnhancement>\n <state.tooltip>\n <state.triggerButton />\n </state.tooltip>\n </PopoverTrigger>\n <state.popoverSurface>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.content />\n </AvatarGroupProvider>\n </state.popoverSurface>\n </state.root>\n );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":";;;;+BAaaG;;;;;;4BAZb,iCAAiD;oCACb,
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverBaseState,\n contextValues: AvatarGroupContextValues,\n): JSXElement => {\n assertSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <state.root>\n <PopoverTrigger disableButtonEnhancement>\n <state.tooltip>\n <state.triggerButton />\n </state.tooltip>\n </PopoverTrigger>\n <state.popoverSurface>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.content />\n </AvatarGroupProvider>\n </state.popoverSurface>\n </state.root>\n );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":";;;;+BAaaG;;;;;;4BAZb,iCAAiD;oCACb,uCAAoC;gCAG5C,4BAA4B;8BAEzB,0BAA0B;AAMlD,0CAA0C,CAC/CC,OACAC;QAEAJ,2BAAAA,EAAqCG;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACJ,4BAAAA,EAAAA;gBAAeK,wBAAwB,EAAA;0BACtC,WAAA,OAAA,eAAA,EAACH,MAAMI,OAAO,EAAA;8BACZ,WAAA,OAAA,eAAA,EAACJ,MAAMK,aAAa,EAAA,CAAA;;;8BAGxB,eAAA,EAACL,MAAMM,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACV,uCAAAA,EAAAA;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,WAAA,OAAA,eAAA,EAACR,MAAMS,OAAO,EAAA,CAAA;;;;;AAKxB,EAAE"}
|
|
@@ -19,8 +19,8 @@ _export(exports, {
|
|
|
19
19
|
});
|
|
20
20
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
21
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
|
-
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
|
|
23
|
-
const _useAvatarGroup = require("../AvatarGroup/useAvatarGroup");
|
|
22
|
+
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext.cjs");
|
|
23
|
+
const _useAvatarGroup = require("../AvatarGroup/useAvatarGroup.cjs");
|
|
24
24
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
25
25
|
const _reacticons = require("@fluentui/react-icons");
|
|
26
26
|
const _reactpopover = require("@fluentui/react-popover");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-popover';\nimport { Popover, type PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type {\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n AvatarGroupPopoverProps,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n const state = useAvatarGroupPopoverBase_unstable({\n indicator,\n ...baseProps,\n });\n\n if (layout === 'pie') {\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.children = null;\n } else if (indicator === 'icon') {\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.children = <MoreHorizontalRegular />;\n }\n\n return {\n size,\n ...state,\n\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n root: Popover,\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\n },\n root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: state.popoverSurface,\n elementType: PopoverSurface,\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: state.tooltip,\n elementType: Tooltip,\n }),\n };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n restOfProps.onOpenChange?.(e, data);\n setPopoverOpen(data.open);\n };\n\n let triggerButtonChildren;\n if (layout === 'pie') {\n triggerButtonChildren = null;\n } else if (indicator === 'count') {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n\n components: {\n root: 'div',\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: 'div',\n tooltip: 'div',\n },\n root: slot.always(\n {\n // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n children: <></>,\n size: 'small',\n trapFocus: true,\n ...restOfProps,\n open: popoverOpen,\n onOpenChange: handleOnPopoverChange,\n },\n { elementType: 'div' },\n ),\n triggerButton: slot.always(props.triggerButton, {\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n elementType: 'button',\n }),\n content: slot.always(props.content, {\n defaultProps: {\n children,\n role: 'list',\n },\n elementType: 'ul',\n }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n elementType: 'div',\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"AAAA;;;;;;;;;;;;sCAyEaiB;eAAAA;;IAhDAR,8BAAAA;;;;;iEAvBU,QAAQ;oCACgB,
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-popover';\nimport { Popover, type PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type {\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n AvatarGroupPopoverProps,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n const state = useAvatarGroupPopoverBase_unstable({\n indicator,\n ...baseProps,\n });\n\n if (layout === 'pie') {\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.children = null;\n } else if (indicator === 'icon') {\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.children = <MoreHorizontalRegular />;\n }\n\n return {\n size,\n ...state,\n\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n root: Popover,\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\n },\n root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: state.popoverSurface,\n elementType: PopoverSurface,\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: state.tooltip,\n elementType: Tooltip,\n }),\n };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n restOfProps.onOpenChange?.(e, data);\n setPopoverOpen(data.open);\n };\n\n let triggerButtonChildren;\n if (layout === 'pie') {\n triggerButtonChildren = null;\n } else if (indicator === 'count') {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n\n components: {\n root: 'div',\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: 'div',\n tooltip: 'div',\n },\n root: slot.always(\n {\n // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n children: <></>,\n size: 'small',\n trapFocus: true,\n ...restOfProps,\n open: popoverOpen,\n onOpenChange: handleOnPopoverChange,\n },\n { elementType: 'div' },\n ),\n triggerButton: slot.always(props.triggerButton, {\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n elementType: 'button',\n }),\n content: slot.always(props.content, {\n defaultProps: {\n children,\n role: 'list',\n },\n elementType: 'ul',\n }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n elementType: 'div',\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"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"}
|
|
@@ -18,8 +18,8 @@ _export(exports, {
|
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
const _react = require("@griffel/react");
|
|
21
|
-
const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles");
|
|
22
|
-
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
|
|
21
|
+
const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles.cjs");
|
|
22
|
+
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles.cjs");
|
|
23
23
|
const avatarGroupPopoverClassNames = {
|
|
24
24
|
root: 'fui-AvatarGroupPopover',
|
|
25
25
|
content: 'fui-AvatarGroupPopover__content',
|
|
@@ -0,0 +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.js\";\nimport { useSizeStyles } from \"../Avatar/useAvatarStyles.styles.js\";\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":"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"}
|
|
@@ -20,8 +20,8 @@ _export(exports, {
|
|
|
20
20
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
21
21
|
const _react = require("@griffel/react");
|
|
22
22
|
const _reacttheme = require("@fluentui/react-theme");
|
|
23
|
-
const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles");
|
|
24
|
-
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
|
|
23
|
+
const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles.cjs");
|
|
24
|
+
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles.cjs");
|
|
25
25
|
const avatarGroupPopoverClassNames = {
|
|
26
26
|
root: 'fui-AvatarGroupPopover',
|
|
27
27
|
content: 'fui-AvatarGroupPopover__content',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\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';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\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/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column',\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst 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/**\n * Styles for the triggerButton slot.\n */\nconst 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\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none',\n }),\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\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\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 caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\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\n const triggerButtonClasses = [];\n\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\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\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","useGroupChildClassName","useSizeStyles","avatarGroupPopoverClassNames","root","content","popoverSurface","tooltip","triggerButton","useContentStyles","base","listStyleType","margin","padding","display","flexDirection","usePopoverSurfaceStyles","maxHeight","minHeight","overflow","spacingVerticalS","spacingHorizontalS","width","useTriggerButtonStyles","position","flexShrink","justifyContent","alignItems","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderColor","colorNeutralStroke1","borderRadius","borderRadiusCircular","borderStyle","pie","colorTransparentBackground","colorTransparentStroke","focusIndicator","border","strokeWidthThick","colorStrokeFocus2","outlineStyle","states","colorNeutralForeground1Hover","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Pressed","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","selected","colorNeutralForeground1Selected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","icon12","fontSize","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","borderWidth","strokeWidthThin","borderThick","borderThicker","strokeWidthThicker","borderThickest","strokeWidthThickest","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\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';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\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/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column',\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst 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/**\n * Styles for the triggerButton slot.\n */\nconst 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\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none',\n }),\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\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\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 caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\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\n const triggerButtonClasses = [];\n\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\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\n // eslint-disable-next-line react-hooks/immutability\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","useGroupChildClassName","useSizeStyles","avatarGroupPopoverClassNames","root","content","popoverSurface","tooltip","triggerButton","useContentStyles","base","listStyleType","margin","padding","display","flexDirection","usePopoverSurfaceStyles","maxHeight","minHeight","overflow","spacingVerticalS","spacingHorizontalS","width","useTriggerButtonStyles","position","flexShrink","justifyContent","alignItems","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","borderColor","colorNeutralStroke1","borderRadius","borderRadiusCircular","borderStyle","pie","colorTransparentBackground","colorTransparentStroke","focusIndicator","border","strokeWidthThick","colorStrokeFocus2","outlineStyle","states","colorNeutralForeground1Hover","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Pressed","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","selected","colorNeutralForeground1Selected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","icon12","fontSize","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","borderWidth","strokeWidthThin","borderThick","borderThicker","strokeWidthThicker","borderThickest","strokeWidthThickest","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"mappings":"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"}
|
|
@@ -25,5 +25,5 @@ _export(exports, {
|
|
|
25
25
|
return _AvatarGroupContext.useAvatarGroupContext_unstable;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
const _AvatarGroupContext = require("./AvatarGroupContext");
|
|
29
|
-
const _AvatarContext = require("./AvatarContext");
|
|
28
|
+
const _AvatarGroupContext = require("./AvatarGroupContext.cjs");
|
|
29
|
+
const _AvatarContext = require("./AvatarContext.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export { AvatarGroupContext, AvatarGroupProvider, useAvatarGroupContext_unstable } from './AvatarGroupContext';\nexport type { AvatarContextValue } from './AvatarContext';\nexport { AvatarContextProvider, useAvatarContext } from './AvatarContext';\n"],"names":["AvatarGroupContext","AvatarGroupProvider","useAvatarGroupContext_unstable","AvatarContextProvider","useAvatarContext"],"mappings":";;;;;;;;;;;;eAESG,oCAAqB;;;eAFrBH,sCAAkB;;;eAAEC,uCAAmB;;;eAEhBG,+BAAgB;;;eAFEF,kDAA8B;;;oCAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export { AvatarGroupContext, AvatarGroupProvider, useAvatarGroupContext_unstable } from './AvatarGroupContext';\nexport type { AvatarContextValue } from './AvatarContext';\nexport { AvatarContextProvider, useAvatarContext } from './AvatarContext';\n"],"names":["AvatarGroupContext","AvatarGroupProvider","useAvatarGroupContext_unstable","AvatarContextProvider","useAvatarContext"],"mappings":";;;;;;;;;;;;eAESG,oCAAqB;;;eAFrBH,sCAAkB;;;eAAEC,uCAAmB;;;eAEhBG,+BAAgB;;;eAFEF,kDAA8B;;;oCAAQ,0BAAuB;+BAEvD,qBAAkB"}
|
|
@@ -106,9 +106,9 @@ _export(exports, {
|
|
|
106
106
|
return _Avatar.useAvatar_unstable;
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
|
-
const _Avatar = require("./Avatar");
|
|
110
|
-
const _index = require("./utils/index");
|
|
111
|
-
const _AvatarGroup = require("./AvatarGroup");
|
|
112
|
-
const _AvatarGroupItem = require("./AvatarGroupItem");
|
|
113
|
-
const _AvatarGroupPopover = require("./AvatarGroupPopover");
|
|
114
|
-
const _index1 = require("./contexts/index");
|
|
109
|
+
const _Avatar = require("./Avatar.cjs");
|
|
110
|
+
const _index = require("./utils/index.cjs");
|
|
111
|
+
const _AvatarGroup = require("./AvatarGroup.cjs");
|
|
112
|
+
const _AvatarGroupItem = require("./AvatarGroupItem.cjs");
|
|
113
|
+
const _AvatarGroupPopover = require("./AvatarGroupPopover.cjs");
|
|
114
|
+
const _index1 = require("./contexts/index.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Avatar,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n useAvatarBase_unstable,\n} from './Avatar';\nexport type {\n AvatarNamedColor,\n AvatarProps,\n AvatarSlots,\n AvatarState,\n AvatarShape,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSize,\n AvatarBaseProps,\n AvatarBaseState,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n useAvatarGroupBase_unstable,\n} from './AvatarGroup';\nexport type {\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupBaseProps,\n AvatarGroupBaseState,\n} from './AvatarGroup';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useAvatarGroupItemBase_unstable,\n} from './AvatarGroupItem';\nexport type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n AvatarGroupItemBaseProps,\n AvatarGroupItemBaseState,\n} from './AvatarGroupItem';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopoverBase_unstable,\n} from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover';\nexport {\n AvatarContextProvider,\n AvatarGroupProvider,\n useAvatarContext,\n useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarGroupBase_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemBase_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverBase_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":";;;;;;;;;;;IACEA,MAAM;;;IAuEN4B,qBAAqB;;;;eAjDrBpB,wBAAW;;;eAkBXO,gCAAe;;;eAefM,sCAAkB;;;eAiBlBQ,2BAAmB;;;eAvEnB5B,wBAAgB;;;eAsBhBQ,kCAAqB;;6BAkBI;eAAzBO;;gCAe4B;eAA5BM;;IArCOhB;iCAAW;;;eAAEC,gCAAyB;;;eAuB7CU,+CAA8B;;IAe9BM;oEAAiC;;;eAjCjCb,uCAA0B;;;eAtB1BR,6BAAqB;;;eAGrBG,8BAAsB;;oBAoEN;eAAhByB;;;eA7CAhB,wCAA2B;;;eAH3BH,wCAA2B;;IAiD3BoB;qDAA8B;;;eA7B9BX,gDAA+B;;;eAF/BF,kDAAiC;;;eACjCC,4CAA2B;;;eAiB3BQ,sDAAkC;;IAFlCF;8EAA2C;;IAC3CC,oCAAoC;;;;eAFpCF,kDAA8B;;;eAhC9BZ,0CAA6B;;;eAC7BC,oCAAuB;;;eAxBvBV,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Avatar,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n useAvatarBase_unstable,\n} from './Avatar';\nexport type {\n AvatarNamedColor,\n AvatarProps,\n AvatarSlots,\n AvatarState,\n AvatarShape,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSize,\n AvatarBaseProps,\n AvatarBaseState,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n useAvatarGroupBase_unstable,\n} from './AvatarGroup';\nexport type {\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupBaseProps,\n AvatarGroupBaseState,\n} from './AvatarGroup';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useAvatarGroupItemBase_unstable,\n} from './AvatarGroupItem';\nexport type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n AvatarGroupItemBaseProps,\n AvatarGroupItemBaseState,\n} from './AvatarGroupItem';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopoverBase_unstable,\n} from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover';\nexport {\n AvatarContextProvider,\n AvatarGroupProvider,\n useAvatarContext,\n useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarGroupBase_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemBase_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverBase_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":";;;;;;;;;;;IACEA,MAAM;;;IAuEN4B,qBAAqB;;;;eAjDrBpB,wBAAW;;;eAkBXO,gCAAe;;;eAefM,sCAAkB;;;eAiBlBQ,2BAAmB;;;eAvEnB5B,wBAAgB;;;eAsBhBQ,kCAAqB;;6BAkBI;eAAzBO;;gCAe4B;eAA5BM;;IArCOhB;iCAAW;;;eAAEC,gCAAyB;;;eAuB7CU,+CAA8B;;IAe9BM;oEAAiC;;;eAjCjCb,uCAA0B;;;eAtB1BR,6BAAqB;;;eAGrBG,8BAAsB;;oBAoEN;eAAhByB;;;eA7CAhB,wCAA2B;;;eAH3BH,wCAA2B;;IAiD3BoB;qDAA8B;;;eA7B9BX,gDAA+B;;;eAF/BF,kDAAiC;;;eACjCC,4CAA2B;;;eAiB3BQ,sDAAkC;;IAFlCF;8EAA2C;;IAC3CC,oCAAoC;;;;eAFpCF,kDAA8B;;;eAhC9BZ,0CAA6B;;;eAC7BC,oCAAuB;;;eAxBvBV,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,cAAW;uBAaqC,mBAAgB;6BAUhE,mBAAgB;iCAiBhB,uBAAoB;oCAgBpB,0BAAuB;wBAavB,sBAAmB"}
|
|
@@ -16,5 +16,5 @@ _export(exports, {
|
|
|
16
16
|
return _partitionAvatarGroupItems.partitionAvatarGroupItems;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
const _getInitials = require("./getInitials");
|
|
20
|
-
const _partitionAvatarGroupItems = require("./partitionAvatarGroupItems");
|
|
19
|
+
const _getInitials = require("./getInitials.cjs");
|
|
20
|
+
const _partitionAvatarGroupItems = require("./partitionAvatarGroupItems.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { getInitials } from './getInitials';\nexport { partitionAvatarGroupItems } from './partitionAvatarGroupItems';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './partitionAvatarGroupItems';\n"],"names":["getInitials","partitionAvatarGroupItems"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eACXC,oDAAyB;;;6BADN,
|
|
1
|
+
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { getInitials } from './getInitials';\nexport { partitionAvatarGroupItems } from './partitionAvatarGroupItems';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './partitionAvatarGroupItems';\n"],"names":["getInitials","partitionAvatarGroupItems"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eACXC,oDAAyB;;;6BADN,mBAAgB;2CACF,iCAA8B"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
4
4
|
"description": "React components for building Microsoft web experiences.",
|
|
5
|
-
"main": "lib-commonjs/index.
|
|
5
|
+
"main": "lib-commonjs/index.cjs",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
7
|
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
"es6-weak-map": "^2.0.2"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@fluentui/react-badge": "
|
|
19
|
-
"@fluentui/react-context-selector": "
|
|
18
|
+
"@fluentui/react-badge": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
19
|
+
"@fluentui/react-context-selector": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
20
20
|
"@fluentui/react-icons": "^2.0.245",
|
|
21
|
-
"@fluentui/react-popover": "
|
|
22
|
-
"@fluentui/react-shared-contexts": "
|
|
23
|
-
"@fluentui/react-tabster": "
|
|
24
|
-
"@fluentui/react-theme": "
|
|
25
|
-
"@fluentui/react-tooltip": "
|
|
26
|
-
"@fluentui/react-utilities": "
|
|
27
|
-
"@fluentui/react-jsx-runtime": "
|
|
21
|
+
"@fluentui/react-popover": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
22
|
+
"@fluentui/react-shared-contexts": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
23
|
+
"@fluentui/react-tabster": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
24
|
+
"@fluentui/react-theme": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
25
|
+
"@fluentui/react-tooltip": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
26
|
+
"@fluentui/react-utilities": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
27
|
+
"@fluentui/react-jsx-runtime": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
28
28
|
"@griffel/react": "^1.5.32",
|
|
29
29
|
"@swc/helpers": "^0.5.1"
|
|
30
30
|
},
|
|
@@ -34,25 +34,26 @@
|
|
|
34
34
|
"react": ">=16.14.0 <20.0.0",
|
|
35
35
|
"react-dom": ">=16.14.0 <20.0.0"
|
|
36
36
|
},
|
|
37
|
-
"beachball": {
|
|
38
|
-
"disallowedChangeTypes": [
|
|
39
|
-
"major",
|
|
40
|
-
"prerelease"
|
|
41
|
-
]
|
|
42
|
-
},
|
|
37
|
+
"beachball": {},
|
|
43
38
|
"exports": {
|
|
44
39
|
".": {
|
|
45
|
-
"
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
40
|
+
"import": {
|
|
41
|
+
"types": "./dist/index.d.ts",
|
|
42
|
+
"default": "./lib/index.js"
|
|
43
|
+
},
|
|
44
|
+
"require": {
|
|
45
|
+
"types": "./dist/index.d.cts",
|
|
46
|
+
"default": "./lib-commonjs/index.cjs"
|
|
47
|
+
}
|
|
49
48
|
},
|
|
50
49
|
"./package.json": "./package.json"
|
|
51
50
|
},
|
|
52
51
|
"files": [
|
|
53
52
|
"*.md",
|
|
54
53
|
"dist/*.d.ts",
|
|
54
|
+
"dist/*.d.cts",
|
|
55
55
|
"lib",
|
|
56
56
|
"lib-commonjs"
|
|
57
|
-
]
|
|
57
|
+
],
|
|
58
|
+
"type": "module"
|
|
58
59
|
}
|