npm - @fluentui/react-avatar - Versions diffs - 9.9.5 → 9.9.7 - Mend

@fluentui/react-avatar 9.9.5 → 9.9.7

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.

Files changed (79) hide show

package/lib/components/AvatarGroup/renderAvatarGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n assertSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.root />\n </AvatarGroupProvider>\n );\n};\n"],"names":["assertSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","value","avatarGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AACxD~~,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,~~CAACC~~,~~OAAyBC~~;~~IAClEJ~~,YAA8BG;IAE9B,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/\n Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (\n state: AvatarGroupState,\n contextValues: AvatarGroupContextValues,\n): JSXElement => {\n assertSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.root />\n </AvatarGroupProvider>\n );\n};\n"],"names":["assertSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","value","avatarGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,mBAAmB,QAAQ,oCAAoC;AAGxE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEAJ,YAA8BG;IAE9B,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';

package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n root: 'fui-AvatarGroup'\n};\n/*\n Styles for the root slot.\n / const useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative'\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n }\n});\n/\n Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,kCAAkC;AAChE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAM;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,UAAU,GAAGlB,aAAa,CAAC,CAAC;EAClCc,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEe,MAAM,CAACb,IAAI,EAAEW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAED,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAAEO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;EACxK,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n root: 'fui-AvatarGroup'\n};\n/*\n Styles for the root slot.\n / const useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative'\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n }\n});\n/\n Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,QAAQ,kCAAkC;AAChE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAM;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAGF,KAAK;EAC9B,MAAMG,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,UAAU,GAAGlB,aAAa,CAAC,CAAC;EAClCc,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEe,MAAM,CAACb,IAAI,EAAEW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAED,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAAEO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;EACxK,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';

package/lib/components/AvatarGroup/useAvatarGroupStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n};\n\n/*\n Styles for the root slot.\n /\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n});\n\n/\n Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n 'use no memo';\n\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.pie,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","display","position","pie","clipPath","backgroundColor","colorTransparentStroke","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,aAAa,QAAQ,mCAAmC;AAIjE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BO,MAAM;QACJC,SAAS;QACTC,UAAU;IACZ;IACAC,KAAK;QACHC,UAAU;QACVC,iBAAiBV,OAAOW,sBAAsB;QAC9C,kCAAkC;YAChCD,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IACzB,MAAMG,SAASZ;IACf,MAAMa,aAAahB;IAEnBY,MAAMV,IAAI,CAACe,SAAS,GAAGnB,aACrBG,sBAAsBC,IAAI,EAC1Ba,OAAOX,IAAI,EACXS,WAAW,SAASG,UAAU,CAACF,KAAK,EACpCD,WAAW,SAASE,OAAOR,GAAG,EAC9BK,MAAMV,IAAI,CAACe,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n};\n\n/*\n Styles for the root slot.\n /\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n});\n\n/\n Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n 'use no memo';\n\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.pie,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","display","position","pie","clipPath","backgroundColor","colorTransparentStroke","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,aAAa,QAAQ,mCAAmC;AAIjE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BO,MAAM;QACJC,SAAS;QACTC,UAAU;IACZ;IACAC,KAAK;QACHC,UAAU;QACVC,iBAAiBV,OAAOW,sBAAsB;QAC9C,kCAAkC;YAChCD,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IACzB,MAAMG,SAASZ;IACf,MAAMa,aAAahB;IAEnBY,MAAMV,IAAI,CAACe,SAAS,GAAGnB,aACrBG,sBAAsBC,IAAI,EAC1Ba,OAAOX,IAAI,EACXS,WAAW,SAASG,UAAU,CAACF,KAAK,EACpCD,WAAW,SAASE,OAAOR,GAAG,EAC9BK,MAAMV,IAAI,CAACe,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/AvatarGroupItem/AvatarGroupItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';
 import { useAvatarGroupItem_unstable } from './useAvatarGroupItem';

package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,iCAAiC,QAAQ,oCAAoC;AAItF;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAElCN,4BAA4B,qCAAqCM;IAEjE,OAAOR,+BAA+BQ;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,iCAAiC,QAAQ,oCAAoC;AAItF;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAElCN,4BAA4B,qCAAqCM;IAEjE,OAAOR,+BAA+BQ;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/\n Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n assertSlots<AvatarGroupItemSlots>(state);\n\n return (\n <state.root>\n <state.avatar />\n {state.isOverflowItem && <state.overflowLabel />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAvatarGroupItem_unstable","state","root","avatar","isOverflowItem","overflowLabel"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AAGxD~~;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;YACZF,MAAMG,cAAc,kBAAI,KAACH,MAAMI,aAAa;;;AAGnD,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/\n Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState): JSXElement => {\n assertSlots<AvatarGroupItemSlots>(state);\n\n return (\n <state.root>\n <state.avatar />\n {state.isOverflowItem && <state.overflowLabel />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAvatarGroupItem_unstable","state","root","avatar","isOverflowItem","overflowLabel"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;YACZF,MAAMG,cAAc,kBAAI,KAACH,MAAMI,aAAa;;;AAGnD,EAAE"}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { Avatar } from '../Avatar/Avatar';
 import { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/*\n Create the state required to render AvatarGroupItem.\n \n The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n \n @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n props: AvatarGroupItemProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n const { style, className, ...avatarSlotProps } = props;\n const size = groupSize ?? defaultAvatarGroupSize;\n const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n // eslint-disable-next-line no-console\n console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n }\n\n return {\n isOverflowItem: groupIsOverflow,\n layout,\n size,\n components: {\n root: groupIsOverflow ? 'li' : 'div',\n avatar: Avatar,\n overflowLabel: 'span',\n },\n root: slot.always(props.root, {\n defaultProps: {\n style,\n className,\n },\n elementType: groupIsOverflow ? 'li' : 'div',\n }),\n avatar: slot.always(props.avatar, {\n defaultProps: {\n ref,\n size,\n color: 'colorful',\n ...avatarSlotProps,\n },\n elementType: Avatar,\n }),\n overflowLabel: slot.always(props.overflowLabel, {\n defaultProps: {\n // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n 'aria-hidden': true,\n children: props.name,\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","always","defaultProps","elementType","color","children","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,kBAAkBP,+BAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYV,+BAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASZ,+BAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,iBAAiB,GAAGV;IACjD,MAAMM,OAAOD,sBAAAA,uBAAAA,YAAaT;IAC1B,MAAMe,wBAAwBb,oBAAoBJ;IAElD,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBf;QAChBK;QACAD;QACAY,YAAY;YACVC,MAAMjB,kBAAkB,OAAO;YAC/BkB,QAAQ3B;YACR4B,eAAe;QACjB;QACAF,MAAMtB,KAAKyB,MAAM,CAACtB,MAAMmB,IAAI,EAAE;YAC5BI,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAkB,QAAQvB,KAAKyB,MAAM,CAACtB,MAAMoB,MAAM,EAAE;YAChCG,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGf,eAAe;YACpB;YACAc,aAAa/B;QACf;QACA4B,eAAexB,KAAKyB,MAAM,CAACtB,MAAMqB,aAAa,EAAE;YAC9CE,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/*\n Create the state required to render AvatarGroupItem.\n \n The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n \n @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n props: AvatarGroupItemProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n const { style, className, ...avatarSlotProps } = props;\n const size = groupSize ?? defaultAvatarGroupSize;\n const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n // eslint-disable-next-line no-console\n console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n }\n\n return {\n isOverflowItem: groupIsOverflow,\n layout,\n size,\n components: {\n root: groupIsOverflow ? 'li' : 'div',\n avatar: Avatar,\n overflowLabel: 'span',\n },\n root: slot.always(props.root, {\n defaultProps: {\n style,\n className,\n },\n elementType: groupIsOverflow ? 'li' : 'div',\n }),\n avatar: slot.always(props.avatar, {\n defaultProps: {\n ref,\n size,\n color: 'colorful',\n ...avatarSlotProps,\n },\n elementType: Avatar,\n }),\n overflowLabel: slot.always(props.overflowLabel, {\n defaultProps: {\n // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n 'aria-hidden': true,\n children: props.name,\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","always","defaultProps","elementType","color","children","name"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,kBAAkBP,+BAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYV,+BAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASZ,+BAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,iBAAiB,GAAGV;IACjD,MAAMM,OAAOD,sBAAAA,uBAAAA,YAAaT;IAC1B,MAAMe,wBAAwBb,oBAAoBJ;IAElD,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBf;QAChBK;QACAD;QACAY,YAAY;YACVC,MAAMjB,kBAAkB,OAAO;YAC/BkB,QAAQ3B;YACR4B,eAAe;QACjB;QACAF,MAAMtB,KAAKyB,MAAM,CAACtB,MAAMmB,IAAI,EAAE;YAC5BI,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAkB,QAAQvB,KAAKyB,MAAM,CAACtB,MAAMoB,MAAM,EAAE;YAChCG,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGf,eAAe;YACpB;YACAc,aAAa/B;QACf;QACA4B,eAAexB,KAAKyB,MAAM,CAACtB,MAAMqB,aAAa,EAAE;YAC9CE,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useSizeStyles } from '../../Avatar';

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"sources":["useAvatarGroupItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nexport const avatarGroupItemClassNames = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel'\n};\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n/*\n Styles for the root slot\n / const useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative'\n },\n overflowItem: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`\n },\n nonOverflowItem: {\n borderRadius: tokens.borderRadiusCircular\n }\n});\n/\n Styles for the avatar slot\n / const useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute'\n },\n pie: {\n borderRadius: '0'\n }\n});\n/\n Styles for the label slot\n / const useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1\n }\n});\n/\n Styles for the stack layout\n / const useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`\n },\n xxs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 ${tokens.spacingHorizontalXXS})`\n }\n },\n xs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})`\n }\n },\n s: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})`\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})`\n }\n }\n});\n/*\n Styles for the spread layout\n / const useSpreadStyles = makeStyles({\n s: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalS\n }\n },\n mNudge: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalMNudge\n }\n },\n m: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalM\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalL\n }\n },\n xl: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalXL\n }\n }\n});\n/\n Styles for the pie layout\n / const usePieStyles = makeStyles({\n base: {\n position: 'absolute'\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%'\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n }\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0'\n }\n },\n thick: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick\n },\n thicker: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker\n },\n thickest: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest\n }\n});\n/\n Apply styling to the AvatarGroupItem slots based on the state\n / export const useAvatarGroupItemStyles_unstable = (state)=>{\n 'use no memo';\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const rootClasses = [\n rootStyles.base\n ];\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n rootClasses.push(pieStyles.slices);\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);\n if (state.overflowLabel) {\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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"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"],"sources":["useAvatarGroupItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nexport const avatarGroupItemClassNames = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel'\n};\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n/*\n Styles for the root slot\n / const useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative'\n },\n overflowItem: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`\n },\n nonOverflowItem: {\n borderRadius: tokens.borderRadiusCircular\n }\n});\n/\n Styles for the avatar slot\n / const useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute'\n },\n pie: {\n borderRadius: '0'\n }\n});\n/\n Styles for the label slot\n / const useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1\n }\n});\n/\n Styles for the stack layout\n / const useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`\n },\n xxs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 ${tokens.spacingHorizontalXXS})`\n }\n },\n xs: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})`\n }\n },\n s: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})`\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})`\n }\n }\n});\n/*\n Styles for the spread layout\n / const useSpreadStyles = makeStyles({\n s: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalS\n }\n },\n mNudge: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalMNudge\n }\n },\n m: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalM\n }\n },\n l: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalL\n }\n },\n xl: {\n '&:not(:first-child)': {\n marginLeft: tokens.spacingHorizontalXL\n }\n }\n});\n/\n Styles for the pie layout\n / const usePieStyles = makeStyles({\n base: {\n position: 'absolute'\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%'\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%'\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0'\n }\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`\n },\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0'\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0'\n }\n },\n thick: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick\n },\n thicker: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker\n },\n thickest: {\n [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest\n }\n});\n/\n Apply styling to the AvatarGroupItem slots based on the state\n / export const useAvatarGroupItemStyles_unstable = (state)=>{\n 'use no memo';\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const rootClasses = [\n rootStyles.base\n ];\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n rootClasses.push(pieStyles.slices);\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n state.avatar.className = mergeClasses(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);\n if (state.overflowLabel) {\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"],"mappings":"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","ignoreList":[]}

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useSizeStyles } from '../../Avatar';

package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSize } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: { padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}` },\n nonOverflowItem: { borderRadius: tokens.borderRadiusCircular },\n});\n\n/\n Styles for the avatar slot\n /\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: { borderRadius: '0' },\n});\n\n/\n Styles for the label slot\n /\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/\n Styles for the stack layout\n /\nconst useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/*\n Styles for the spread layout\n /\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/\n Styles for the pie layout\n /\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n rtlSlices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,\n left: '0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,\n left: '0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/\n Apply styling to the AvatarGroupItem slots based on the state\n /\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n 'use no memo';\n\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\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 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 'use no memo';\n\n const { isOverflowItem, layout, size } = state;\n const { dir } = useFluent();\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n\n if (dir === 'rtl') {\n rootClasses.push(pieStyles.rtlSlices);\n }\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\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 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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"}

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
 import { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';

package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["~~import~~ * 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":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * 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":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map CHANGED Viewed

	@@ -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 { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/\n Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\n contextValues: AvatarGroupContextValues,\n) => {\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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,mBAAmB,QAAQ,oCAAoC;AAGxE,SAASC,WAAW,QAAQ,4BAA4B;~~AACxD~~,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEAJ,YAAqCG;IAErC,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACJ;gBAAeK,wBAAwB;0BACtC,cAAA,KAACH,MAAMI,OAAO;8BACZ,cAAA,KAACJ,MAAMK,aAAa;;;0BAGxB,KAACL,MAAMM,cAAc;0BACnB,cAAA,KAACV;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,cAAA,KAACR,MAAMS,OAAO;;;;;AAKxB,EAAE"}
1	+ {"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { 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 { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/\n Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,mBAAmB,QAAQ,oCAAoC;AAGxE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEAJ,YAAqCG;IAErC,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACJ;gBAAeK,wBAAwB;0BACtC,cAAA,KAACH,MAAMI,OAAO;8BACZ,cAAA,KAACJ,MAAMK,aAAa;;;0BAGxB,KAACL,MAAMM,cAAc;0BACnB,cAAA,KAACV;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,cAAA,KAACR,MAAMS,OAAO;;;;;AAKxB,EAAE"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
 import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';

package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["~~import~~ * 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 { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } 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 {\n indicator = size < 24 ? 'icon' : 'count',\n count = React.Children.count(props.children),\n children,\n ...restOfProps\n } = 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 === 'icon') {\n triggerButtonChildren = <MoreHorizontalRegular />;\n } else {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n size,\n\n components: {\n root: Popover,\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\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: Popover },\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: PopoverSurface,\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n elementType: Tooltip,\n }),\n };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","count","Children","children","restOfProps","popoverOpen","setPopoverOpen","state","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","components","root","triggerButton","content","popoverSurface","tooltip","always","trapFocus","elementType","defaultProps","type","role","tabIndex","relationship"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,oCAAoC;AACnF,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,oBAAoB,EAAEC,IAAI,QAAQ,4BAA4B;AACvE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAA8CC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAEvG,SAASC,OAAO,QAAQ,0BAA0B;AAElD;;;;;;;CAOC,GACD,OAAO,MAAMC,iCAAiC,CAACC;QAChCT;IAAb,MAAMU,OAAOV,CAAAA,kCAAAA,+BAA+BW,CAAAA,MAAOA,IAAID,IAAI,eAA9CV,6CAAAA,kCAAmDC;IAChE,MAAMW,SAASZ,+BAA+BW,CAAAA,MAAOA,IAAIC,MAAM;IAC/D,MAAM,EACJC,YAAYH,OAAO,KAAK,SAAS,OAAO,EACxCI,QAAQf,MAAMgB,QAAQ,CAACD,KAAK,CAACL,MAAMO,QAAQ,CAAC,EAC5CA,QAAQ,EACR,GAAGC,aACJ,GAAGR;IAEJ,MAAM,CAACS,aAAaC,eAAe,GAAGjB,qBAAqB;QACzDkB,OAAOX,MAAMY,IAAI;QACjBC,cAAcb,MAAMc,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAwB,CAACC,GAAsBC;YACnDV;SAAAA,4BAAAA,YAAYW,YAAY,cAAxBX,gDAAAA,+BAAAA,aAA2BS,GAAGC;QAC9BR,eAAeQ,KAAKN,IAAI;IAC1B;IAEA,IAAIQ;IACJ,IAAIjB,WAAW,OAAO;QACpBiB,wBAAwB;IAC1B,OAAO,IAAIhB,cAAc,QAAQ;QAC/BgB,sCAAwB,oBAACzB;IAC3B,OAAO;QACLyB,wBAAwBf,QAAQ,KAAK,QAAQ,CAAC,CAAC,EAAEA,OAAO;IAC1D;IAEA,OAAO;QACLA;QACAD;QACAD;QACAM;QACAR;QAEAoB,YAAY;YACVC,MAAM1B;YACN2B,eAAe;YACfC,SAAS;YACTC,gBAAgB5B;YAChB6B,SAAS5B;QACX;QACAwB,MAAM5B,KAAKiC,MAAM,CACf;YACE,oGAAoG;YACpGpB,wBAAU;YACVN,MAAM;YACN2B,WAAW;YACX,GAAGpB,WAAW;YACdI,MAAMH;YACNU,cAAcH;QAChB,GACA;YAAEa,aAAajC;QAAQ;QAEzB2B,eAAe7B,KAAKiC,MAAM,CAAC3B,MAAMuB,aAAa,EAAE;YAC9CO,cAAc;gBACZvB,UAAUa;gBACVW,MAAM;YACR;YACAF,aAAa;QACf;QACAL,SAAS9B,KAAKiC,MAAM,CAAC3B,MAAMwB,OAAO,EAAE;YAClCM,cAAc;gBACZvB;gBACAyB,MAAM;YACR;YACAH,aAAa;QACf;QACAJ,gBAAgB/B,KAAKiC,MAAM,CAAC3B,MAAMyB,cAAc,EAAE;YAChDK,cAAc;gBACZ,cAAc;gBACdG,UAAU;YACZ;YACAJ,aAAahC;QACf;QACA6B,SAAShC,KAAKiC,MAAM,CAAC3B,MAAM0B,OAAO,EAAE;YAClCI,cAAc;gBACZN,SAAS;gBACTU,cAAc;YAChB;YACAL,aAAa/B;QACf;IACF;AACF,EAAE"}
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 { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverProps, AvatarGroupPopoverState } 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 {\n indicator = size < 24 ? 'icon' : 'count',\n count = React.Children.count(props.children),\n children,\n ...restOfProps\n } = 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 === 'icon') {\n triggerButtonChildren = <MoreHorizontalRegular />;\n } else {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n size,\n\n components: {\n root: Popover,\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\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: Popover },\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: PopoverSurface,\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n elementType: Tooltip,\n }),\n };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","count","Children","children","restOfProps","popoverOpen","setPopoverOpen","state","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","components","root","triggerButton","content","popoverSurface","tooltip","always","trapFocus","elementType","defaultProps","type","role","tabIndex","relationship"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,oCAAoC;AACnF,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,oBAAoB,EAAEC,IAAI,QAAQ,4BAA4B;AACvE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAA8CC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAEvG,SAASC,OAAO,QAAQ,0BAA0B;AAElD;;;;;;;CAOC,GACD,OAAO,MAAMC,iCAAiC,CAACC;QAChCT;IAAb,MAAMU,OAAOV,CAAAA,kCAAAA,+BAA+BW,CAAAA,MAAOA,IAAID,IAAI,eAA9CV,6CAAAA,kCAAmDC;IAChE,MAAMW,SAASZ,+BAA+BW,CAAAA,MAAOA,IAAIC,MAAM;IAC/D,MAAM,EACJC,YAAYH,OAAO,KAAK,SAAS,OAAO,EACxCI,QAAQf,MAAMgB,QAAQ,CAACD,KAAK,CAACL,MAAMO,QAAQ,CAAC,EAC5CA,QAAQ,EACR,GAAGC,aACJ,GAAGR;IAEJ,MAAM,CAACS,aAAaC,eAAe,GAAGjB,qBAAqB;QACzDkB,OAAOX,MAAMY,IAAI;QACjBC,cAAcb,MAAMc,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAwB,CAACC,GAAsBC;YACnDV;SAAAA,4BAAAA,YAAYW,YAAY,cAAxBX,gDAAAA,+BAAAA,aAA2BS,GAAGC;QAC9BR,eAAeQ,KAAKN,IAAI;IAC1B;IAEA,IAAIQ;IACJ,IAAIjB,WAAW,OAAO;QACpBiB,wBAAwB;IAC1B,OAAO,IAAIhB,cAAc,QAAQ;QAC/BgB,sCAAwB,oBAACzB;IAC3B,OAAO;QACLyB,wBAAwBf,QAAQ,KAAK,QAAQ,CAAC,CAAC,EAAEA,OAAO;IAC1D;IAEA,OAAO;QACLA;QACAD;QACAD;QACAM;QACAR;QAEAoB,YAAY;YACVC,MAAM1B;YACN2B,eAAe;YACfC,SAAS;YACTC,gBAAgB5B;YAChB6B,SAAS5B;QACX;QACAwB,MAAM5B,KAAKiC,MAAM,CACf;YACE,oGAAoG;YACpGpB,wBAAU;YACVN,MAAM;YACN2B,WAAW;YACX,GAAGpB,WAAW;YACdI,MAAMH;YACNU,cAAcH;QAChB,GACA;YAAEa,aAAajC;QAAQ;QAEzB2B,eAAe7B,KAAKiC,MAAM,CAAC3B,MAAMuB,aAAa,EAAE;YAC9CO,cAAc;gBACZvB,UAAUa;gBACVW,MAAM;YACR;YACAF,aAAa;QACf;QACAL,SAAS9B,KAAKiC,MAAM,CAAC3B,MAAMwB,OAAO,EAAE;YAClCM,cAAc;gBACZvB;gBACAyB,MAAM;YACR;YACAH,aAAa;QACf;QACAJ,gBAAgB/B,KAAKiC,MAAM,CAAC3B,MAAMyB,cAAc,EAAE;YAChDK,cAAc;gBACZ,cAAc;gBACdG,UAAU;YACZ;YACAJ,aAAahC;QACf;QACA6B,SAAShC,KAAKiC,MAAM,CAAC3B,MAAM0B,OAAO,EAAE;YAClCI,cAAc;gBACZN,SAAS;gBACTU,cAAc;YAChB;YACAL,aAAa/B;QACf;IACF;AACF,EAAE"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","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"],"sources":["useAvatarGroupPopoverStyles.styles.js"],"sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupPopoverClassNames = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton'\n};\n/*\n Styles for the content slot.\n / const useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/\n Styles for the popoverSurface slot.\n / const usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n overflow: 'hidden scroll',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n width: '220px'\n }\n});\n/\n Styles for the triggerButton slot.\n / const useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusCircular,\n ...shorthands.borderStyle('solid'),\n padding: '0',\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText')\n }\n },\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent'\n },\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none'\n }),\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n },\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n icon12: {\n fontSize: '12px'\n },\n icon16: {\n fontSize: '16px'\n },\n icon20: {\n fontSize: '20px'\n },\n icon24: {\n fontSize: '24px'\n },\n icon28: {\n fontSize: '28px'\n },\n icon32: {\n fontSize: '32px'\n },\n icon48: {\n fontSize: '48px'\n },\n caption2Strong: {\n ...typographyStyles.caption2Strong\n },\n caption1Strong: {\n ...typographyStyles.caption1Strong\n },\n body1Strong: {\n ...typographyStyles.body1Strong\n },\n subtitle2: {\n ...typographyStyles.subtitle2\n },\n subtitle1: {\n ...typographyStyles.subtitle1\n },\n title3: {\n ...typographyStyles.title3\n },\n borderThin: {\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n borderThick: {\n ...shorthands.borderWidth(tokens.strokeWidthThick)\n },\n borderThicker: {\n ...shorthands.borderWidth(tokens.strokeWidthThicker)\n },\n borderThickest: {\n ...shorthands.borderWidth(tokens.strokeWidthThickest)\n }\n});\n/\n Apply styling to the AvatarGroupPopover slots based on the state\n */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const triggerButtonClasses = [];\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n 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 state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);\n state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","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"],"sources":["useAvatarGroupPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupPopoverClassNames = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton'\n};\n/*\n Styles for the content slot.\n / const useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n flexDirection: 'column'\n }\n});\n/\n Styles for the popoverSurface slot.\n / const usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n overflow: 'hidden scroll',\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n width: '220px'\n }\n});\n/\n Styles for the triggerButton slot.\n / const useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusCircular,\n ...shorthands.borderStyle('solid'),\n padding: '0',\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText')\n }\n },\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent'\n },\n focusIndicator: createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n outlineStyle: 'none'\n }),\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n },\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n icon12: {\n fontSize: '12px'\n },\n icon16: {\n fontSize: '16px'\n },\n icon20: {\n fontSize: '20px'\n },\n icon24: {\n fontSize: '24px'\n },\n icon28: {\n fontSize: '28px'\n },\n icon32: {\n fontSize: '32px'\n },\n icon48: {\n fontSize: '48px'\n },\n caption2Strong: {\n ...typographyStyles.caption2Strong\n },\n caption1Strong: {\n ...typographyStyles.caption1Strong\n },\n body1Strong: {\n ...typographyStyles.body1Strong\n },\n subtitle2: {\n ...typographyStyles.subtitle2\n },\n subtitle1: {\n ...typographyStyles.subtitle1\n },\n title3: {\n ...typographyStyles.title3\n },\n borderThin: {\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n borderThick: {\n ...shorthands.borderWidth(tokens.strokeWidthThick)\n },\n borderThicker: {\n ...shorthands.borderWidth(tokens.strokeWidthThicker)\n },\n borderThickest: {\n ...shorthands.borderWidth(tokens.strokeWidthThickest)\n }\n});\n/\n Apply styling to the AvatarGroupPopover slots based on the state\n */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{\n 'use no memo';\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n const triggerButtonClasses = [];\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n 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 state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);\n state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts"],"sourcesContent":["import { 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 'use no memo';\n\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 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 state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\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 'use no memo';\n\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 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 state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\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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"}

package/lib/contexts/AvatarContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 const avatarContext = React.createContext(undefined);
 const avatarContextDefaultValue = {};

package/lib/contexts/AvatarContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/AvatarContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { AvatarShape, AvatarSize } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport interface AvatarContextValue {\n shape?: AvatarShape;\n size?: AvatarSize;\n}\n\nconst avatarContextDefaultValue: AvatarContextValue = {};\n\n/\n @internal\n /\nexport const AvatarContextProvider = avatarContext.Provider;\n\n/\n @internal\n */\nexport const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"],"names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","useAvatarContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAEvD;;CAEC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;CAEC,GACD,OAAO,MAAMC,mBAAmB;~~QAAMP~~;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;EAA0B"}
1	+ {"version":3,"sources":["../src/contexts/AvatarContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarShape, AvatarSize } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport interface AvatarContextValue {\n shape?: AvatarShape;\n size?: AvatarSize;\n}\n\nconst avatarContextDefaultValue: AvatarContextValue = {};\n\n/\n @internal\n /\nexport const AvatarContextProvider = avatarContext.Provider;\n\n/\n @internal\n */\nexport const useAvatarContext = (): AvatarContextValue => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"],"names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","useAvatarContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAEvD;;CAEC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;CAEC,GACD,OAAO,MAAMC,mBAAmB;QAA0BP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;EAA0B"}

package/lib/contexts/AvatarGroupContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 /**
  * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine

package/lib/contexts/AvatarGroupContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["~~import~~ { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/*\n AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue \| undefined>(\n undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAyB,mCAAmC;AAItG;;;CAGC,GACD,OAAO,MAAMC,qBAAuDF,cAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAEjE,OAAO,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAE/D,OAAO,MAAMC,iCAAiC,CAAIC,WAChDP,mBAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}
1	+ {"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/*\n AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue \| undefined>(\n undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAyB,mCAAmC;AAItG;;;CAGC,GACD,OAAO,MAAMC,qBAAuDF,cAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAEjE,OAAO,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAE/D,OAAO,MAAMC,iCAAiC,CAAIC,WAChDP,mBAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}

package/lib-commonjs/components/Avatar/Avatar.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true