@fluentui/react-avatar 9.11.0 → 9.11.2

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

@@ -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 type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <state.root>\n      <PopoverTrigger disableButtonEnhancement>\n        <state.tooltip>\n          <state.triggerButton />\n        </state.tooltip>\n      </PopoverTrigger>\n      <state.popoverSurface>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <state.content />\n        </AvatarGroupProvider>\n      </state.popoverSurface>\n    </state.root>\n  );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":"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"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n  state: AvatarGroupPopoverBaseState,\n  contextValues: AvatarGroupContextValues,\n): JSXElement => {\n  assertSlots<AvatarGroupPopoverSlots>(state);\n\n  return (\n    <state.root>\n      <PopoverTrigger disableButtonEnhancement>\n        <state.tooltip>\n          <state.triggerButton />\n        </state.tooltip>\n      </PopoverTrigger>\n      <state.popoverSurface>\n        <AvatarGroupProvider value={contextValues.avatarGroup}>\n          <state.content />\n        </AvatarGroupProvider>\n      </state.popoverSurface>\n    </state.root>\n  );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":"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

@@ -23,8 +23,10 @@ import { Tooltip } from '@fluentui/react-tooltip';
         ...baseProps
     });
     if (layout === 'pie') {
+        // eslint-disable-next-line react-hooks/immutability
         state.triggerButton.children = null;
     } else if (indicator === 'icon') {
+        // eslint-disable-next-line react-hooks/immutability
         state.triggerButton.children = /*#__PURE__*/ React.createElement(MoreHorizontalRegular, null);
     }
     return {
@@ -81,11 +83,11 @@ import { Tooltip } from '@fluentui/react-tooltip';
         layout,
         popoverOpen,
         components: {
-            root: Popover,
+            root: 'div',
             triggerButton: 'button',
             content: 'ul',
-            popoverSurface: PopoverSurface,
-            tooltip: Tooltip
+            popoverSurface: 'div',
+            tooltip: 'div'
         },
         root: slot.always({
             // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport {\n  OnOpenChangeData,\n  OpenPopoverEvents,\n  Popover,\n  type PopoverProps,\n  PopoverSurface,\n} from '@fluentui/react-popover';\nimport type {\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n  const state = useAvatarGroupPopoverBase_unstable({\n    indicator,\n    ...baseProps,\n  });\n\n  if (layout === 'pie') {\n    state.triggerButton.children = null;\n  } else if (indicator === 'icon') {\n    state.triggerButton.children = <MoreHorizontalRegular />;\n  }\n\n  return {\n    size,\n    ...state,\n\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      root: Popover,\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: state.popoverSurface,\n      elementType: PopoverSurface,\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: state.tooltip,\n      elementType: Tooltip,\n    }),\n  };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'count') {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n\n    components: {\n      root: 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: 'div' },\n    ),\n    triggerButton: slot.always(props.triggerButton, {\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n      elementType: 'ul',\n    }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n      elementType: 'div',\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"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"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-popover';\nimport { Popover, type PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type {\n  AvatarGroupPopoverBaseProps,\n  AvatarGroupPopoverBaseState,\n  AvatarGroupPopoverProps,\n  AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n  const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n  const state = useAvatarGroupPopoverBase_unstable({\n    indicator,\n    ...baseProps,\n  });\n\n  if (layout === 'pie') {\n    // eslint-disable-next-line react-hooks/immutability\n    state.triggerButton.children = null;\n  } else if (indicator === 'icon') {\n    // eslint-disable-next-line react-hooks/immutability\n    state.triggerButton.children = <MoreHorizontalRegular />;\n  }\n\n  return {\n    size,\n    ...state,\n\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      root: Popover,\n      popoverSurface: PopoverSurface,\n      tooltip: Tooltip,\n    },\n    root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: state.popoverSurface,\n      elementType: PopoverSurface,\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: state.tooltip,\n      elementType: Tooltip,\n    }),\n  };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n    restOfProps.onOpenChange?.(e, data);\n    setPopoverOpen(data.open);\n  };\n\n  let triggerButtonChildren;\n  if (layout === 'pie') {\n    triggerButtonChildren = null;\n  } else if (indicator === 'count') {\n    triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n  }\n\n  return {\n    count,\n    indicator,\n    layout,\n    popoverOpen,\n\n    components: {\n      root: 'div',\n      triggerButton: 'button',\n      content: 'ul',\n      popoverSurface: 'div',\n      tooltip: 'div',\n    },\n    root: slot.always(\n      {\n        // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n        children: <></>,\n        size: 'small',\n        trapFocus: true,\n        ...restOfProps,\n        open: popoverOpen,\n        onOpenChange: handleOnPopoverChange,\n      },\n      { elementType: 'div' },\n    ),\n    triggerButton: slot.always(props.triggerButton, {\n      defaultProps: {\n        children: triggerButtonChildren,\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    content: slot.always(props.content, {\n      defaultProps: {\n        children,\n        role: 'list',\n      },\n      elementType: 'ul',\n    }),\n    popoverSurface: slot.always(props.popoverSurface, {\n      defaultProps: {\n        'aria-label': 'Overflow',\n        tabIndex: 0,\n      },\n      elementType: 'div',\n    }),\n    tooltip: slot.always(props.tooltip, {\n      defaultProps: {\n        content: 'View more people.',\n        relationship: 'label',\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"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"}

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js

@@ -1,8 +1,10 @@
+'use client';
+import * as React from 'react';
 export const useAvatarGroupPopoverContextValues_unstable = (state)=>{
-    const avatarGroup = {
-        isOverflow: true,
-        size: 24
-    };
+    const avatarGroup = React.useMemo(()=>({
+            isOverflow: true,
+            size: 24
+        }), []);
     return {
         avatarGroup
     };

package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n  state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n  const avatarGroup: AvatarGroupContextValue = {\n    isOverflow: true,\n    size: 24,\n  };\n\n  return { avatarGroup };\n};\n"],"names":["useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","isOverflow","size"],"mappings":"AAGA,OAAO,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport type { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n  state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n  const avatarGroup = React.useMemo<AvatarGroupContextValue>(\n    () => ({\n      isOverflow: true,\n      size: 24,\n    }),\n    [],\n  );\n\n  return { avatarGroup };\n};\n"],"names":["React","useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","useMemo","isOverflow","size"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,8CAA8C,CACzDC;IAEA,MAAMC,cAAcH,MAAMI,OAAO,CAC/B,IAAO,CAAA;YACLC,YAAY;YACZC,MAAM;QACR,CAAA,GACA,EAAE;IAGJ,OAAO;QAAEH;IAAY;AACvB,EAAE"}

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

@@ -304,8 +304,11 @@ export const useAvatarGroupPopoverStyles_unstable = state => {
       triggerButtonClasses.push(triggerButtonStyles.icon48);
     }
   }
+  // eslint-disable-next-line react-hooks/immutability
   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);
+  // eslint-disable-next-line react-hooks/immutability
   state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
   return state;
 };

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

@@ -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","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","pie","focusIndicator","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","g9k6zt","states","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","lj723h","ecr2s2","B6oc9vd","ak43y8","wmxk5l","B50zh58","selected","icon12","Be2twd7","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","Bahqtrf","Bhrd7zp","Bg96gwp","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","borderThick","borderThicker","borderThickest","m","h","a","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"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":[]}
+{"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","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","pie","focusIndicator","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","g9k6zt","states","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","lj723h","ecr2s2","B6oc9vd","ak43y8","wmxk5l","B50zh58","selected","icon12","Be2twd7","icon16","icon20","icon24","icon28","icon32","icon48","caption2Strong","Bahqtrf","Bhrd7zp","Bg96gwp","caption1Strong","body1Strong","subtitle2","subtitle1","title3","borderThin","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","borderThick","borderThicker","borderThickest","m","h","a","useAvatarGroupPopoverStyles_unstable","state","indicator","size","layout","popoverOpen","sizeStyles","triggerButtonStyles","contentStyles","popoverSurfaceStyles","groupChildClassName","triggerButtonClasses","push","className"],"sources":["useAvatarGroupPopoverStyles.styles.js"],"sourcesContent":["'use client';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupPopoverClassNames = {\n    root: 'fui-AvatarGroupPopover',\n    content: 'fui-AvatarGroupPopover__content',\n    popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n    tooltip: 'fui-AvatarGroupPopover__tooltip',\n    triggerButton: 'fui-AvatarGroupPopover__triggerButton'\n};\n/**\n * Styles for the content slot.\n */ const useContentStyles = makeStyles({\n    base: {\n        listStyleType: 'none',\n        margin: '0',\n        padding: '0',\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\n/**\n * Styles for the popoverSurface slot.\n */ const usePopoverSurfaceStyles = makeStyles({\n    base: {\n        maxHeight: '220px',\n        minHeight: '80px',\n        overflow: 'hidden scroll',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n        width: '220px'\n    }\n});\n/**\n * Styles for the triggerButton slot.\n */ const useTriggerButtonStyles = makeStyles({\n    base: {\n        display: 'inline-flex',\n        position: 'relative',\n        flexShrink: 0,\n        justifyContent: 'center',\n        alignItems: 'center',\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        borderRadius: tokens.borderRadiusCircular,\n        ...shorthands.borderStyle('solid'),\n        padding: '0',\n        // Match color to Avatar's outline color.\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('CanvasText')\n        }\n    },\n    pie: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        color: 'transparent'\n    },\n    focusIndicator: createCustomFocusIndicatorStyle({\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n        outlineStyle: 'none'\n    }),\n    states: {\n        '&:hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n        },\n        '&:active': {\n            color: tokens.colorNeutralForeground1Pressed,\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n        }\n    },\n    selected: {\n        color: tokens.colorNeutralForeground1Selected,\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n    },\n    icon12: {\n        fontSize: '12px'\n    },\n    icon16: {\n        fontSize: '16px'\n    },\n    icon20: {\n        fontSize: '20px'\n    },\n    icon24: {\n        fontSize: '24px'\n    },\n    icon28: {\n        fontSize: '28px'\n    },\n    icon32: {\n        fontSize: '32px'\n    },\n    icon48: {\n        fontSize: '48px'\n    },\n    caption2Strong: {\n        ...typographyStyles.caption2Strong\n    },\n    caption1Strong: {\n        ...typographyStyles.caption1Strong\n    },\n    body1Strong: {\n        ...typographyStyles.body1Strong\n    },\n    subtitle2: {\n        ...typographyStyles.subtitle2\n    },\n    subtitle1: {\n        ...typographyStyles.subtitle1\n    },\n    title3: {\n        ...typographyStyles.title3\n    },\n    borderThin: {\n        ...shorthands.borderWidth(tokens.strokeWidthThin)\n    },\n    borderThick: {\n        ...shorthands.borderWidth(tokens.strokeWidthThick)\n    },\n    borderThicker: {\n        ...shorthands.borderWidth(tokens.strokeWidthThicker)\n    },\n    borderThickest: {\n        ...shorthands.borderWidth(tokens.strokeWidthThickest)\n    }\n});\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */ export const useAvatarGroupPopoverStyles_unstable = (state)=>{\n    'use no memo';\n    const { indicator, size, layout, popoverOpen } = state;\n    const sizeStyles = useSizeStyles();\n    const triggerButtonStyles = useTriggerButtonStyles();\n    const contentStyles = useContentStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    const groupChildClassName = useGroupChildClassName(layout, size);\n    const triggerButtonClasses = [];\n    if (size < 36) {\n        triggerButtonClasses.push(triggerButtonStyles.borderThin);\n    } else if (size < 56) {\n        triggerButtonClasses.push(triggerButtonStyles.borderThick);\n    } else if (size < 72) {\n        triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n    } else {\n        triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n    }\n    if (indicator === 'count') {\n        if (size <= 24) {\n            triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n        } else if (size <= 28) {\n            triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n        } else if (size <= 40) {\n            triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n        } else if (size <= 56) {\n            triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n        } else if (size <= 96) {\n            triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n        } else {\n            triggerButtonClasses.push(triggerButtonStyles.title3);\n        }\n    } else {\n        if (size <= 16) {\n            triggerButtonClasses.push(triggerButtonStyles.icon12);\n        } else if (size <= 24) {\n            triggerButtonClasses.push(triggerButtonStyles.icon16);\n        } else if (size <= 40) {\n            triggerButtonClasses.push(triggerButtonStyles.icon20);\n        } else if (size <= 48) {\n            triggerButtonClasses.push(triggerButtonStyles.icon24);\n        } else if (size <= 56) {\n            triggerButtonClasses.push(triggerButtonStyles.icon28);\n        } else if (size <= 72) {\n            triggerButtonClasses.push(triggerButtonStyles.icon32);\n        } else {\n            triggerButtonClasses.push(triggerButtonStyles.icon48);\n        }\n    }\n    // eslint-disable-next-line react-hooks/immutability\n    state.triggerButton.className = mergeClasses(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -182,8 +182,11 @@ export const avatarGroupPopoverClassNames = {
             triggerButtonClasses.push(triggerButtonStyles.icon48);
         }
     }
+    // eslint-disable-next-line react-hooks/immutability
     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);
+    // eslint-disable-next-line react-hooks/immutability
     state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
     return state;
 };

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

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

package/lib/contexts/AvatarGroupContext.js.map

@@ -1 +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"}
+{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } 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,QAAQ,mCAAmC;AAIrF;;;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.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<Omit<AvatarSlots, 'badge'>> & Pick<AvatarProps, 'name'>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<Omit<AvatarSlots, 'badge'>> & Pick<AvatarState, 'activeAriaLabelElement'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import type { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<Omit<AvatarSlots, 'badge'>> & Pick<AvatarProps, 'name'>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<Omit<AvatarSlots, 'badge'>> & Pick<AvatarState, 'activeAriaLabelElement'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/Avatar/useAvatar.js

@@ -42,6 +42,7 @@ const useAvatar_unstable = (props, ref)=>{
     const color = propColor === 'colorful' ? avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : props.name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length] : propColor;
     if (state.initials) {
         var _state_initials;
+        // eslint-disable-next-line react-hooks/immutability
         state.initials = _reactutilities.slot.optional(props.initials, {
             renderByDefault: true,
             defaultProps: {
@@ -53,10 +54,9 @@ const useAvatar_unstable = (props, ref)=>{
             elementType: 'span'
         });
     }
-    if (state.icon) {
-        var _state_icon;
-        var _children;
-        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ _react.createElement(_reacticons.PersonRegular, null);
+    if (state.icon && !state.icon.hasOwnProperty('children')) {
+        // eslint-disable-next-line react-hooks/immutability
+        state.icon.children = /*#__PURE__*/ _react.createElement(_reacticons.PersonRegular, null);
     }
     const badge = _reactutilities.slot.optional(props.badge, {
         defaultProps: {
@@ -73,11 +73,14 @@ const useAvatar_unstable = (props, ref)=>{
     if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {
         if (props.name) {
             if (badge) {
+                // eslint-disable-next-line react-hooks/immutability
                 state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;
             }
         } else if (state.initials) {
             // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+            // eslint-disable-next-line react-hooks/immutability
             state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');
+            // eslint-disable-next-line react-hooks/immutability
             delete state.root['aria-label'];
         }
         // Add the active state to the aria label
@@ -86,6 +89,7 @@ const useAvatar_unstable = (props, ref)=>{
             if (state.root['aria-labelledby']) {
                 // If using aria-labelledby, render a hidden span and append it to the labelledby
                 const activeId = state.root.id + '__active';
+                // eslint-disable-next-line react-hooks/immutability
                 state.root['aria-labelledby'] += ' ' + activeId;
                 activeAriaLabelElement = /*#__PURE__*/ _react.createElement("span", {
                     hidden: true,
@@ -93,6 +97,7 @@ const useAvatar_unstable = (props, ref)=>{
                 }, activeText);
             } else if (state.root['aria-label']) {
                 // Otherwise, just append it to the aria-label
+                // eslint-disable-next-line react-hooks/immutability
                 state.root['aria-label'] += ' ' + activeText;
             }
         }
@@ -115,7 +120,7 @@ const useAvatar_unstable = (props, ref)=>{
 };
 const useAvatarBase_unstable = (props, ref)=>{
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const { name, ...rest } = props;
+    const { name, image: imageProp, initials: initialsProp, ...rest } = props;
     const baseId = (0, _reactutilities.useId)('avatar-');
     const root = _reactutilities.slot.always({
         role: 'img',
@@ -126,7 +131,7 @@ const useAvatarBase_unstable = (props, ref)=>{
         elementType: 'span'
     });
     const [imageHidden, setImageHidden] = _react.useState(undefined);
-    let image = _reactutilities.slot.optional(props.image, {
+    let image = _reactutilities.slot.optional(imageProp, {
         defaultProps: {
             alt: '',
             role: 'presentation',
@@ -145,7 +150,7 @@ const useAvatarBase_unstable = (props, ref)=>{
         image.onLoad = (0, _reactutilities.mergeCallbacks)(image.onLoad, ()=>setImageHidden(undefined));
     }
     // Resolve the initials slot, defaulted to getInitials
-    let initials = _reactutilities.slot.optional(props.initials, {
+    let initials = _reactutilities.slot.optional(initialsProp, {
         renderByDefault: true,
         defaultProps: {
             children: (0, _index.getInitials)(name, dir === 'rtl'),

package/lib-commonjs/components/Avatar/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarBaseProps, AvatarBaseState, AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n    color: propColor = 'neutral',\n    ...rest\n  } = props;\n\n  const state = useAvatarBase_unstable(rest, ref);\n\n  // Resolve 'colorful' to a specific color name\n  const color: AvatarState['color'] =\n    propColor === 'colorful'\n      ? avatarColors[getHashCode(idForColor ?? props.name ?? '') % avatarColors.length]\n      : propColor;\n\n  if (state.initials) {\n    state.initials = slot.optional(props.initials, {\n      renderByDefault: true,\n      defaultProps: {\n        children: getInitials(props.name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n        id: state.initials?.id,\n      },\n      elementType: 'span',\n    });\n  }\n\n  if (state.icon) {\n    state.icon.children ??= <PersonRegular />;\n  }\n\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: state.root.id + '__badge' },\n    elementType: PresenceBadge,\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'] = state.activeAriaLabelElement;\n\n  // Enhance aria-label and/or aria-labelledby to include badge and active state\n  // Only process if aria attributes were not explicitly provided by the user\n  const userProvidedAriaLabel = props['aria-label'] !== undefined;\n  const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;\n\n  if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {\n    if (props.name) {\n      if (badge) {\n        state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;\n      }\n    } else if (state.initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');\n      delete state.root['aria-label'];\n    }\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (state.root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = state.root.id + '__active';\n        state.root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (state.root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        state.root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    ...state,\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    badge,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, badge: PresenceBadge },\n  };\n};\n\n/**\n * Base hook for Avatar component, manages state and structure common to all variants of Avatar\n */\nexport const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<HTMLElement>): AvatarBaseState => {\n  const { dir } = useFluent();\n  const { name, ...rest } = props;\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarBaseState['root'] = slot.always(\n    {\n      role: 'img',\n      id: baseId,\n      ref,\n      ...rest,\n    },\n    { elementType: 'span' },\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n\n  let image: AvatarBaseState['image'] = slot.optional(props.image, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  });\n\n  // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\n  }\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials\n  let initials: AvatarBaseState['initials'] = slot.optional(props.initials, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl'),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarBaseState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    });\n  }\n\n  let activeAriaLabelElement: AvatarBaseState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id;\n    }\n  }\n\n  return {\n    activeAriaLabelElement,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img' },\n    root,\n    initials,\n    icon,\n    image,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"names":["React","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","activeAppearance","idForColor","color","propColor","rest","state","useAvatarBase_unstable","avatarColors","getHashCode","name","length","initials","optional","renderByDefault","defaultProps","children","firstInitialOnly","id","elementType","icon","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","baseId","always","role","imageHidden","setImageHidden","useState","image","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarBaseProps, AvatarBaseState, AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n    color: propColor = 'neutral',\n    ...rest\n  } = props;\n\n  const state = useAvatarBase_unstable(rest, ref);\n\n  // Resolve 'colorful' to a specific color name\n  const color: AvatarState['color'] =\n    propColor === 'colorful'\n      ? avatarColors[getHashCode(idForColor ?? props.name ?? '') % avatarColors.length]\n      : propColor;\n\n  if (state.initials) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.initials = slot.optional(props.initials, {\n      renderByDefault: true,\n      defaultProps: {\n        children: getInitials(props.name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n        id: state.initials?.id,\n      },\n      elementType: 'span',\n    });\n  }\n\n  if (state.icon && !state.icon.hasOwnProperty('children')) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.children = <PersonRegular />;\n  }\n\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: state.root.id + '__badge' },\n    elementType: PresenceBadge,\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'] = state.activeAriaLabelElement;\n\n  // Enhance aria-label and/or aria-labelledby to include badge and active state\n  // Only process if aria attributes were not explicitly provided by the user\n  const userProvidedAriaLabel = props['aria-label'] !== undefined;\n  const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;\n\n  if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {\n    if (props.name) {\n      if (badge) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;\n      }\n    } else if (state.initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      // eslint-disable-next-line react-hooks/immutability\n      state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');\n      // eslint-disable-next-line react-hooks/immutability\n      delete state.root['aria-label'];\n    }\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (state.root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = state.root.id + '__active';\n        // eslint-disable-next-line react-hooks/immutability\n        state.root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (state.root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        // eslint-disable-next-line react-hooks/immutability\n        state.root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    ...state,\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    badge,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, badge: PresenceBadge },\n  };\n};\n\n/**\n * Base hook for Avatar component, manages state and structure common to all variants of Avatar\n */\nexport const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<HTMLElement>): AvatarBaseState => {\n  const { dir } = useFluent();\n  const { name, image: imageProp, initials: initialsProp, ...rest } = props;\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarBaseState['root'] = slot.always(\n    {\n      role: 'img',\n      id: baseId,\n      ref,\n      ...rest,\n    },\n    { elementType: 'span' },\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n\n  let image: AvatarBaseState['image'] = slot.optional(imageProp, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  });\n\n  // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\n  }\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials\n  let initials: AvatarBaseState['initials'] = slot.optional(initialsProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl'),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarBaseState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    });\n  }\n\n  let activeAriaLabelElement: AvatarBaseState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id;\n    }\n  }\n\n  return {\n    activeAriaLabelElement,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img' },\n    root,\n    initials,\n    icon,\n    image,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"names":["React","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","activeAppearance","idForColor","color","propColor","rest","state","useAvatarBase_unstable","avatarColors","getHashCode","name","length","initials","optional","renderByDefault","defaultProps","children","firstInitialOnly","id","elementType","icon","hasOwnProperty","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","image","imageProp","initialsProp","baseId","always","role","imageHidden","setImageHidden","useState","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}

package/lib-commonjs/components/Avatar/useAvatarStyles.styles.js

@@ -806,14 +806,18 @@ const useAvatarStyles_unstable = (state)=>{
             rootClasses.push(styles.inactive);
         }
     }
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(avatarClassNames.root, ...rootClasses, state.root.className);
     if (state.badge) {
+        // eslint-disable-next-line react-hooks/immutability
         state.badge.className = (0, _react.mergeClasses)(avatarClassNames.badge, styles.badge, state.badge.className);
     }
     if (state.image) {
+        // eslint-disable-next-line react-hooks/immutability
         state.image.className = (0, _react.mergeClasses)(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
     }
     if (state.initials) {
+        // eslint-disable-next-line react-hooks/immutability
         state.initials.className = (0, _react.mergeClasses)(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
     }
     if (state.icon) {
@@ -833,6 +837,7 @@ const useAvatarStyles_unstable = (state)=>{
         } else {
             iconSizeClass = styles.icon48;
         }
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
     }
     return state;