@fluentui/react-avatar 9.2.6 → 9.2.8

package/lib-amd/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarGroupPopoverStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\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    ...shorthands.margin('0'),\n    ...shorthands.padding('0'),\n  },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n  base: {\n    maxHeight: '220px',\n    minHeight: '80px',\n    ...shorthands.overflow('hidden', 'scroll'),\n    ...shorthands.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    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.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    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n  }),\n\n  states: {\n    '&:hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n    },\n    '&:active': {\n      color: tokens.colorNeutralForeground1Pressed,\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n    },\n  },\n\n  selected: {\n    color: tokens.colorNeutralForeground1Selected,\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n  },\n\n  icon12: { fontSize: '12px' },\n  icon16: { fontSize: '16px' },\n  icon20: { fontSize: '20px' },\n  icon24: { fontSize: '24px' },\n  icon28: { fontSize: '28px' },\n  icon32: { fontSize: '32px' },\n  icon48: { fontSize: '48px' },\n  caption2Strong: { ...typographyStyles.caption2Strong },\n  caption1Strong: { ...typographyStyles.caption1Strong },\n  body1Strong: { ...typographyStyles.body1Strong },\n  subtitle2: { ...typographyStyles.subtitle2 },\n  subtitle1: { ...typographyStyles.subtitle1 },\n  title3: { ...typographyStyles.title3 },\n  borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n  borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n  borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n  borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\n  const { indicator, size, layout, popoverOpen } = state;\n  const sizeStyles = useSizeStyles();\n  const triggerButtonStyles = useTriggerButtonStyles();\n  const contentStyles = useContentStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n  const groupChildClassName = useGroupChildClassName(layout, size);\n\n  const triggerButtonClasses = [];\n\n  if (size < 36) {\n    triggerButtonClasses.push(triggerButtonStyles.borderThin);\n  } else if (size < 56) {\n    triggerButtonClasses.push(triggerButtonStyles.borderThick);\n  } else if (size < 72) {\n    triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n  } else {\n    triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n  }\n\n  if (indicator === 'count') {\n    if (size <= 24) {\n      triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n    } else if (size <= 28) {\n      triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n    } else if (size <= 40) {\n      triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n    } else if (size <= 56) {\n      triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n    } else if (size <= 96) {\n      triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n    } else {\n      triggerButtonClasses.push(triggerButtonStyles.title3);\n    }\n  } else {\n    if (size <= 16) {\n      triggerButtonClasses.push(triggerButtonStyles.icon12);\n    } else if (size <= 24) {\n      triggerButtonClasses.push(triggerButtonStyles.icon16);\n    } else if (size <= 40) {\n      triggerButtonClasses.push(triggerButtonStyles.icon20);\n    } else if (size <= 48) {\n      triggerButtonClasses.push(triggerButtonStyles.icon24);\n    } else if (size <= 56) {\n      triggerButtonClasses.push(triggerButtonStyles.icon28);\n    } else if (size <= 72) {\n      triggerButtonClasses.push(triggerButtonStyles.icon32);\n    } else {\n      triggerButtonClasses.push(triggerButtonStyles.icon48);\n    }\n  }\n\n  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"]}

package/lib-amd/contexts/AvatarContext.js

@@ -0,0 +1,17 @@
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatarContext = exports.AvatarContextProvider = void 0;
+    var avatarContext = React.createContext(undefined);
+    var avatarContextDefaultValue = {};
+    /**
+     * @internal
+     */
+    exports.AvatarContextProvider = avatarContext.Provider;
+    /**
+     * @internal
+     */
+    var useAvatarContext = function () { var _a; return (_a = React.useContext(avatarContext)) !== null && _a !== void 0 ? _a : avatarContextDefaultValue; };
+    exports.useAvatarContext = useAvatarContext;
+});
+//# sourceMappingURL=AvatarContext.js.map

package/lib-amd/contexts/AvatarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/contexts/AvatarContext.ts"],"names":[],"mappings":";;;;IAGA,IAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAiC,SAAS,CAAC,CAAC;IASrF,IAAM,yBAAyB,GAAuB,EAAE,CAAC;IAEzD;;OAEG;IACU,QAAA,qBAAqB,GAAG,aAAa,CAAC,QAAQ,CAAC;IAE5D;;OAEG;IACI,IAAM,gBAAgB,GAAG,sBAAM,OAAA,MAAA,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,mCAAI,yBAAyB,CAAA,EAAA,CAAC;IAAtF,QAAA,gBAAgB,oBAAsE","sourcesContent":["import * as React from 'react';\nimport { AvatarSizes } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n  size?: AvatarSizes;\n}\n\nconst avatarContextDefaultValue: AvatarContextValue = {};\n\n/**\n * @internal\n */\nexport const AvatarContextProvider = avatarContext.Provider;\n\n/**\n * @internal\n */\nexport const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"]}

package/lib-amd/contexts/AvatarGroupContext.js

@@ -0,0 +1,20 @@
+define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatarGroupContext_unstable = exports.AvatarGroupProvider = exports.AvatarGroupContext = void 0;
+    /**
+     * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine
+     * default values of some props.
+     */
+    exports.AvatarGroupContext = react_context_selector_1.createContext(undefined);
+    var avatarGroupContextDefaultValue = {};
+    exports.AvatarGroupProvider = exports.AvatarGroupContext.Provider;
+    var useAvatarGroupContext_unstable = function (selector) {
+        return react_context_selector_1.useContextSelector(exports.AvatarGroupContext, function (ctx) {
+            if (ctx === void 0) { ctx = avatarGroupContextDefaultValue; }
+            return selector(ctx);
+        });
+    };
+    exports.useAvatarGroupContext_unstable = useAvatarGroupContext_unstable;
+});
+//# sourceMappingURL=AvatarGroupContext.js.map

package/lib-amd/contexts/AvatarGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/contexts/AvatarGroupContext.ts"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACU,QAAA,kBAAkB,GAAqC,sCAAa,CAC/E,SAAS,CAC0B,CAAC;IAEtC,IAAM,8BAA8B,GAA4B,EAAE,CAAC;IAEtD,QAAA,mBAAmB,GAAG,0BAAkB,CAAC,QAAQ,CAAC;IAExD,IAAM,8BAA8B,GAAG,UAAI,QAAqD;QACrG,OAAA,2CAAkB,CAAC,0BAAkB,EAAE,UAAC,GAAoC;YAApC,oBAAA,EAAA,oCAAoC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAA/F,CAA+F,CAAC;IADrF,QAAA,8BAA8B,kCACuD","sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n  undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n  useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"]}

package/lib-amd/contexts/index.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./AvatarGroupContext", "./AvatarContext"], function (require, exports, tslib_1, AvatarGroupContext_1, AvatarContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(AvatarGroupContext_1, exports);
+    tslib_1.__exportStar(AvatarContext_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/contexts/index.ts"],"names":[],"mappings":";;;IAAA,oDAAqC;IACrC,+CAAgC","sourcesContent":["export * from './AvatarGroupContext';\nexport * from './AvatarContext';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,33 @@
+define(["require", "exports", "./Avatar", "./utils/index", "./AvatarGroup", "./AvatarGroupItem", "./AvatarGroupPopover", "./contexts/index"], function (require, exports, Avatar_1, index_1, AvatarGroup_1, AvatarGroupItem_1, AvatarGroupPopover_1, index_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatarGroupContext_unstable = exports.useAvatarContext = exports.AvatarGroupProvider = exports.AvatarContextProvider = exports.useAvatarGroupPopover_unstable = exports.useAvatarGroupPopoverStyles_unstable = exports.renderAvatarGroupPopover_unstable = exports.avatarGroupPopoverClassNames = exports.AvatarGroupPopover = exports.useAvatarGroupItem_unstable = exports.useAvatarGroupItemStyles_unstable = exports.renderAvatarGroupItem_unstable = exports.avatarGroupItemClassNames = exports.AvatarGroupItem = exports.useAvatarGroup_unstable = exports.useAvatarGroupStyles_unstable = exports.useAvatarGroupContextValues = exports.renderAvatarGroup_unstable = exports.avatarGroupClassNames = exports.AvatarGroup = exports.partitionAvatarGroupItems = exports.getInitials = exports.useAvatar_unstable = exports.useAvatarStyles_unstable = exports.renderAvatar_unstable = exports.avatarClassNames = exports.Avatar = void 0;
+    Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
+    Object.defineProperty(exports, "avatarClassNames", { enumerable: true, get: function () { return Avatar_1.avatarClassNames; } });
+    Object.defineProperty(exports, "renderAvatar_unstable", { enumerable: true, get: function () { return Avatar_1.renderAvatar_unstable; } });
+    Object.defineProperty(exports, "useAvatarStyles_unstable", { enumerable: true, get: function () { return Avatar_1.useAvatarStyles_unstable; } });
+    Object.defineProperty(exports, "useAvatar_unstable", { enumerable: true, get: function () { return Avatar_1.useAvatar_unstable; } });
+    Object.defineProperty(exports, "getInitials", { enumerable: true, get: function () { return index_1.getInitials; } });
+    Object.defineProperty(exports, "partitionAvatarGroupItems", { enumerable: true, get: function () { return index_1.partitionAvatarGroupItems; } });
+    Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return AvatarGroup_1.AvatarGroup; } });
+    Object.defineProperty(exports, "avatarGroupClassNames", { enumerable: true, get: function () { return AvatarGroup_1.avatarGroupClassNames; } });
+    Object.defineProperty(exports, "renderAvatarGroup_unstable", { enumerable: true, get: function () { return AvatarGroup_1.renderAvatarGroup_unstable; } });
+    Object.defineProperty(exports, "useAvatarGroupContextValues", { enumerable: true, get: function () { return AvatarGroup_1.useAvatarGroupContextValues; } });
+    Object.defineProperty(exports, "useAvatarGroupStyles_unstable", { enumerable: true, get: function () { return AvatarGroup_1.useAvatarGroupStyles_unstable; } });
+    Object.defineProperty(exports, "useAvatarGroup_unstable", { enumerable: true, get: function () { return AvatarGroup_1.useAvatarGroup_unstable; } });
+    Object.defineProperty(exports, "AvatarGroupItem", { enumerable: true, get: function () { return AvatarGroupItem_1.AvatarGroupItem; } });
+    Object.defineProperty(exports, "avatarGroupItemClassNames", { enumerable: true, get: function () { return AvatarGroupItem_1.avatarGroupItemClassNames; } });
+    Object.defineProperty(exports, "renderAvatarGroupItem_unstable", { enumerable: true, get: function () { return AvatarGroupItem_1.renderAvatarGroupItem_unstable; } });
+    Object.defineProperty(exports, "useAvatarGroupItemStyles_unstable", { enumerable: true, get: function () { return AvatarGroupItem_1.useAvatarGroupItemStyles_unstable; } });
+    Object.defineProperty(exports, "useAvatarGroupItem_unstable", { enumerable: true, get: function () { return AvatarGroupItem_1.useAvatarGroupItem_unstable; } });
+    Object.defineProperty(exports, "AvatarGroupPopover", { enumerable: true, get: function () { return AvatarGroupPopover_1.AvatarGroupPopover; } });
+    Object.defineProperty(exports, "avatarGroupPopoverClassNames", { enumerable: true, get: function () { return AvatarGroupPopover_1.avatarGroupPopoverClassNames; } });
+    Object.defineProperty(exports, "renderAvatarGroupPopover_unstable", { enumerable: true, get: function () { return AvatarGroupPopover_1.renderAvatarGroupPopover_unstable; } });
+    Object.defineProperty(exports, "useAvatarGroupPopoverStyles_unstable", { enumerable: true, get: function () { return AvatarGroupPopover_1.useAvatarGroupPopoverStyles_unstable; } });
+    Object.defineProperty(exports, "useAvatarGroupPopover_unstable", { enumerable: true, get: function () { return AvatarGroupPopover_1.useAvatarGroupPopover_unstable; } });
+    Object.defineProperty(exports, "AvatarContextProvider", { enumerable: true, get: function () { return index_2.AvatarContextProvider; } });
+    Object.defineProperty(exports, "AvatarGroupProvider", { enumerable: true, get: function () { return index_2.AvatarGroupProvider; } });
+    Object.defineProperty(exports, "useAvatarContext", { enumerable: true, get: function () { return index_2.useAvatarContext; } });
+    Object.defineProperty(exports, "useAvatarGroupContext_unstable", { enumerable: true, get: function () { return index_2.useAvatarGroupContext_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-avatar/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,0GAAA,gBAAgB,OAAA;IAChB,+GAAA,qBAAqB,OAAA;IACrB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAGX,oGAAA,WAAW,OAAA;IAAE,kHAAA,yBAAyB,OAAA;IAG7C,0GAAA,WAAW,OAAA;IACX,oHAAA,qBAAqB,OAAA;IACrB,yHAAA,0BAA0B,OAAA;IAC1B,0HAAA,2BAA2B,OAAA;IAC3B,4HAAA,6BAA6B,OAAA;IAC7B,sHAAA,uBAAuB,OAAA;IAUvB,kHAAA,eAAe,OAAA;IACf,4HAAA,yBAAyB,OAAA;IACzB,iIAAA,8BAA8B,OAAA;IAC9B,oIAAA,iCAAiC,OAAA;IACjC,8HAAA,2BAA2B,OAAA;IAI3B,wHAAA,kBAAkB,OAAA;IAClB,kIAAA,4BAA4B,OAAA;IAC5B,uIAAA,iCAAiC,OAAA;IACjC,0IAAA,oCAAoC,OAAA;IACpC,oIAAA,8BAA8B,OAAA;IAI9B,8GAAA,qBAAqB,OAAA;IACrB,4GAAA,mBAAmB,OAAA;IACnB,yGAAA,gBAAgB,OAAA;IAChB,uHAAA,8BAA8B,OAAA","sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n  useAvatarGroupPopover_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"]}

package/lib-amd/utils/getInitials.js

@@ -0,0 +1,87 @@
+/**
+ * Regular expressions matching characters to ignore when calculating the initials.
+ */
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getInitials = void 0;
+    /**
+     * Regular expression matching characters within various types of enclosures, including the enclosures themselves
+     *  so for example, (xyz) [xyz] {xyz} all would be ignored
+     */
+    var UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
+    /**
+     * Regular expression matching special ASCII characters except space, plus some unicode special characters.
+     * Applies after unwanted enclosures have been removed
+     */
+    var UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
+    /**
+     * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+     * and number has been trimmed for whitespaces
+     */
+    var PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+    /** Regular expression matching one or more spaces. */
+    var MULTIPLE_WHITESPACES_REGEX = /\s+/g;
+    /**
+     * Regular expression matching languages for which we currently don't support initials.
+     * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.
+     * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
+     * Japanese: Hiragana, Katakana.
+     * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,
+     *             CJK Unified Ideographs Extension B
+     */
+    // eslint-disable-next-line @fluentui/max-len
+    var UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
+    function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
+        var initials = '';
+        var splits = displayName.split(' ');
+        if (splits.length !== 0) {
+            initials += splits[0].charAt(0).toUpperCase();
+        }
+        if (!firstInitialOnly) {
+            if (splits.length === 2) {
+                initials += splits[1].charAt(0).toUpperCase();
+            }
+            else if (splits.length === 3) {
+                initials += splits[2].charAt(0).toUpperCase();
+            }
+        }
+        if (isRtl && initials.length > 1) {
+            return initials.charAt(1) + initials.charAt(0);
+        }
+        return initials;
+    }
+    function cleanupDisplayName(displayName) {
+        displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
+        displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
+        displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
+        displayName = displayName.trim();
+        return displayName;
+    }
+    /**
+     * Get (up to 2 characters) initials based on display name of the persona.
+     *
+     * @param displayName - The full name of the person or entity
+     * @param isRtl - Whether the display is in RTL
+     * @param options - Extra options to control the behavior of getInitials
+     *
+     * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
+     * could be derived from the name.
+     *
+     * @internal
+     */
+    function getInitials(displayName, isRtl, options) {
+        if (!displayName) {
+            return '';
+        }
+        displayName = cleanupDisplayName(displayName);
+        // For names containing CJK characters, and phone numbers, we don't display initials
+        if (UNSUPPORTED_TEXT_REGEX.test(displayName) ||
+            (!(options === null || options === void 0 ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName))) {
+            return '';
+        }
+        return getInitialsLatin(displayName, isRtl, options === null || options === void 0 ? void 0 : options.firstInitialOnly);
+    }
+    exports.getInitials = getInitials;
+});
+//# sourceMappingURL=getInitials.js.map

package/lib-amd/utils/getInitials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/utils/getInitials.ts"],"names":[],"mappings":"AAAA;;GAEG;;;;;IAEH;;;OAGG;IACH,IAAM,yBAAyB,GAAW,6BAA6B,CAAC;IAExE;;;OAGG;IACH,IAAM,oBAAoB,GAAW,4DAA4D,CAAC;IAElG;;;OAGG;IACH,IAAM,iBAAiB,GAAW,+BAA+B,CAAC;IAElE,sDAAsD;IACtD,IAAM,0BAA0B,GAAW,MAAM,CAAC;IAElD;;;;;;;OAOG;IACH,6CAA6C;IAC7C,IAAM,sBAAsB,GAAW,4MAA4M,CAAC;IAEpP,SAAS,gBAAgB,CAAC,WAAmB,EAAE,KAAc,EAAE,gBAA0B;QACvF,IAAI,QAAQ,GAAG,EAAE,CAAC;QAElB,IAAM,MAAM,GAAa,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACvB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;SAC/C;QAED,IAAI,CAAC,gBAAgB,EAAE;YACrB,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;gBACvB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;aAC/C;iBAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;aAC/C;SACF;QAED,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAChC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SAChD;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,SAAS,kBAAkB,CAAC,WAAmB;QAC7C,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAC;QACjE,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAC5D,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;QACnE,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;QAEjC,OAAO,WAAW,CAAC;IACrB,CAAC;IAED;;;;;;;;;;;OAWG;IACH,SAAgB,WAAW,CACzB,WAAsC,EACtC,KAAc,EACd,OAMC;QAED,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,EAAE,CAAC;SACX;QAED,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;QAE9C,oFAAoF;QACpF,IACE,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EACrE;YACA,OAAO,EAAE,CAAC;SACX;QAED,OAAO,gBAAgB,CAAC,WAAW,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CAAC,CAAC;IACzE,CAAC;IA1BD,kCA0BC","sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n *  so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n *             CJK Unified Ideographs Extension B\n */\n// eslint-disable-next-line @fluentui/max-len\nconst UNSUPPORTED_TEXT_REGEX: RegExp = /[\\u0600-\\u06FF\\u0750-\\u077F\\u08A0-\\u08FF\\u1100-\\u11FF\\u3130-\\u318F\\uA960-\\uA97F\\uAC00-\\uD7AF\\uD7B0-\\uD7FF\\u3040-\\u309F\\u30A0-\\u30FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uF900-\\uFAFF]|[\\uD840-\\uD869][\\uDC00-\\uDED6]/;\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean, firstInitialOnly?: boolean): string {\n  let initials = '';\n\n  const splits: string[] = displayName.split(' ');\n  if (splits.length !== 0) {\n    initials += splits[0].charAt(0).toUpperCase();\n  }\n\n  if (!firstInitialOnly) {\n    if (splits.length === 2) {\n      initials += splits[1].charAt(0).toUpperCase();\n    } else if (splits.length === 3) {\n      initials += splits[2].charAt(0).toUpperCase();\n    }\n  }\n\n  if (isRtl && initials.length > 1) {\n    return initials.charAt(1) + initials.charAt(0);\n  }\n\n  return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n  displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n  displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n  displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n  displayName = displayName.trim();\n\n  return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param options - Extra options to control the behavior of getInitials\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n *\n * @internal\n */\nexport function getInitials(\n  displayName: string | undefined | null,\n  isRtl: boolean,\n  options?: {\n    /** Should initials be generated from phone numbers (default false) */\n    allowPhoneInitials?: boolean;\n\n    /** Returns only the first initial */\n    firstInitialOnly?: boolean;\n  },\n): string {\n  if (!displayName) {\n    return '';\n  }\n\n  displayName = cleanupDisplayName(displayName);\n\n  // For names containing CJK characters, and phone numbers, we don't display initials\n  if (\n    UNSUPPORTED_TEXT_REGEX.test(displayName) ||\n    (!options?.allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))\n  ) {\n    return '';\n  }\n\n  return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);\n}\n"]}

package/lib-amd/utils/index.js

@@ -0,0 +1,8 @@
+define(["require", "exports", "./getInitials", "./partitionAvatarGroupItems"], function (require, exports, getInitials_1, partitionAvatarGroupItems_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.partitionAvatarGroupItems = exports.getInitials = void 0;
+    Object.defineProperty(exports, "getInitials", { enumerable: true, get: function () { return getInitials_1.getInitials; } });
+    Object.defineProperty(exports, "partitionAvatarGroupItems", { enumerable: true, get: function () { return partitionAvatarGroupItems_1.partitionAvatarGroupItems; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/utils/index.ts"],"names":[],"mappings":";;;;IAAS,0GAAA,WAAW,OAAA;IACX,sIAAA,yBAAyB,OAAA","sourcesContent":["export { getInitials } from './getInitials';\nexport { partitionAvatarGroupItems } from './partitionAvatarGroupItems';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './partitionAvatarGroupItems';\n"]}

package/lib-amd/utils/partitionAvatarGroupItems.js

@@ -0,0 +1,32 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.partitionAvatarGroupItems = void 0;
+    /**
+     * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.
+     *
+     * @param options - Configure the partition options
+     *
+     * @returns Two arrays split into inline items and overflow items based on maxInlineItems.
+     */
+    var partitionAvatarGroupItems = function (options) {
+        var _a;
+        var items = options.items;
+        var isPie = options.layout === 'pie';
+        if (isPie) {
+            return {
+                inlineItems: items.slice(0, 3),
+                overflowItems: items.length > 0 ? items : undefined,
+            };
+        }
+        var maxInlineItems = (_a = options.maxInlineItems) !== null && _a !== void 0 ? _a : 5;
+        var inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));
+        var overflowItems = items.slice(0, inlineCount);
+        return {
+            inlineItems: items.slice(inlineCount),
+            overflowItems: overflowItems.length > 0 ? overflowItems : undefined,
+        };
+    };
+    exports.partitionAvatarGroupItems = partitionAvatarGroupItems;
+});
+//# sourceMappingURL=partitionAvatarGroupItems.js.map

package/lib-amd/utils/partitionAvatarGroupItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"partitionAvatarGroupItems.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-avatar/src/utils/partitionAvatarGroupItems.ts"],"names":[],"mappings":";;;;IAWA;;;;;;OAMG;IACI,IAAM,yBAAyB,GAAG,UACvC,OAA4C;;QAEpC,IAAA,KAAK,GAAK,OAAO,MAAZ,CAAa;QAC1B,IAAM,KAAK,GAAG,OAAO,CAAC,MAAM,KAAK,KAAK,CAAC;QAEvC,IAAI,KAAK,EAAE;YACT,OAAO;gBACL,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;gBAC9B,aAAa,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;aACpD,CAAC;SACH;QAED,IAAM,cAAc,GAAG,MAAA,OAAO,CAAC,cAAc,mCAAI,CAAC,CAAC;QACnD,IAAM,WAAW,GAAG,CAAC,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChF,IAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;QAElD,OAAO;YACL,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;YACrC,aAAa,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;SACpE,CAAC;IACJ,CAAC,CAAC;IArBW,QAAA,yBAAyB,6BAqBpC","sourcesContent":["export type PartitionAvatarGroupItemsOptions<T> = {\n  items: readonly T[];\n  layout?: 'spread' | 'stack' | 'pie';\n  maxInlineItems?: number;\n};\n\nexport type PartitionAvatarGroupItems<T> = {\n  inlineItems: readonly T[];\n  overflowItems?: readonly T[];\n};\n\n/**\n * Get the inline items and overflowing items based on the array of AvatarGroupItems needed for AvatarGroup.\n *\n * @param options - Configure the partition options\n *\n * @returns Two arrays split into inline items and overflow items based on maxInlineItems.\n */\nexport const partitionAvatarGroupItems = <T>(\n  options: PartitionAvatarGroupItemsOptions<T>,\n): PartitionAvatarGroupItems<T> => {\n  const { items } = options;\n  const isPie = options.layout === 'pie';\n\n  if (isPie) {\n    return {\n      inlineItems: items.slice(0, 3),\n      overflowItems: items.length > 0 ? items : undefined,\n    };\n  }\n\n  const maxInlineItems = options.maxInlineItems ?? 5;\n  const inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));\n  const overflowItems = items.slice(0, inlineCount);\n\n  return {\n    inlineItems: items.slice(inlineCount),\n    overflowItems: overflowItems.length > 0 ? overflowItems : undefined,\n  };\n};\n"]}

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js

@@ -11,6 +11,8 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 const Avatar_1 = /*#__PURE__*/require("../../Avatar");
 
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
 exports.avatarGroupItemClassNames = {
   root: 'fui-AvatarGroupItem',
   avatar: 'fui-AvatarGroupItem__avatar',
@@ -158,6 +160,15 @@ const usePieStyles = /*#__PURE__*/react_1.__styles({
     "Bhe5x6o": "fchq2fj",
     "B3kv7bh": "ff5binh"
   },
+  "rtlSlices": {
+    "B3gf25r": "f5vdl61",
+    "Bvaow4n": "f1bnra92",
+    "bhabj1": "f4ibo7t",
+    "Bwrfys5": "f17heuis",
+    "Bwuzm9m": ["f64f2ud", "f1yjglu3"],
+    "Be8zqhl": "fa6l61x",
+    "Bij0kh0": ["f1w2396a", "f14ab3yo"]
+  },
   "thick": {
     "uiicq7": "fnyfzln"
   },
@@ -168,7 +179,7 @@ const usePieStyles = /*#__PURE__*/react_1.__styles({
     "uiicq7": "f1auhru5"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f16m7w7k:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1o4hhgz:nth-of-type(1):nth-last-of-type(2){left:-25%;}", ".fb4gjrz:nth-of-type(1):nth-last-of-type(2){right:-25%;}", ".f1pgb5nx:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".fugirid:nth-of-type(2):nth-last-of-type(1){left:25%;}", ".f4sk99m:nth-of-type(2):nth-last-of-type(1){right:25%;}", ".fjreaf3:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1k4vw81:nth-of-type(1):nth-last-of-type(3){left:-25%;}", ".f1w1xcy7:nth-of-type(1):nth-last-of-type(3){right:-25%;}", ".f1ef8vxk:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));}", ".f1x2qbfv:nth-of-type(2):nth-last-of-type(2){left:50%;}", ".f1xwf4nz:nth-of-type(2):nth-last-of-type(2){right:50%;}", ".ff6xuso:nth-of-type(2):nth-last-of-type(2){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".fzpvk6c:nth-of-type(2):nth-last-of-type(2){transform-origin:0 0;}", ".f4onu7f:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));}", ".f1ydfez1:nth-of-type(3):nth-last-of-type(1){left:50%;}", ".fjensob:nth-of-type(3):nth-last-of-type(1){right:50%;}", ".f1yv732j:nth-of-type(3):nth-last-of-type(1){top:50%;}", ".fchq2fj:nth-of-type(3):nth-last-of-type(1){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".ff5binh:nth-of-type(3):nth-last-of-type(1){transform-origin:0 0;}", ".fnyfzln{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThick);}", ".f1xdzzot{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThicker);}", ".f1auhru5{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThickest);}"]
+  "d": [".f1euv43f{position:absolute;}", ".f16m7w7k:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1o4hhgz:nth-of-type(1):nth-last-of-type(2){left:-25%;}", ".fb4gjrz:nth-of-type(1):nth-last-of-type(2){right:-25%;}", ".f1pgb5nx:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".fugirid:nth-of-type(2):nth-last-of-type(1){left:25%;}", ".f4sk99m:nth-of-type(2):nth-last-of-type(1){right:25%;}", ".fjreaf3:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f1k4vw81:nth-of-type(1):nth-last-of-type(3){left:-25%;}", ".f1w1xcy7:nth-of-type(1):nth-last-of-type(3){right:-25%;}", ".f1ef8vxk:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));clip-path:inset(0 0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width));}", ".f1x2qbfv:nth-of-type(2):nth-last-of-type(2){left:50%;}", ".f1xwf4nz:nth-of-type(2):nth-last-of-type(2){right:50%;}", ".ff6xuso:nth-of-type(2):nth-last-of-type(2){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".fzpvk6c:nth-of-type(2):nth-last-of-type(2){transform-origin:0 0;}", ".f4onu7f:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));clip-path:inset(var(--fuiAvatarGroupItem__divider--width) 0 0 var(--fuiAvatarGroupItem__divider--width));}", ".f1ydfez1:nth-of-type(3):nth-last-of-type(1){left:50%;}", ".fjensob:nth-of-type(3):nth-last-of-type(1){right:50%;}", ".f1yv732j:nth-of-type(3):nth-last-of-type(1){top:50%;}", ".fchq2fj:nth-of-type(3):nth-last-of-type(1){-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);}", ".ff5binh:nth-of-type(3):nth-last-of-type(1){transform-origin:0 0;}", ".f5vdl61:nth-of-type(1):nth-last-of-type(2){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f1bnra92:nth-of-type(2):nth-last-of-type(1){-webkit-clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}", ".f4ibo7t:nth-of-type(1):nth-last-of-type(3){-webkit-clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}", ".f17heuis:nth-of-type(2):nth-last-of-type(2){-webkit-clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);clip-path:inset(0 var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0);}", ".f64f2ud:nth-of-type(2):nth-last-of-type(2){left:0;}", ".f1yjglu3:nth-of-type(2):nth-last-of-type(2){right:0;}", ".fa6l61x:nth-of-type(3):nth-last-of-type(1){-webkit-clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);clip-path:inset(var(--fuiAvatarGroupItem__divider--width) var(--fuiAvatarGroupItem__divider--width) 0 0);}", ".f1w2396a:nth-of-type(3):nth-last-of-type(1){left:0;}", ".f14ab3yo:nth-of-type(3):nth-last-of-type(1){right:0;}", ".fnyfzln{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThick);}", ".f1xdzzot{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThicker);}", ".f1auhru5{--fuiAvatarGroupItem__divider--width:var(--strokeWidthThickest);}"]
 });
 /**
  * Apply styling to the AvatarGroupItem slots based on the state
@@ -181,6 +192,9 @@ const useAvatarGroupItemStyles_unstable = state => {
     layout,
     size
   } = state;
+  const {
+    dir
+  } = react_shared_contexts_1.useFluent_unstable();
   const avatarStyles = useAvatarStyles();
   const overflowLabelStyles = useOverflowLabelStyles();
   const pieStyles = usePieStyles();
@@ -206,6 +220,10 @@ const useAvatarGroupItemStyles_unstable = state => {
       }
 
       rootClasses.push(pieStyles.slices);
+
+      if (dir === 'rtl') {
+        rootClasses.push(pieStyles.rtlSlices);
+      }
     }
   } else {
     rootClasses.push(rootStyles.overflowItem);

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.2.6",
+  "version": "9.2.8",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,15 +34,15 @@
     "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.0.12",
-    "@fluentui/react-context-selector": "^9.1.1",
+    "@fluentui/react-badge": "^9.0.14",
+    "@fluentui/react-context-selector": "^9.1.2",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-popover": "^9.3.1",
-    "@fluentui/react-shared-contexts": "^9.1.1",
-    "@fluentui/react-tabster": "^9.3.0",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-tooltip": "^9.1.1",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-popover": "^9.3.3",
+    "@fluentui/react-shared-contexts": "^9.1.2",
+    "@fluentui/react-tabster": "^9.3.2",
+    "@fluentui/react-theme": "^9.1.3",
+    "@fluentui/react-tooltip": "^9.1.3",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },