Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+3592
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-avatar
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms listed at https://aka.ms/fabric-assets-license
+53
View File
@@ -0,0 +1,53 @@
# @fluentui/react-avatar
**React AvatarGroup component for [Fluent UI](https://react.fluentui.dev)**
The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement of individual Avatars in a spread, stack, or pie layout.
## Usage
To import AvatarGroup, AvatarGroupItem, AvatarGroupPopover, and partitionAvatarGroupItems:
```js
import {
AvatarGroup,
AvatarGroupItem,
AvatarGroupPopover,
partitionAvatarGroupItems,
} from '@fluentui/react-components';
```
### Examples
```jsx
const names = [
'Johnie McConnell',
'Allan Munger',
'Erik Nason',
'Kristin Patterson',
'Daisy Phillips',
'Carole Poland',
'Carlos Slattery',
'Robert Tolbert',
'Kevin Sturgis',
'Charlotte Waltson',
'Elliot Woodward',
];
const AvatarGroup = () => {
const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
return (
<AvatarGroup {...props}>
{inlineItems.map(name => (
<AvatarGroupItem name={name} key={name} />
))}
<AvatarGroupPopover>
{overflowItems.map(name => (
<AvatarGroupItem name={name} key={name} />
))}
</AvatarGroupPopover>
</AvatarGroup>
);
};
```
+49
View File
@@ -0,0 +1,49 @@
# @fluentui/react-avatar
**React Avatar components for [Fluent UI](https://react.fluentui.dev/)**
The Avatar component represents a person or entity. It displays the person's image, initials, or an icon, and can be either circular or square.
## Usage
To import Avatar:
```js
import { Avatar } from '@fluentui/react-components';
```
### Examples
```jsx
<Avatar name="Miguel Garcia" />
<Avatar size={72} name="Mona Kane" image="./MonaKane.jpg" />
<Avatar shape="square" icon={<IDBadgeIcon />} />
```
Displaying a badge:
```jsx
<Avatar name="Allan Munger" badge={<PresenceBadge status="busy">} />
```
With active state indication:
```jsx
<Avatar name="Daisy Phillips" active={true} activeAppearance="ring-shadow" />
<Avatar name="Robin Counts" active={false} activeAppearance="ring-shadow" />
```
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
Alternatively, run Storybook locally with:
1. `yarn start`
2. Select `react-avatar` from the list.
### Specification
See [SPEC.md](./SPEC.md).
### Migration Guide
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Avatar implementation.
+424
View File
@@ -0,0 +1,424 @@
/// <reference types="react" />
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { PopoverProps } from '@fluentui/react-popover';
import type { PopoverSurface } from '@fluentui/react-popover';
import { PresenceBadge } from '@fluentui/react-badge';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { TooltipProps } from '@fluentui/react-tooltip';
export declare const Avatar: ForwardRefComponent<AvatarProps>;
export declare const avatarClassNames: SlotClassNames<AvatarSlots>;
/**
* @internal
*/
export declare const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefined>;
/**
* @internal
*/
export declare interface AvatarContextValue {
shape?: AvatarShape;
size?: AvatarSize;
}
/**
* The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
* of individual Avatars in a spread, stack, or pie layout.
*/
export declare const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
export declare const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots>;
export declare type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {
isOverflow?: boolean;
};
export declare type AvatarGroupContextValues = {
avatarGroup: AvatarGroupContextValue;
};
/**
* The AvatarGroupItem component represents a single person or entity.
* AvatarGroupItem should only be used in an AvatarGroup component.
*/
export declare const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps>;
export declare const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots>;
/**
* AvatarGroupItem Props
*/
export declare type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;
export declare type AvatarGroupItemSlots = {
root: NonNullable<Slot<'div', 'li'>>;
/**
* Avatar that represents a person or entity.
*/
avatar: NonNullable<Slot<typeof Avatar>>;
/**
* Label used for the name of the AvatarGroupItem when rendered as an overflow item.
* The content of the label, by default, is the `name` prop from the `avatar` slot.
*/
overflowLabel: NonNullable<Slot<'span'>>;
};
/**
* State used in rendering AvatarGroupItem
*/
export declare type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
/**
* Whether the Avatar is an overflow item.
*
* @default false
*/
isOverflowItem?: boolean;
layout: AvatarGroupProps['layout'];
size: AvatarSize;
};
/**
* The AvatarGroupPopover component provides a button with a Popover containing the children provided.
*/
export declare const AvatarGroupPopover: React_2.FC<AvatarGroupPopoverProps>;
export declare const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots>;
/**
* AvatarGroupPopover Props
*/
export declare type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {
/**
* Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.
* Note: The indicator will default to `icon` when the size is less than 24.
* @default count
*/
indicator?: 'count' | 'icon';
/**
* Number of AvatarGroupItems that will be rendered.
*
* Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the
* children, this is not possible and therefore it has do be added manually.
*/
count?: number;
children: React_2.ReactNode;
};
export declare type AvatarGroupPopoverSlots = {
root: NonNullable<Slot<PopoverProps>>;
/**
* Button that triggers the Popover.
*/
triggerButton: NonNullable<Slot<'button'>>;
/**
* List that contains the overflowed AvatarGroupItems.
*/
content: NonNullable<Slot<'ul'>>;
/**
* PopoverSurface that contains the content.
*/
popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;
/**
* Tooltip shown when triggerButton is hovered.
*/
tooltip: NonNullable<Slot<TooltipProps>>;
};
/**
* State used in rendering AvatarGroupPopover
*/
export declare type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {
popoverOpen: boolean;
layout: AvatarGroupProps['layout'];
size: AvatarSize;
};
/**
* AvatarGroup Props
*/
export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
/**
* Layout the AvatarGroupItems should be displayed as.
* @default spread
*/
layout?: 'spread' | 'stack' | 'pie';
/**
* Size of the AvatarGroupItems.
* @default 32
*/
size?: AvatarSize;
};
export declare const AvatarGroupProvider: Provider<AvatarGroupContextValue> & FC<ProviderProps<AvatarGroupContextValue>>;
export declare type AvatarGroupSlots = {
root: NonNullable<Slot<'div'>>;
};
/**
* State used in rendering AvatarGroup
*/
export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;
/**
* A specific named color for the Avatar
*/
export declare type AvatarNamedColor = 'dark-red' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'dark-green' | 'light-teal' | 'teal' | 'steel' | 'blue' | 'royal-blue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
/**
* Properties for Avatar
*/
export declare type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
/**
* Optional activity indicator
* * active: the avatar will be decorated according to activeAppearance
* * inactive: the avatar will be reduced in size and partially transparent
* * unset: normal display
*
* @default unset
*/
active?: 'active' | 'inactive' | 'unset';
/**
* The appearance when `active="active"`
*
* @default ring
*/
activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';
/**
* The color when displaying either an icon or initials.
* * neutral (default): gray
* * brand: color from the brand palette
* * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
* * [AvatarNamedColor]: a specific color from the theme
*
* @default neutral
*/
color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
/**
* Specify a string to be used instead of the name, to determine which color to use when color="colorful".
* Use this when a name is not available, but there is another unique identifier that can be used instead.
*/
idForColor?: string | undefined;
/**
* The name of the person or entity represented by this Avatar. This should always be provided if it is available.
*
* The name is used to determine the initials displayed when there is no image. It is also provided to
* accessibility tools.
*/
name?: string;
/**
* The avatar can have a circular or square shape.
* @default circular
*/
shape?: AvatarShape;
/**
* Size of the avatar in pixels.
*
* Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
* based on design guidelines for the Avatar control.
*
* Note: At size 16, if initials are displayed, only the first initial will be rendered.
*
* If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`
* to override the rendered size.
*
* For example, to set the avatar to 45px in size:
* `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`
*
* @default 32
*/
size?: AvatarSize;
};
/**
* Shape of the avatar
*/
export declare type AvatarShape = 'circular' | 'square';
/**
* Sizes for the avatar
*/
export declare type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
/**
* Sizes for the avatar
* @deprecated use AvatarSize instead
*/
export declare type AvatarSizes = AvatarSize;
export declare type AvatarSlots = {
root: Slot<'span'>;
/**
* The Avatar's image.
*
* Usage e.g.: `image={{ src: '...' }}`
*/
image?: Slot<'img'>;
/**
* (optional) Custom initials.
*
* It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
* using the `getInitials` function.
*
* The initials are displayed when there is no image (including while the image is loading).
*/
initials?: Slot<'span'>;
/**
* Icon to be displayed when the avatar doesn't have an image or initials.
*
* @default `PersonRegular` (the default icon's size depends on the Avatar's size)
*/
icon?: Slot<'span'>;
/**
* Badge to show the avatar's presence status.
*/
badge?: Slot<typeof PresenceBadge>;
};
/**
* State used in rendering Avatar
*/
export declare type AvatarState = ComponentState<AvatarSlots> & Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {
/**
* The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color
*/
color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;
/**
* Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.
*/
activeAriaLabelElement?: JSX.Element;
};
/**
* Regular expressions matching characters to ignore when calculating the initials.
*/
/**
* 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
*/
export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, options?: {
/** Should initials be generated from phone numbers (default false) */
allowPhoneInitials?: boolean;
/** Returns only the first initial */
firstInitialOnly?: boolean;
}): string;
export declare type PartitionAvatarGroupItems<T> = {
inlineItems: readonly T[];
overflowItems?: readonly T[];
};
/**
* 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.
*/
export declare const partitionAvatarGroupItems: <T>(options: PartitionAvatarGroupItemsOptions<T>) => PartitionAvatarGroupItems<T>;
export declare type PartitionAvatarGroupItemsOptions<T> = {
items: readonly T[];
layout?: 'spread' | 'stack' | 'pie';
maxInlineItems?: number;
};
export declare const renderAvatar_unstable: (state: AvatarState) => JSX.Element;
/**
* Render the final JSX of AvatarGroup
*/
export declare const renderAvatarGroup_unstable: (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => JSX.Element;
/**
* Render the final JSX of AvatarGroupItem
*/
export declare const renderAvatarGroupItem_unstable: (state: AvatarGroupItemState) => JSX.Element;
/**
* Render the final JSX of AvatarGroupPopover
*/
export declare const renderAvatarGroupPopover_unstable: (state: AvatarGroupPopoverState, contextValues: AvatarGroupContextValues) => JSX.Element;
export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
/**
* @internal
*/
export declare const useAvatarContext: () => AvatarContextValue;
/**
* Create the state required to render AvatarGroup.
*
* The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,
* before being passed to renderAvatarGroup_unstable.
*
* @param props - props from this instance of AvatarGroup
* @param ref - reference to root HTMLElement of AvatarGroup
*/
export declare const useAvatarGroup_unstable: (props: AvatarGroupProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupState;
export declare const useAvatarGroupContext_unstable: <T>(selector: ContextSelector<AvatarGroupContextValue, T>) => T;
export declare const useAvatarGroupContextValues: (state: AvatarGroupState) => AvatarGroupContextValues;
/**
* Create the state required to render AvatarGroupItem.
*
* The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
* before being passed to renderAvatarGroupItem_unstable.
*
* @param props - props from this instance of AvatarGroupItem
* @param ref - reference to root HTMLElement of AvatarGroupItem
*/
export declare const useAvatarGroupItem_unstable: (props: AvatarGroupItemProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupItemState;
/**
* Apply styling to the AvatarGroupItem slots based on the state
*/
export declare const useAvatarGroupItemStyles_unstable: (state: AvatarGroupItemState) => AvatarGroupItemState;
/**
* Create the state required to render AvatarGroupPopover.
*
* The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,
* before being passed to renderAvatarGroupPopover_unstable.
*
* @param props - props from this instance of AvatarGroupPopover
*/
export declare const useAvatarGroupPopover_unstable: (props: AvatarGroupPopoverProps) => AvatarGroupPopoverState;
export declare const useAvatarGroupPopoverContextValues_unstable: (state: AvatarGroupPopoverState) => AvatarGroupContextValues;
/**
* Apply styling to the AvatarGroupPopover slots based on the state
*/
export declare const useAvatarGroupPopoverStyles_unstable: (state: AvatarGroupPopoverState) => AvatarGroupPopoverState;
/**
* Apply styling to the AvatarGroup slots based on the state
*/
export declare const useAvatarGroupStyles_unstable: (state: AvatarGroupState) => AvatarGroupState;
export declare const useAvatarStyles_unstable: (state: AvatarState) => AvatarState;
export { }
+34
View File
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Avatar: function() {
return _index.Avatar;
},
DEFAULT_STRINGS: function() {
return _index.DEFAULT_STRINGS;
},
avatarClassNames: function() {
return _index.avatarClassNames;
},
renderAvatar_unstable: function() {
return _index.renderAvatar_unstable;
},
useAvatarStyles_unstable: function() {
return _index.useAvatarStyles_unstable;
},
useAvatar_unstable: function() {
return _index.useAvatar_unstable;
},
useSizeStyles: function() {
return _index.useSizeStyles;
}
});
const _index = require("./components/Avatar/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n AvatarNamedColor,\n AvatarProps,\n AvatarShape,\n AvatarSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSlots,\n AvatarState,\n} from './components/Avatar/index';\nexport {\n Avatar,\n DEFAULT_STRINGS,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useSizeStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWEA,MAAM;eAANA,aAAM;;IACNC,eAAe;eAAfA,sBAAe;;IACfC,gBAAgB;eAAhBA,uBAAgB;;IAChBC,qBAAqB;eAArBA,4BAAqB;;IACrBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,aAAa;eAAbA,oBAAa;;;uBACR"}
+34
View File
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarGroup: function() {
return _index.AvatarGroup;
},
avatarGroupClassNames: function() {
return _index.avatarGroupClassNames;
},
defaultAvatarGroupSize: function() {
return _index.defaultAvatarGroupSize;
},
renderAvatarGroup_unstable: function() {
return _index.renderAvatarGroup_unstable;
},
useAvatarGroupContextValues: function() {
return _index.useAvatarGroupContextValues;
},
useAvatarGroupStyles_unstable: function() {
return _index.useAvatarGroupStyles_unstable;
},
useAvatarGroup_unstable: function() {
return _index.useAvatarGroup_unstable;
}
});
const _index = require("./components/AvatarGroup/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroup.ts"],"sourcesContent":["export type {\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n} from './components/AvatarGroup/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n defaultAvatarGroupSize,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './components/AvatarGroup/index';\n"],"names":["AvatarGroup","avatarGroupClassNames","defaultAvatarGroupSize","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQEA,WAAW;eAAXA,kBAAW;;IACXC,qBAAqB;eAArBA,4BAAqB;;IACrBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}
+31
View File
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarGroupItem: function() {
return _index.AvatarGroupItem;
},
avatarGroupItemClassNames: function() {
return _index.avatarGroupItemClassNames;
},
renderAvatarGroupItem_unstable: function() {
return _index.renderAvatarGroupItem_unstable;
},
useAvatarGroupItemStyles_unstable: function() {
return _index.useAvatarGroupItemStyles_unstable;
},
useAvatarGroupItem_unstable: function() {
return _index.useAvatarGroupItem_unstable;
},
useGroupChildClassName: function() {
return _index.useGroupChildClassName;
}
});
const _index = require("./components/AvatarGroupItem/index");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupItem.ts"],"sourcesContent":["export type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n} from './components/AvatarGroupItem/index';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useGroupChildClassName,\n} from './components/AvatarGroupItem/index';\n"],"names":["AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useGroupChildClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMEA,eAAe;eAAfA,sBAAe;;IACfC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,8BAA8B;eAA9BA,qCAA8B;;IAC9BC,iCAAiC;eAAjCA,wCAAiC;;IACjCC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,sBAAsB;eAAtBA,6BAAsB;;;uBACjB"}
+31
View File
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarGroupPopover: function() {
return _index.AvatarGroupPopover;
},
avatarGroupPopoverClassNames: function() {
return _index.avatarGroupPopoverClassNames;
},
renderAvatarGroupPopover_unstable: function() {
return _index.renderAvatarGroupPopover_unstable;
},
useAvatarGroupPopoverContextValues_unstable: function() {
return _index.useAvatarGroupPopoverContextValues_unstable;
},
useAvatarGroupPopoverStyles_unstable: function() {
return _index.useAvatarGroupPopoverStyles_unstable;
},
useAvatarGroupPopover_unstable: function() {
return _index.useAvatarGroupPopover_unstable;
}
});
const _index = require("./components/AvatarGroupPopover/index");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupPopover.ts"],"sourcesContent":["export type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './components/AvatarGroupPopover/index';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopover_unstable,\n} from './components/AvatarGroupPopover/index';\n"],"names":["AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMEA,kBAAkB;eAAlBA,yBAAkB;;IAClBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,iCAAiC;eAAjCA,wCAAiC;;IACjCC,2CAA2C;eAA3CA,kDAA2C;;IAC3CC,oCAAoC;eAApCA,2CAAoC;;IACpCC,8BAA8B;eAA9BA,qCAA8B;;;uBACzB"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Avatar", {
enumerable: true,
get: function() {
return Avatar;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderAvatar = require("./renderAvatar");
const _useAvatar = require("./useAvatar");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAvatarStylesstyles = require("./useAvatarStyles.styles");
const Avatar = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAvatar.useAvatar_unstable)(props, ref);
(0, _useAvatarStylesstyles.useAvatarStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAvatarStyles_unstable')(state);
return (0, _renderAvatar.renderAvatar_unstable)(state);
});
Avatar.displayName = 'Avatar';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarStyles_unstable } from './useAvatarStyles.styles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n const state = useAvatar_unstable(props, ref);\n\n useAvatarStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);\n\n return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"names":["Avatar","React","forwardRef","props","ref","state","useAvatar_unstable","useAvatarStyles_unstable","useCustomStyleHook_unstable","renderAvatar_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;8BACe;2BACH;qCACS;uCACH;AAIlC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC/B;AAEAL,OAAOU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering Avatar
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, 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\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?: JSX.Element;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA6JA;;CAEC"}
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Avatar: function() {
return _Avatar.Avatar;
},
DEFAULT_STRINGS: function() {
return _useAvatar.DEFAULT_STRINGS;
},
avatarClassNames: function() {
return _useAvatarStylesstyles.avatarClassNames;
},
renderAvatar_unstable: function() {
return _renderAvatar.renderAvatar_unstable;
},
useAvatarStyles_unstable: function() {
return _useAvatarStylesstyles.useAvatarStyles_unstable;
},
useAvatar_unstable: function() {
return _useAvatar.useAvatar_unstable;
},
useSizeStyles: function() {
return _useAvatarStylesstyles.useSizeStyles;
}
});
const _Avatar = require("./Avatar");
const _renderAvatar = require("./renderAvatar");
const _useAvatar = require("./useAvatar");
const _useAvatarStylesstyles = require("./useAvatarStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n AvatarNamedColor,\n AvatarProps,\n AvatarShape,\n AvatarSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSlots,\n AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useSizeStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUSA,MAAM;eAANA,cAAM;;IAENC,eAAe;eAAfA,0BAAe;;IACfC,gBAAgB;eAAhBA,uCAAgB;;IAFhBC,qBAAqB;eAArBA,mCAAqB;;IAEHC,wBAAwB;eAAxBA,+CAAwB;;IADzBC,kBAAkB;eAAlBA,6BAAkB;;IACSC,aAAa;eAAbA,oCAAa;;;wBAH3C;8BACe;2BACc;uCACsB"}
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAvatar_unstable", {
enumerable: true,
get: function() {
return renderAvatar_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderAvatar_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.initials && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.initials, {}),
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.image && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.image, {}),
state.badge && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.badge, {}),
state.activeAriaLabelElement
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n assertSlots<AvatarSlots>(state);\n\n return (\n <state.root>\n {state.initials && <state.initials />}\n {state.icon && <state.icon />}\n {state.image && <state.image />}\n {state.badge && <state.badge />}\n {state.activeAriaLabelElement}\n </state.root>\n );\n};\n"],"names":["renderAvatar_unstable","state","assertSlots","_jsxs","root","initials","_jsx","icon","image","badge","activeAriaLabelElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;gCAE4B;AAGrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IAEzB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,QAAQ,EAAA,CAAA;YACjCJ,MAAMM,IAAI,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;YACzBN,MAAMO,KAAK,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,KAAK,EAAA,CAAA;YAC3BP,MAAMQ,KAAK,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,KAAK,EAAA,CAAA;YAC3BR,MAAMS,sBAAsB;;;AAGnC"}
@@ -0,0 +1,204 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEFAULT_STRINGS: function() {
return DEFAULT_STRINGS;
},
useAvatar_unstable: function() {
return useAvatar_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _index = require("../../utils/index");
const _reacticons = require("@fluentui/react-icons");
const _reactbadge = require("@fluentui/react-badge");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _AvatarContext = require("../../contexts/AvatarContext");
const DEFAULT_STRINGS = {
active: 'active',
inactive: 'inactive'
};
const useAvatar_unstable = (props, ref)=>{
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const { shape: contextShape, size: contextSize } = (0, _AvatarContext.useAvatarContext)();
const { name, size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;
let { color = 'neutral' } = props;
// Resolve 'colorful' to a specific color name
if (color === 'colorful') {
var _ref;
color = avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length];
}
const baseId = (0, _reactutilities.useId)('avatar-');
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('span', {
role: 'img',
id: baseId,
// aria-label and/or aria-labelledby are resolved below
...props,
ref
}, /* excludedPropNames: */ [
'name'
]), {
elementType: 'span'
});
const [imageHidden, setImageHidden] = _react.useState(undefined);
let image = _reactutilities.slot.optional(props.image, {
defaultProps: {
alt: '',
role: 'presentation',
'aria-hidden': true,
hidden: imageHidden
},
elementType: 'img'
}); // Image shouldn't be rendered if its src is not set
if (!(image === null || image === void 0 ? void 0 : image.src)) {
image = undefined;
} // Hide the image if it fails to load and restore it on a successful load
if (image) {
image.onError = (0, _reactutilities.mergeCallbacks)(image.onError, ()=>setImageHidden(true));
image.onLoad = (0, _reactutilities.mergeCallbacks)(image.onLoad, ()=>setImageHidden(undefined));
} // Resolve the initials slot, defaulted to getInitials.
let initials = _reactutilities.slot.optional(props.initials, {
renderByDefault: true,
defaultProps: {
children: (0, _index.getInitials)(name, dir === 'rtl', {
firstInitialOnly: size <= 16
}),
id: baseId + '__initials'
},
elementType: 'span'
}); // Don't render the initials slot if it's empty
if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
initials = undefined;
} // Render the icon slot *only if* there aren't any initials or image to display
let icon = undefined;
if (!initials && (!image || imageHidden)) {
icon = _reactutilities.slot.optional(props.icon, {
renderByDefault: true,
defaultProps: {
children: /*#__PURE__*/ _react.createElement(_reacticons.PersonRegular, null),
'aria-hidden': true
},
elementType: 'span'
});
}
const badge = _reactutilities.slot.optional(props.badge, {
defaultProps: {
size: getBadgeSize(size),
id: baseId + '__badge'
},
elementType: _reactbadge.PresenceBadge
});
let activeAriaLabelElement; // Resolve aria-label and/or aria-labelledby if not provided by the user
if (!root['aria-label'] && !root['aria-labelledby']) {
if (name) {
root['aria-label'] = name; // Include the badge in labelledby if it exists
if (badge) {
root['aria-labelledby'] = root.id + ' ' + badge.id;
}
} else if (initials) {
// root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
} // Add the active state to the aria label
if (active === 'active' || active === 'inactive') {
const activeText = DEFAULT_STRINGS[active];
if (root['aria-labelledby']) {
// If using aria-labelledby, render a hidden span and append it to the labelledby
const activeId = baseId + '__active';
root['aria-labelledby'] += ' ' + activeId;
activeAriaLabelElement = /*#__PURE__*/ _react.createElement("span", {
hidden: true,
id: activeId
}, activeText);
} else if (root['aria-label']) {
// Otherwise, just append it to the aria-label
root['aria-label'] += ' ' + activeText;
}
}
}
return {
size,
shape,
active,
activeAppearance,
activeAriaLabelElement,
color,
components: {
root: 'span',
initials: 'span',
icon: 'span',
image: 'img',
badge: _reactbadge.PresenceBadge
},
root,
initials,
icon,
image,
badge
};
};
const getBadgeSize = (size)=>{
if (size >= 96) {
return 'extra-large';
} else if (size >= 64) {
return 'large';
} else if (size >= 56) {
return 'medium';
} else if (size >= 40) {
return 'small';
} else if (size >= 28) {
return 'extra-small';
} else {
return 'tiny';
}
};
const avatarColors = [
'dark-red',
'cranberry',
'red',
'pumpkin',
'peach',
'marigold',
'gold',
'brass',
'brown',
'forest',
'seafoam',
'dark-green',
'light-teal',
'teal',
'steel',
'blue',
'royal-blue',
'cornflower',
'navy',
'lavender',
'purple',
'grape',
'lilac',
'pink',
'magenta',
'plum',
'beige',
'mink',
'platinum',
'anchor'
];
const getHashCode = (str)=>{
let hashCode = 0;
for(let len = str.length - 1; len >= 0; len--){
const ch = str.charCodeAt(len);
const shift = len % 8;
hashCode ^= (ch << shift) + (ch >> 8 - shift); // eslint-disable-line no-bitwise
}
return hashCode;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,838 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
avatarClassNames: function() {
return avatarClassNames;
},
useAvatarStyles_unstable: function() {
return useAvatarStyles_unstable;
},
useSizeStyles: function() {
return useSizeStyles;
}
});
const _react = require("@griffel/react");
const avatarClassNames = {
root: 'fui-Avatar',
image: 'fui-Avatar__image',
initials: 'fui-Avatar__initials',
icon: 'fui-Avatar__icon',
badge: 'fui-Avatar__badge'
};
// CSS variables used internally in Avatar's styles
const vars = {
badgeRadius: '--fui-Avatar-badgeRadius',
badgeGap: '--fui-Avatar-badgeGap',
badgeAlign: '--fui-Avatar-badgeAlign',
ringWidth: '--fui-Avatar-ringWidth'
};
const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r81b29z", "r1aatmv", {
r: [
".r81b29z{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}",
".r81b29z::before,.r81b29z::after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}",
".r81b29z::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}",
".r1aatmv{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}",
".r1aatmv::before,.r1aatmv::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}",
".r1aatmv::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}"
],
s: [
"@media screen and (prefers-reduced-motion: reduce){.r81b29z::before,.r81b29z::after{transition-duration:0.01ms;}}",
"@media screen and (prefers-reduced-motion: reduce){.r1aatmv::before,.r1aatmv::after{transition-duration:0.01ms;}}"
]
});
const useImageClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r136dc0n", "rjly0nl", [
".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}",
".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"
]);
const useIconInitialsClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rip04v", "r31uzil", [
".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}",
".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}"
]);
/**
* Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.
* This creates a transparent gap between the badge and Avatar.
*
* Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.
*/ const badgeMask = (margin)=>{
// Center the cutout at the badge's radius away from the edge.
// The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.
const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;
// radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px
// to "fade" from transparent to opaque over a half-pixel and ease the transition.
const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;
const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;
return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
textCaption2Strong: {
Be2twd7: "f13mqy1h"
},
textCaption1Strong: {
Be2twd7: "fy9rknc"
},
textSubtitle2: {
Be2twd7: "fod5ikn"
},
textSubtitle1: {
Be2twd7: "f1pp30po"
},
textTitle3: {
Be2twd7: "f1x0m3f5"
},
squareSmall: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fq9zq91"
},
squareMedium: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
squareLarge: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1o0qvyv"
},
squareXLarge: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1kijzfu"
},
activeOrInactive: {
Bz10aip: "ftfx35i",
Bmy1vo4: "fv0atk9",
B3o57yi: "f1iry5bo",
Bkqvd7p: "f15n41j8",
Hwfdqs: "f1onx1g3"
},
ring: {
Ftih45: "f1wl9k8s"
},
ringBadgeCutout: {
f4a502: "fp2gujx"
},
ringThick: {
of393c: "fq1w1vq"
},
ringThicker: {
of393c: "fzg6ace"
},
ringThickest: {
of393c: "f1nu8p71"
},
shadow: {
Bsft5z2: "f13zj6fq"
},
shadow4: {
Be6vj1x: "fcjn15l"
},
shadow8: {
Be6vj1x: "f1tm8t9f"
},
shadow16: {
Be6vj1x: "f1a1aohj"
},
shadow28: {
Be6vj1x: "fond6v5"
},
inactive: {
abs64n: "fp25eh",
Bz10aip: "f1clczzi",
Bkqvd7p: "f1l3s34x",
Bfgortx: 0,
Bnvr3x9: 0,
b2tv09: 0,
Bucmhp4: 0,
iayac2: "flkahu5",
b6ubon: "fw457kn",
Bqinb2h: "f1wmllxl"
},
badge: {
qhf8xq: "f1euv43f",
B5kzvoi: "f1yab3r1",
j35jbq: [
"f1e31b4d",
"f1vgc2s3"
]
},
badgeCutout: {
btxmck: "f1eugkqs"
},
badgeAlign: {
Dnlfbu: [
"f1tlnv9o",
"f1y9kyih"
]
},
tiny: {
Bdjeniz: "f1uwoubl",
niu6jh: "fid048z"
},
"extra-small": {
Bdjeniz: "f13ar0e0",
niu6jh: "fid048z"
},
small: {
Bdjeniz: "fwwuruf",
niu6jh: "fid048z"
},
medium: {
Bdjeniz: "f1af27q5",
niu6jh: "fid048z"
},
large: {
Bdjeniz: "f18yy57a",
niu6jh: "f924bxt"
},
"extra-large": {
Bdjeniz: "f2jg042",
niu6jh: "f924bxt"
},
icon12: {
Be2twd7: "f1ugzwwg"
},
icon16: {
Be2twd7: "f4ybsrx"
},
icon20: {
Be2twd7: "fe5j1ua"
},
icon24: {
Be2twd7: "f1rt2boy"
},
icon28: {
Be2twd7: "f24l1pt"
},
icon32: {
Be2twd7: "ffl51b"
},
icon48: {
Be2twd7: "f18m8u13"
}
}, {
d: [
".f13mqy1h{font-size:var(--fontSizeBase100);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".f1pp30po{font-size:var(--fontSizeBase500);}",
".f1x0m3f5{font-size:var(--fontSizeBase600);}",
[
".fq9zq91{border-radius:var(--borderRadiusSmall);}",
{
p: -1
}
],
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f1o0qvyv{border-radius:var(--borderRadiusLarge);}",
{
p: -1
}
],
[
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
{
p: -1
}
],
".ftfx35i{transform:perspective(1px);}",
".fv0atk9{transition-property:transform,opacity;}",
".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}",
".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}",
".f1wl9k8s::before{content:\"\";}",
".fp2gujx::before{-webkit-mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}",
".fq1w1vq{--fui-Avatar-ringWidth:var(--strokeWidthThick);}",
".fzg6ace{--fui-Avatar-ringWidth:var(--strokeWidthThicker);}",
".f1nu8p71{--fui-Avatar-ringWidth:var(--strokeWidthThickest);}",
".f13zj6fq::after{content:\"\";}",
".fcjn15l::after{box-shadow:var(--shadow4);}",
".f1tm8t9f::after{box-shadow:var(--shadow8);}",
".f1a1aohj::after{box-shadow:var(--shadow16);}",
".fond6v5::after{box-shadow:var(--shadow28);}",
".fp25eh{opacity:0.8;}",
".f1clczzi{transform:scale(0.875);}",
".f1l3s34x{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}",
[
".flkahu5::before,.flkahu5::after{margin:0;}",
{
p: -1
}
],
".fw457kn::before,.fw457kn::after{opacity:0;}",
".f1wmllxl::before,.f1wmllxl::after{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}",
".f1euv43f{position:absolute;}",
".f1yab3r1{bottom:0;}",
".f1e31b4d{right:0;}",
".f1vgc2s3{left:0;}",
".f1eugkqs{-webkit-mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}",
".f1tlnv9o{--fui-Avatar-badgeAlign:right;}",
".f1y9kyih{--fui-Avatar-badgeAlign:left;}",
".f1uwoubl{--fui-Avatar-badgeRadius:3px;}",
".fid048z{--fui-Avatar-badgeGap:var(--strokeWidthThin);}",
".f13ar0e0{--fui-Avatar-badgeRadius:5px;}",
".fwwuruf{--fui-Avatar-badgeRadius:6px;}",
".f1af27q5{--fui-Avatar-badgeRadius:8px;}",
".f18yy57a{--fui-Avatar-badgeRadius:10px;}",
".f924bxt{--fui-Avatar-badgeGap:var(--strokeWidthThick);}",
".f2jg042{--fui-Avatar-badgeRadius:14px;}",
".f1ugzwwg{font-size:12px;}",
".f4ybsrx{font-size:16px;}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}",
".f24l1pt{font-size:28px;}",
".ffl51b{font-size:32px;}",
".f18m8u13{font-size:48px;}"
],
m: [
[
"@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
]
]
});
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"16": {
a9b677: "fjw5fx7",
Bqenvij: "fd461yt"
},
"20": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
"24": {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
"28": {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
"32": {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
},
"36": {
a9b677: "fpdz1er",
Bqenvij: "f8ljn23"
},
"40": {
a9b677: "feqmc2u",
Bqenvij: "fbhnoac"
},
"48": {
a9b677: "f124akge",
Bqenvij: "ff2sm71"
},
"56": {
a9b677: "f1u66zr1",
Bqenvij: "fzki0ko"
},
"64": {
a9b677: "fa9ln6p",
Bqenvij: "f16k9i2m"
},
"72": {
a9b677: "fhcae8x",
Bqenvij: "f1shusfg"
},
"96": {
a9b677: "f1kyr2gn",
Bqenvij: "fypu0ge"
},
"120": {
a9b677: "fwfqyga",
Bqenvij: "fjr5b71"
},
"128": {
a9b677: "f1iksgmy",
Bqenvij: "fele2au"
}
}, {
d: [
".fjw5fx7{width:16px;}",
".fd461yt{height:16px;}",
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}",
".fpdz1er{width:36px;}",
".f8ljn23{height:36px;}",
".feqmc2u{width:40px;}",
".fbhnoac{height:40px;}",
".f124akge{width:48px;}",
".ff2sm71{height:48px;}",
".f1u66zr1{width:56px;}",
".fzki0ko{height:56px;}",
".fa9ln6p{width:64px;}",
".f16k9i2m{height:64px;}",
".fhcae8x{width:72px;}",
".f1shusfg{height:72px;}",
".f1kyr2gn{width:96px;}",
".fypu0ge{height:96px;}",
".fwfqyga{width:120px;}",
".fjr5b71{height:120px;}",
".f1iksgmy{width:128px;}",
".fele2au{height:128px;}"
]
});
const useColorStyles = /*#__PURE__*/ (0, _react.__styles)({
neutral: {
sj55zd: "f11d4kpn",
De3pzq: "f18f03hv"
},
brand: {
sj55zd: "fonrgv7",
De3pzq: "f1blnnmj"
},
"dark-red": {
sj55zd: "fqjd1y1",
De3pzq: "f1vq2oo4"
},
cranberry: {
sj55zd: "fg9gses",
De3pzq: "f1lwxszt"
},
red: {
sj55zd: "f23f7i0",
De3pzq: "f1q9qhfq"
},
pumpkin: {
sj55zd: "fjnan08",
De3pzq: "fz91bi3"
},
peach: {
sj55zd: "fknu15p",
De3pzq: "f1b9nr51"
},
marigold: {
sj55zd: "f9603vw",
De3pzq: "f3z4w6d"
},
gold: {
sj55zd: "fmq0uwp",
De3pzq: "fg50kya"
},
brass: {
sj55zd: "f28g5vo",
De3pzq: "f4w2gd0"
},
brown: {
sj55zd: "ftl572b",
De3pzq: "f14wu1f4"
},
forest: {
sj55zd: "f1gymlvd",
De3pzq: "f19ut4y6"
},
seafoam: {
sj55zd: "fnnb6wn",
De3pzq: "f1n057jc"
},
"dark-green": {
sj55zd: "ff58qw8",
De3pzq: "f11t05wk"
},
"light-teal": {
sj55zd: "f1up9qbj",
De3pzq: "f42feg1"
},
teal: {
sj55zd: "f135dsb4",
De3pzq: "f6hvv1p"
},
steel: {
sj55zd: "f151dlcp",
De3pzq: "f1lnp8zf"
},
blue: {
sj55zd: "f1rjv50u",
De3pzq: "f1ggcpy6"
},
"royal-blue": {
sj55zd: "f1emykk5",
De3pzq: "f12rj61f"
},
cornflower: {
sj55zd: "fqsigj7",
De3pzq: "f8k7hur"
},
navy: {
sj55zd: "f1nj97xi",
De3pzq: "f19gw0ux"
},
lavender: {
sj55zd: "fwctg0i",
De3pzq: "ff379vm"
},
purple: {
sj55zd: "fjrsgpu",
De3pzq: "f1mzf1e1"
},
grape: {
sj55zd: "f1fiiydq",
De3pzq: "f1o4k8oy"
},
lilac: {
sj55zd: "f1res9jt",
De3pzq: "f1x6mz1o"
},
pink: {
sj55zd: "fv3fbbi",
De3pzq: "fydlv6t"
},
magenta: {
sj55zd: "f1f1fwnz",
De3pzq: "f4xb6j5"
},
plum: {
sj55zd: "f8ptl6j",
De3pzq: "fqo8e26"
},
beige: {
sj55zd: "f1ntv3ld",
De3pzq: "f101elhj"
},
mink: {
sj55zd: "f1fscmp",
De3pzq: "f13g8o5c"
},
platinum: {
sj55zd: "f1dr00v2",
De3pzq: "fkh7blw"
},
anchor: {
sj55zd: "f1f3ti53",
De3pzq: "fu4yj0j"
}
}, {
d: [
".f11d4kpn{color:var(--colorNeutralForeground3);}",
".f18f03hv{background-color:var(--colorNeutralBackground6);}",
".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}",
".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}",
".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}",
".fg9gses{color:var(--colorPaletteCranberryForeground2);}",
".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}",
".f23f7i0{color:var(--colorPaletteRedForeground2);}",
".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}",
".fjnan08{color:var(--colorPalettePumpkinForeground2);}",
".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}",
".fknu15p{color:var(--colorPalettePeachForeground2);}",
".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}",
".f9603vw{color:var(--colorPaletteMarigoldForeground2);}",
".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}",
".fmq0uwp{color:var(--colorPaletteGoldForeground2);}",
".fg50kya{background-color:var(--colorPaletteGoldBackground2);}",
".f28g5vo{color:var(--colorPaletteBrassForeground2);}",
".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}",
".ftl572b{color:var(--colorPaletteBrownForeground2);}",
".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}",
".f1gymlvd{color:var(--colorPaletteForestForeground2);}",
".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}",
".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}",
".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}",
".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}",
".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}",
".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}",
".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}",
".f135dsb4{color:var(--colorPaletteTealForeground2);}",
".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}",
".f151dlcp{color:var(--colorPaletteSteelForeground2);}",
".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}",
".f1rjv50u{color:var(--colorPaletteBlueForeground2);}",
".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}",
".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}",
".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}",
".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}",
".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}",
".f1nj97xi{color:var(--colorPaletteNavyForeground2);}",
".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}",
".fwctg0i{color:var(--colorPaletteLavenderForeground2);}",
".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}",
".fjrsgpu{color:var(--colorPalettePurpleForeground2);}",
".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}",
".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}",
".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}",
".f1res9jt{color:var(--colorPaletteLilacForeground2);}",
".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}",
".fv3fbbi{color:var(--colorPalettePinkForeground2);}",
".fydlv6t{background-color:var(--colorPalettePinkBackground2);}",
".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}",
".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}",
".f8ptl6j{color:var(--colorPalettePlumForeground2);}",
".fqo8e26{background-color:var(--colorPalettePlumBackground2);}",
".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}",
".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}",
".f1fscmp{color:var(--colorPaletteMinkForeground2);}",
".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}",
".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}",
".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}",
".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}",
".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"
]
});
const useRingColorStyles = /*#__PURE__*/ (0, _react.__styles)({
neutral: {
Bic5iru: "f1uuiafn"
},
brand: {
Bic5iru: "f1uuiafn"
},
"dark-red": {
Bic5iru: "f1t2x9on"
},
cranberry: {
Bic5iru: "f1pvshc9"
},
red: {
Bic5iru: "f1ectbk9"
},
pumpkin: {
Bic5iru: "fvzpl0b"
},
peach: {
Bic5iru: "fwj2kd7"
},
marigold: {
Bic5iru: "fr120vy"
},
gold: {
Bic5iru: "f8xmmar"
},
brass: {
Bic5iru: "f1hbety2"
},
brown: {
Bic5iru: "f1vg3s4g"
},
forest: {
Bic5iru: "f1m3olm5"
},
seafoam: {
Bic5iru: "f17xiqtr"
},
"dark-green": {
Bic5iru: "fx32vyh"
},
"light-teal": {
Bic5iru: "f1mkihwv"
},
teal: {
Bic5iru: "fecnooh"
},
steel: {
Bic5iru: "f15hfgzm"
},
blue: {
Bic5iru: "fqproka"
},
"royal-blue": {
Bic5iru: "f17v2w59"
},
cornflower: {
Bic5iru: "fp0q1mo"
},
navy: {
Bic5iru: "f1nlym55"
},
lavender: {
Bic5iru: "f62vk8h"
},
purple: {
Bic5iru: "f15zl69q"
},
grape: {
Bic5iru: "f53w4j7"
},
lilac: {
Bic5iru: "fu2771t"
},
pink: {
Bic5iru: "fzflscs"
},
magenta: {
Bic5iru: "fb6rmqc"
},
plum: {
Bic5iru: "f1a4gm5b"
},
beige: {
Bic5iru: "f1qpf9z1"
},
mink: {
Bic5iru: "f1l7or83"
},
platinum: {
Bic5iru: "fzrj0iu"
},
anchor: {
Bic5iru: "f8oz6wf"
}
}, {
d: [
".f1uuiafn::before{color:var(--colorBrandStroke1);}",
".f1t2x9on::before{color:var(--colorPaletteDarkRedBorderActive);}",
".f1pvshc9::before{color:var(--colorPaletteCranberryBorderActive);}",
".f1ectbk9::before{color:var(--colorPaletteRedBorderActive);}",
".fvzpl0b::before{color:var(--colorPalettePumpkinBorderActive);}",
".fwj2kd7::before{color:var(--colorPalettePeachBorderActive);}",
".fr120vy::before{color:var(--colorPaletteMarigoldBorderActive);}",
".f8xmmar::before{color:var(--colorPaletteGoldBorderActive);}",
".f1hbety2::before{color:var(--colorPaletteBrassBorderActive);}",
".f1vg3s4g::before{color:var(--colorPaletteBrownBorderActive);}",
".f1m3olm5::before{color:var(--colorPaletteForestBorderActive);}",
".f17xiqtr::before{color:var(--colorPaletteSeafoamBorderActive);}",
".fx32vyh::before{color:var(--colorPaletteDarkGreenBorderActive);}",
".f1mkihwv::before{color:var(--colorPaletteLightTealBorderActive);}",
".fecnooh::before{color:var(--colorPaletteTealBorderActive);}",
".f15hfgzm::before{color:var(--colorPaletteSteelBorderActive);}",
".fqproka::before{color:var(--colorPaletteBlueBorderActive);}",
".f17v2w59::before{color:var(--colorPaletteRoyalBlueBorderActive);}",
".fp0q1mo::before{color:var(--colorPaletteCornflowerBorderActive);}",
".f1nlym55::before{color:var(--colorPaletteNavyBorderActive);}",
".f62vk8h::before{color:var(--colorPaletteLavenderBorderActive);}",
".f15zl69q::before{color:var(--colorPalettePurpleBorderActive);}",
".f53w4j7::before{color:var(--colorPaletteGrapeBorderActive);}",
".fu2771t::before{color:var(--colorPaletteLilacBorderActive);}",
".fzflscs::before{color:var(--colorPalettePinkBorderActive);}",
".fb6rmqc::before{color:var(--colorPaletteMagentaBorderActive);}",
".f1a4gm5b::before{color:var(--colorPalettePlumBorderActive);}",
".f1qpf9z1::before{color:var(--colorPaletteBeigeBorderActive);}",
".f1l7or83::before{color:var(--colorPaletteMinkBorderActive);}",
".fzrj0iu::before{color:var(--colorPalettePlatinumBorderActive);}",
".f8oz6wf::before{color:var(--colorPaletteAnchorBorderActive);}"
]
});
const useAvatarStyles_unstable = (state)=>{
'use no memo';
const { size, shape, active, activeAppearance, color } = state;
const rootClassName = useRootClassName();
const imageClassName = useImageClassName();
const iconInitialsClassName = useIconInitialsClassName();
const styles = useStyles();
const sizeStyles = useSizeStyles();
const colorStyles = useColorStyles();
const ringColorStyles = useRingColorStyles();
const rootClasses = [
rootClassName,
size !== 32 && sizeStyles[size]
];
if (state.badge) {
rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);
}
if (size <= 24) {
rootClasses.push(styles.textCaption2Strong);
} else if (size <= 28) {
rootClasses.push(styles.textCaption1Strong);
} else if (size <= 40) {
// Default text size included in useRootClassName
} else if (size <= 56) {
rootClasses.push(styles.textSubtitle2);
} else if (size <= 96) {
rootClasses.push(styles.textSubtitle1);
} else {
rootClasses.push(styles.textTitle3);
}
if (shape === 'square') {
if (size <= 24) {
rootClasses.push(styles.squareSmall);
} else if (size <= 48) {
rootClasses.push(styles.squareMedium);
} else if (size <= 72) {
rootClasses.push(styles.squareLarge);
} else {
rootClasses.push(styles.squareXLarge);
}
}
if (active === 'active' || active === 'inactive') {
rootClasses.push(styles.activeOrInactive);
if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
rootClasses.push(styles.ring, ringColorStyles[color]);
if (state.badge) {
rootClasses.push(styles.ringBadgeCutout);
}
if (size <= 48) {
rootClasses.push(styles.ringThick);
} else if (size <= 64) {
rootClasses.push(styles.ringThicker);
} else {
rootClasses.push(styles.ringThickest);
}
}
if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
rootClasses.push(styles.shadow);
if (size <= 28) {
rootClasses.push(styles.shadow4);
} else if (size <= 48) {
rootClasses.push(styles.shadow8);
} else if (size <= 64) {
rootClasses.push(styles.shadow16);
} else {
rootClasses.push(styles.shadow28);
}
}
// Note: The inactive style overrides some of the activeAppearance styles and must be applied after them
if (active === 'inactive') {
rootClasses.push(styles.inactive);
}
}
state.root.className = (0, _react.mergeClasses)(avatarClassNames.root, ...rootClasses, state.root.className);
if (state.badge) {
state.badge.className = (0, _react.mergeClasses)(avatarClassNames.badge, styles.badge, state.badge.className);
}
if (state.image) {
state.image.className = (0, _react.mergeClasses)(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
}
if (state.initials) {
state.initials.className = (0, _react.mergeClasses)(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
}
if (state.icon) {
let iconSizeClass;
if (size <= 16) {
iconSizeClass = styles.icon12;
} else if (size <= 24) {
iconSizeClass = styles.icon16;
} else if (size <= 40) {
iconSizeClass = styles.icon20;
} else if (size <= 48) {
iconSizeClass = styles.icon24;
} else if (size <= 56) {
iconSizeClass = styles.icon28;
} else if (size <= 72) {
iconSizeClass = styles.icon32;
} else {
iconSizeClass = styles.icon48;
}
state.icon.className = (0, _react.mergeClasses)(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AvatarGroup", {
enumerable: true,
get: function() {
return AvatarGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderAvatarGroup = require("./renderAvatarGroup");
const _useAvatarGroup = require("./useAvatarGroup");
const _useAvatarGroupContextValues = require("./useAvatarGroupContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAvatarGroupStylesstyles = require("./useAvatarGroupStyles.styles");
const AvatarGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAvatarGroup.useAvatarGroup_unstable)(props, ref);
const contextValues = (0, _useAvatarGroupContextValues.useAvatarGroupContextValues)(state);
(0, _useAvatarGroupStylesstyles.useAvatarGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAvatarGroupStyles_unstable')(state);
return (0, _renderAvatarGroup.renderAvatarGroup_unstable)(state, contextValues);
});
AvatarGroup.displayName = 'AvatarGroup';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nimport { useAvatarGroup_unstable } from './useAvatarGroup';\nimport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\n * of individual Avatars in a spread, stack, or pie layout.\n */\nexport const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroup_unstable(props, ref);\n const contextValues = useAvatarGroupContextValues(state);\n\n useAvatarGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);\n\n return renderAvatarGroup_unstable(state, contextValues);\n});\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"names":["AvatarGroup","React","forwardRef","props","ref","state","useAvatarGroup_unstable","contextValues","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useCustomStyleHook_unstable","renderAvatarGroup_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;mCACoB;gCACH;6CACI;qCACA;4CACE;AAQvC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAC7C,MAAMG,gBAAgBC,IAAAA,wDAAAA,EAA4BH;IAElDI,IAAAA,yDAAAA,EAA8BJ;IAE9BK,IAAAA,gDAAAA,EAA4B,iCAAiCL;IAE7D,OAAOM,IAAAA,6CAAAA,EAA2BN,OAAOE;AAC3C;AAEAP,YAAYY,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.types.ts"],"sourcesContent":["import type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * AvatarGroup Props\n */\nexport type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {\n /**\n * Layout the AvatarGroupItems should be displayed as.\n * @default spread\n */\n layout?: 'spread' | 'stack' | 'pie';\n\n /**\n * Size of the AvatarGroupItems.\n * @default 32\n */\n size?: AvatarSize;\n};\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n avatarGroup: AvatarGroupContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarGroup: function() {
return _AvatarGroup.AvatarGroup;
},
avatarGroupClassNames: function() {
return _useAvatarGroupStylesstyles.avatarGroupClassNames;
},
defaultAvatarGroupSize: function() {
return _useAvatarGroup.defaultAvatarGroupSize;
},
renderAvatarGroup_unstable: function() {
return _renderAvatarGroup.renderAvatarGroup_unstable;
},
useAvatarGroupContextValues: function() {
return _useAvatarGroupContextValues.useAvatarGroupContextValues;
},
useAvatarGroupStyles_unstable: function() {
return _useAvatarGroupStylesstyles.useAvatarGroupStyles_unstable;
},
useAvatarGroup_unstable: function() {
return _useAvatarGroup.useAvatarGroup_unstable;
}
});
const _AvatarGroup = require("./AvatarGroup");
const _renderAvatarGroup = require("./renderAvatarGroup");
const _useAvatarGroup = require("./useAvatarGroup");
const _useAvatarGroupStylesstyles = require("./useAvatarGroupStyles.styles");
const _useAvatarGroupContextValues = require("./useAvatarGroupContextValues");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/index.ts"],"sourcesContent":["export { AvatarGroup } from './AvatarGroup';\nexport type {\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n} from './AvatarGroup.types';\nexport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nexport { defaultAvatarGroupSize, useAvatarGroup_unstable } from './useAvatarGroup';\nexport { avatarGroupClassNames, useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nexport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\n"],"names":["AvatarGroup","avatarGroupClassNames","defaultAvatarGroupSize","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAUXC,qBAAqB;eAArBA,iDAAqB;;IADrBC,sBAAsB;eAAtBA,sCAAsB;;IADtBC,0BAA0B;eAA1BA,6CAA0B;;IAG1BC,2BAA2B;eAA3BA,wDAA2B;;IADJC,6BAA6B;eAA7BA,yDAA6B;;IAD5BC,uBAAuB;eAAvBA,uCAAuB;;;6BAT5B;mCAQe;gCACqB;4CACK;6CACzB"}
@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAvatarGroup_unstable", {
enumerable: true,
get: function() {
return renderAvatarGroup_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
const renderAvatarGroup_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_AvatarGroupContext.AvatarGroupProvider, {
value: contextValues.avatarGroup,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/renderAvatarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {\n assertSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.root />\n </AvatarGroupProvider>\n );\n};\n"],"names":["renderAvatarGroup_unstable","state","contextValues","assertSlots","_jsx","AvatarGroupProvider","value","avatarGroup","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;oCACQ;AAM7B,MAAMA,6BAA6B,CAACC,OAAyBC;IAClEC,IAAAA,2BAAAA,EAA8BF;IAE9B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,uCAAAA,EAAAA;QAAoBC,OAAOJ,cAAcK,WAAW;kBACnD,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
defaultAvatarGroupSize: function() {
return defaultAvatarGroupSize;
},
useAvatarGroup_unstable: function() {
return useAvatarGroup_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useAvatarGroup_unstable = (props, ref)=>{
const { layout = 'spread', size = defaultAvatarGroupSize } = props;
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
role: 'group',
...props,
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref
}, [
'size'
]), {
elementType: 'div'
});
return {
layout,
size,
components: {
root: 'div'
},
root
};
};
const defaultAvatarGroupSize = 32;
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';\n\n/**\n * Create the state required to render AvatarGroup.\n *\n * The returned state can be modified with hooks such as useAvatarGroupStyles_unstable,\n * before being passed to renderAvatarGroup_unstable.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLElement of AvatarGroup\n */\nexport const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {\n const { layout = 'spread', size = defaultAvatarGroupSize } = props;\n\n const root = slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n role: 'group',\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n },\n ['size'],\n ),\n { elementType: 'div' },\n );\n return { layout, size, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["defaultAvatarGroupSize","useAvatarGroup_unstable","props","ref","layout","size","root","slot","always","getIntrinsicElementProps","role","elementType","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAkCaA,sBAAAA;eAAAA;;IArBAC,uBAAAA;eAAAA;;;;iEAbU;gCACwB;AAYxC,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,SAAS,QAAQ,EAAEC,OAAOL,sBAAsB,EAAE,GAAGE;IAE7D,MAAMI,OAAOC,oBAAAA,CAAKC,MAAM,CACtBC,IAAAA,wCAAAA,EACE,OACA;QACEC,MAAM;QACN,GAAGR,KAAK;QACR,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FC,KAAKA;IACP,GACA;QAAC;KAAO,GAEV;QAAEQ,aAAa;IAAM;IAEvB,OAAO;QAAEP;QAAQC;QAAMO,YAAY;YAAEN,MAAM;QAAM;QAAGA;IAAK;AAC3D;AAEO,MAAMN,yBAAyB"}
@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAvatarGroupContextValues", {
enumerable: true,
get: function() {
return useAvatarGroupContextValues;
}
});
const useAvatarGroupContextValues = (state)=>{
const { layout, size } = state;
const avatarGroup = {
layout,
size
};
return {
avatarGroup
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupContextValues.ts"],"sourcesContent":["import { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';\n\nexport const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {\n const { layout, size } = state;\n\n const avatarGroup: AvatarGroupContextValue = {\n layout,\n size,\n };\n\n return { avatarGroup };\n};\n"],"names":["useAvatarGroupContextValues","state","layout","size","avatarGroup"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;AAAN,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB"}
@@ -0,0 +1,59 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
avatarGroupClassNames: function() {
return avatarGroupClassNames;
},
useAvatarGroupStyles_unstable: function() {
return useAvatarGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
const avatarGroupClassNames = {
root: 'fui-AvatarGroup'
};
/**
* Styles for the root slot.
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "ftuwxu6",
qhf8xq: "f10pi13n"
},
pie: {
Bgl5zvf: "f1uz6ud1",
De3pzq: "f1ganh6p",
Bsw6fvg: "fe2ae1k"
}
}, {
d: [
".ftuwxu6{display:inline-flex;}",
".f10pi13n{position:relative;}",
".f1uz6ud1{clip-path:circle(50%);}",
".f1ganh6p{background-color:var(--colorTransparentStroke);}"
],
m: [
[
"@media (forced-colors: active){.fe2ae1k{background-color:CanvasText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useAvatarGroupStyles_unstable = (state)=>{
'use no memo';
const { layout, size } = state;
const styles = useStyles();
const sizeStyles = (0, _useAvatarStylesstyles.useSizeStyles)();
state.root.className = (0, _react.mergeClasses)(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n root: 'fui-AvatarGroup'\n};\n/**\n * Styles for the root slot.\n */ const useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative'\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n }\n});\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n return state;\n};\n"],"names":["avatarGroupClassNames","useAvatarGroupStyles_unstable","root","useStyles","__styles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","Bsw6fvg","d","m","state","layout","size","styles","sizeStyles","useSizeStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAoBIC,6BAA6B;eAA7BA;;;uBAvBwB;uCAEX;AACvB,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,KAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAeX,MAAMZ,gCAAiCa,CAAAA;IAC9C;IACA,MAAM,EAAEC,MAAM,EAAEC,IAAAA,EAAM,GAAGF;IACzB,MAAMG,SAASd;IACf,MAAMe,aAAaC,IAAAA,oCAAa;IAChCL,MAAMZ,IAAI,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACrB,sBAAsBE,IAAI,EAAEe,OAAOZ,IAAI,EAAEU,WAAW,SAASG,UAAU,CAACF,KAAK,EAAED,WAAW,SAASE,OAAOT,GAAG,EAAEM,MAAMZ,IAAI,CAACkB,SAAS;IACvK,OAAON;AACX"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AvatarGroupItem", {
enumerable: true,
get: function() {
return AvatarGroupItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderAvatarGroupItem = require("./renderAvatarGroupItem");
const _useAvatarGroupItem = require("./useAvatarGroupItem");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAvatarGroupItemStylesstyles = require("./useAvatarGroupItemStyles.styles");
const AvatarGroupItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useAvatarGroupItem.useAvatarGroupItem_unstable)(props, ref);
(0, _useAvatarGroupItemStylesstyles.useAvatarGroupItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAvatarGroupItemStyles_unstable')(state);
return (0, _renderAvatarGroupItem.renderAvatarGroupItem_unstable)(state);
});
AvatarGroupItem.displayName = 'AvatarGroupItem';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["AvatarGroupItem","React","forwardRef","props","ref","state","useAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useCustomStyleHook_unstable","renderAvatarGroupItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;uCACwB;oCACH;qCACA;gDACM;AAQ3C,MAAMA,kBAAAA,WAAAA,GAA6DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQC,IAAAA,+CAAAA,EAA4BH,OAAOC;IAEjDG,IAAAA,iEAAAA,EAAkCF;IAElCG,IAAAA,gDAAAA,EAA4B,qCAAqCH;IAEjE,OAAOI,IAAAA,qDAAAA,EAA+BJ;AACxC;AAEAL,gBAAgBU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering AvatarGroupItem
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.types.ts"],"sourcesContent":["import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { Avatar, AvatarSize } from '../../Avatar';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupItemSlots = {\n root: NonNullable<Slot<'div', 'li'>>;\n\n /**\n * Avatar that represents a person or entity.\n */\n avatar: NonNullable<Slot<typeof Avatar>>;\n\n /**\n * Label used for the name of the AvatarGroupItem when rendered as an overflow item.\n * The content of the label, by default, is the `name` prop from the `avatar` slot.\n */\n overflowLabel: NonNullable<Slot<'span'>>;\n};\n\n/**\n * AvatarGroupItem Props\n */\nexport type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;\n\n/**\n * State used in rendering AvatarGroupItem\n */\nexport type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {\n /**\n * Whether the Avatar is an overflow item.\n *\n * @default false\n */\n isOverflowItem?: boolean;\n\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAwBA;;CAEC"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarGroupItem: function() {
return _AvatarGroupItem.AvatarGroupItem;
},
avatarGroupItemClassNames: function() {
return _useAvatarGroupItemStylesstyles.avatarGroupItemClassNames;
},
renderAvatarGroupItem_unstable: function() {
return _renderAvatarGroupItem.renderAvatarGroupItem_unstable;
},
useAvatarGroupItemStyles_unstable: function() {
return _useAvatarGroupItemStylesstyles.useAvatarGroupItemStyles_unstable;
},
useAvatarGroupItem_unstable: function() {
return _useAvatarGroupItem.useAvatarGroupItem_unstable;
},
useGroupChildClassName: function() {
return _useAvatarGroupItemStylesstyles.useGroupChildClassName;
}
});
const _AvatarGroupItem = require("./AvatarGroupItem");
const _renderAvatarGroupItem = require("./renderAvatarGroupItem");
const _useAvatarGroupItem = require("./useAvatarGroupItem");
const _useAvatarGroupItemStylesstyles = require("./useAvatarGroupItemStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export { AvatarGroupItem } from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nexport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nexport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nexport {\n avatarGroupItemClassNames,\n useAvatarGroupItemStyles_unstable,\n useGroupChildClassName,\n} from './useAvatarGroupItemStyles.styles';\n"],"names":["AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useGroupChildClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,eAAe;eAAfA,gCAAe;;IAKtBC,yBAAyB;eAAzBA,yDAAyB;;IAHlBC,8BAA8B;eAA9BA,qDAA8B;;IAIrCC,iCAAiC;eAAjCA,iEAAiC;;IAH1BC,2BAA2B;eAA3BA,+CAA2B;;IAIlCC,sBAAsB;eAAtBA,sDAAsB;;;iCAPQ;uCAEe;oCACH;gDAKrC"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAvatarGroupItem_unstable", {
enumerable: true,
get: function() {
return renderAvatarGroupItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderAvatarGroupItem_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.avatar, {}),
state.isOverflowItem && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.overflowLabel, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupItem/renderAvatarGroupItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {\n assertSlots<AvatarGroupItemSlots>(state);\n\n return (\n <state.root>\n <state.avatar />\n {state.isOverflowItem && <state.overflowLabel />}\n </state.root>\n );\n};\n"],"names":["renderAvatarGroupItem_unstable","state","assertSlots","_jsxs","root","_jsx","avatar","isOverflowItem","overflowLabel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAElC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,MAAM,EAAA,CAAA;YACZL,MAAMM,cAAc,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACJ,MAAMO,aAAa,EAAA,CAAA;;;AAGnD"}
@@ -0,0 +1,64 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAvatarGroupItem_unstable", {
enumerable: true,
get: function() {
return useAvatarGroupItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _Avatar = require("../Avatar/Avatar");
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
const _useAvatarGroup = require("../AvatarGroup/useAvatarGroup");
const _reactutilities = require("@fluentui/react-utilities");
const _reactcontextselector = require("@fluentui/react-context-selector");
const useAvatarGroupItem_unstable = (props, ref)=>{
const groupIsOverflow = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.isOverflow);
const groupSize = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.size);
const layout = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.layout);
// Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
const { style, className, ...avatarSlotProps } = props;
const size = groupSize !== null && groupSize !== void 0 ? groupSize : _useAvatarGroup.defaultAvatarGroupSize;
const hasAvatarGroupContext = (0, _reactcontextselector.useHasParentContext)(_AvatarGroupContext.AvatarGroupContext);
if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
// eslint-disable-next-line no-console
console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');
}
return {
isOverflowItem: groupIsOverflow,
layout,
size,
components: {
root: groupIsOverflow ? 'li' : 'div',
avatar: _Avatar.Avatar,
overflowLabel: 'span'
},
root: _reactutilities.slot.always(props.root, {
defaultProps: {
style,
className
},
elementType: groupIsOverflow ? 'li' : 'div'
}),
avatar: _reactutilities.slot.always(props.avatar, {
defaultProps: {
ref,
size,
color: 'colorful',
...avatarSlotProps
},
elementType: _Avatar.Avatar
}),
overflowLabel: _reactutilities.slot.always(props.overflowLabel, {
defaultProps: {
// Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
'aria-hidden': true,
children: props.name
},
elementType: 'span'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n props: AvatarGroupItemProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n const { style, className, ...avatarSlotProps } = props;\n const size = groupSize ?? defaultAvatarGroupSize;\n const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n // eslint-disable-next-line no-console\n console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n }\n\n return {\n isOverflowItem: groupIsOverflow,\n layout,\n size,\n components: {\n root: groupIsOverflow ? 'li' : 'div',\n avatar: Avatar,\n overflowLabel: 'span',\n },\n root: slot.always(props.root, {\n defaultProps: {\n style,\n className,\n },\n elementType: groupIsOverflow ? 'li' : 'div',\n }),\n avatar: slot.always(props.avatar, {\n defaultProps: {\n ref,\n size,\n color: 'colorful',\n ...avatarSlotProps,\n },\n elementType: Avatar,\n }),\n overflowLabel: slot.always(props.overflowLabel, {\n defaultProps: {\n // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n 'aria-hidden': true,\n children: props.name,\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["useAvatarGroupItem_unstable","props","ref","groupIsOverflow","useAvatarGroupContext_unstable","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","defaultAvatarGroupSize","hasAvatarGroupContext","useHasParentContext","AvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","Avatar","overflowLabel","slot","always","defaultProps","elementType","color","children","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;wBACA;oCAC4C;gCAC5B;gCAClB;sCACe;AAY7B,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,kBAAkBC,IAAAA,kDAAAA,EAA+BC,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYH,IAAAA,kDAAAA,EAA+BC,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASL,IAAAA,kDAAAA,EAA+BC,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,iBAAiB,GAAGX;IACjD,MAAMO,OAAOD,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaM,sCAAAA;IAC1B,MAAMC,wBAAwBC,IAAAA,yCAAAA,EAAoBC,sCAAAA;IAElD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACL,uBAAuB;QACnE,sCAAsC;QACtCM,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBnB;QAChBM;QACAD;QACAe,YAAY;YACVC,MAAMrB,kBAAkB,OAAO;YAC/BsB,QAAQC,cAAAA;YACRC,eAAe;QACjB;QACAH,MAAMI,oBAAAA,CAAKC,MAAM,CAAC5B,MAAMuB,IAAI,EAAE;YAC5BM,cAAc;gBACZpB;gBACAC;YACF;YACAoB,aAAa5B,kBAAkB,OAAO;QACxC;QACAsB,QAAQG,oBAAAA,CAAKC,MAAM,CAAC5B,MAAMwB,MAAM,EAAE;YAChCK,cAAc;gBACZ5B;gBACAM;gBACAwB,OAAO;gBACP,GAAGpB,eAAe;YACpB;YACAmB,aAAaL,cAAAA;QACf;QACAC,eAAeC,oBAAAA,CAAKC,MAAM,CAAC5B,MAAM0B,aAAa,EAAE;YAC9CG,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAUhC,MAAMiC,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF"}
@@ -0,0 +1,396 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
avatarGroupItemClassNames: function() {
return avatarGroupItemClassNames;
},
useAvatarGroupItemStyles_unstable: function() {
return useAvatarGroupItemStyles_unstable;
},
useGroupChildClassName: function() {
return useGroupChildClassName;
}
});
const _react = require("@griffel/react");
const _Avatar = require("../../Avatar");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const avatarGroupItemClassNames = {
root: 'fui-AvatarGroupItem',
avatar: 'fui-AvatarGroupItem__avatar',
overflowLabel: 'fui-AvatarGroupItem__overflowLabel'
};
const avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';
/**
* Styles for the root slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bt984gj: "f122n59",
mc9l5x: "ftuwxu6",
Bnnss6s: "fi64zpg",
qhf8xq: "f10pi13n"
},
overflowItem: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f16d74zd"
},
nonOverflowItem: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9"
}
}, {
d: [
".f122n59{align-items:center;}",
".ftuwxu6{display:inline-flex;}",
".fi64zpg{flex-shrink:0;}",
".f10pi13n{position:relative;}",
[
".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}",
{
p: -1
}
],
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
]
]
});
/**
* Styles for the avatar slot
*/ const useAvatarStyles = /*#__PURE__*/ (0, _react.__styles)({
nonOverflowItem: {
qhf8xq: "f1euv43f"
},
pie: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779"
}
}, {
d: [
".f1euv43f{position:absolute;}",
[
".fokr779{border-radius:0;}",
{
p: -1
}
]
]
});
/**
* Styles for the label slot
*/ const useOverflowLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Frg6f3: [
"foyynoy",
"f1vcna3q"
],
sj55zd: "f19n0e5",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
}
}, {
d: [
".foyynoy{margin-left:var(--spacingHorizontalS);}",
".f1vcna3q{margin-right:var(--spacingHorizontalS);}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}"
]
});
/**
* Styles for the stack layout
*/ const useStackStyles = /*#__PURE__*/ (0, _react.__styles)({
thick: {
E5pizo: "foiuzp5"
},
thicker: {
E5pizo: "f1x6o7w7"
},
thickest: {
E5pizo: "f2aml1u"
},
xxs: {
jhia2w: [
"f1cjco14",
"f13dxjc9"
]
},
xs: {
jhia2w: [
"f15p6bln",
"f1bab3ru"
]
},
s: {
jhia2w: [
"f1v53ncc",
"f17pu8r8"
]
},
l: {
jhia2w: [
"flv48ch",
"fnh1ydj"
]
}
}, {
d: [
".foiuzp5{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground2);}",
".f1x6o7w7{box-shadow:0 0 0 var(--strokeWidthThicker) var(--colorNeutralBackground2);}",
".f2aml1u{box-shadow:0 0 0 var(--strokeWidthThickest) var(--colorNeutralBackground2);}",
".f1cjco14:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXXS));}",
".f13dxjc9:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXXS));}",
".f15p6bln:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXS));}",
".f1bab3ru:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXS));}",
".f1v53ncc:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalS));}",
".f17pu8r8:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalS));}",
".flv48ch:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalL));}",
".fnh1ydj:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalL));}"
]
});
/**
* Styles for the spread layout
*/ const useSpreadStyles = /*#__PURE__*/ (0, _react.__styles)({
s: {
jhia2w: [
"f7lhxv7",
"f6ou2b0"
]
},
mNudge: {
jhia2w: [
"f1h0okno",
"fnnqava"
]
},
m: {
jhia2w: [
"f1wkt588",
"f1maio5g"
]
},
l: {
jhia2w: [
"f1l333zn",
"f1r41m4c"
]
},
xl: {
jhia2w: [
"fahr13a",
"f2n7rbo"
]
}
}, {
d: [
".f7lhxv7:not(:first-child){margin-left:var(--spacingHorizontalS);}",
".f6ou2b0:not(:first-child){margin-right:var(--spacingHorizontalS);}",
".f1h0okno:not(:first-child){margin-left:var(--spacingHorizontalMNudge);}",
".fnnqava:not(:first-child){margin-right:var(--spacingHorizontalMNudge);}",
".f1wkt588:not(:first-child){margin-left:var(--spacingHorizontalM);}",
".f1maio5g:not(:first-child){margin-right:var(--spacingHorizontalM);}",
".f1l333zn:not(:first-child){margin-left:var(--spacingHorizontalL);}",
".f1r41m4c:not(:first-child){margin-right:var(--spacingHorizontalL);}",
".fahr13a:not(:first-child){margin-left:var(--spacingHorizontalXL);}",
".f2n7rbo:not(:first-child){margin-right:var(--spacingHorizontalXL);}"
]
});
/**
* Styles for the pie layout
*/ const usePieStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
qhf8xq: "f1euv43f"
},
slices: {
B3gf25r: "f16m7w7k",
Be2twx7: [
"f1o4hhgz",
"fb4gjrz"
],
Bvaow4n: "f1pgb5nx",
Gpecfs: [
"fugirid",
"f4sk99m"
],
bhabj1: "fjreaf3",
B7rc6i7: [
"f1k4vw81",
"f1w1xcy7"
],
Bwrfys5: "f1ef8vxk",
Bwuzm9m: [
"f1x2qbfv",
"f1xwf4nz"
],
fflka: "ff6xuso",
do7bja: "fzpvk6c",
Be8zqhl: "f4onu7f",
Bij0kh0: [
"f1ydfez1",
"fjensob"
],
Bwexnyt: "f1yv732j",
Bhe5x6o: "fchq2fj",
B3kv7bh: "ff5binh"
},
rtlSlices: {
B3gf25r: "f5vdl61",
Bvaow4n: "f1bnra92",
bhabj1: "f4ibo7t",
Bwrfys5: "f17heuis",
Bwuzm9m: [
"f64f2ud",
"f1yjglu3"
],
Be8zqhl: "fa6l61x",
Bij0kh0: [
"f1w2396a",
"f14ab3yo"
]
},
thick: {
uiicq7: "fnyfzln"
},
thicker: {
uiicq7: "f1xdzzot"
},
thickest: {
uiicq7: "f1auhru5"
}
}, {
d: [
".f1euv43f{position:absolute;}",
".f16m7w7k:nth-of-type(1):nth-last-of-type(2){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){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){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){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){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){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){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){clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}",
".f1bnra92:nth-of-type(2):nth-last-of-type(1){clip-path:inset(0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)) 0 25%);}",
".f4ibo7t:nth-of-type(1):nth-last-of-type(3){clip-path:inset(0 25% 0 calc(25% + (var(--fuiAvatarGroupItem__divider--width) / 2)));}",
".f17heuis:nth-of-type(2):nth-last-of-type(2){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){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);}"
]
});
const useAvatarGroupItemStyles_unstable = (state)=>{
'use no memo';
const { isOverflowItem, layout, size } = state;
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const avatarStyles = useAvatarStyles();
const overflowLabelStyles = useOverflowLabelStyles();
const pieStyles = usePieStyles();
const rootStyles = useRootStyles();
const sizeStyles = (0, _Avatar.useSizeStyles)();
const groupChildClassName = useGroupChildClassName(layout, size);
const rootClasses = [
rootStyles.base
];
if (!isOverflowItem) {
rootClasses.push(rootStyles.nonOverflowItem);
rootClasses.push(groupChildClassName);
rootClasses.push(sizeStyles[size]);
if (layout === 'pie') {
rootClasses.push(pieStyles.base);
if (size < 56) {
rootClasses.push(pieStyles.thick);
} else if (size < 72) {
rootClasses.push(pieStyles.thicker);
} else {
rootClasses.push(pieStyles.thickest);
}
rootClasses.push(pieStyles.slices);
if (dir === 'rtl') {
rootClasses.push(pieStyles.rtlSlices);
}
}
} else {
rootClasses.push(rootStyles.overflowItem);
}
state.root.className = (0, _react.mergeClasses)(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);
state.avatar.className = (0, _react.mergeClasses)(avatarGroupItemClassNames.avatar, !isOverflowItem && avatarStyles.nonOverflowItem, layout === 'pie' && avatarStyles.pie, state.avatar.className);
if (state.overflowLabel) {
state.overflowLabel.className = (0, _react.mergeClasses)(avatarGroupItemClassNames.overflowLabel, overflowLabelStyles.base, state.overflowLabel.className);
}
return state;
};
const useGroupChildClassName = (layout, size)=>{
const stackStyles = useStackStyles();
const spreadStyles = useSpreadStyles();
const layoutClasses = [];
if (size) {
if (layout === 'stack') {
if (size < 56) {
layoutClasses.push(stackStyles.thick);
} else if (size < 72) {
layoutClasses.push(stackStyles.thicker);
} else {
layoutClasses.push(stackStyles.thickest);
}
if (size < 24) {
layoutClasses.push(stackStyles.xxs);
} else if (size < 48) {
layoutClasses.push(stackStyles.xs);
} else if (size < 96) {
layoutClasses.push(stackStyles.s);
} else {
layoutClasses.push(stackStyles.l);
}
} else if (layout === 'spread') {
if (size < 20) {
layoutClasses.push(spreadStyles.s);
} else if (size < 32) {
layoutClasses.push(spreadStyles.mNudge);
} else if (size < 64) {
layoutClasses.push(spreadStyles.l);
} else {
layoutClasses.push(spreadStyles.xl);
}
}
}
return (0, _react.mergeClasses)(...layoutClasses);
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AvatarGroupPopover", {
enumerable: true,
get: function() {
return AvatarGroupPopover;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover");
const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useAvatarGroupPopover = require("./useAvatarGroupPopover");
const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles");
const AvatarGroupPopover = (props)=>{
const state = (0, _useAvatarGroupPopover.useAvatarGroupPopover_unstable)(props);
const contextValues = (0, _useAvatarGroupPopoverContextValues.useAvatarGroupPopoverContextValues_unstable)(state);
(0, _useAvatarGroupPopoverStylesstyles.useAvatarGroupPopoverStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useAvatarGroupPopoverStyles_unstable')(state);
return (0, _renderAvatarGroupPopover.renderAvatarGroupPopover_unstable)(state, contextValues);
};
AvatarGroupPopover.displayName = 'AvatarGroupPopover';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["AvatarGroupPopover","props","state","useAvatarGroupPopover_unstable","contextValues","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useCustomStyleHook_unstable","renderAvatarGroupPopover_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;0CAC2B;oDACU;qCAChB;uCACG;mDACM;AAM9C,MAAMA,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQC,IAAAA,qDAAAA,EAA+BF;IAC7C,MAAMG,gBAAgBC,IAAAA,+EAAAA,EAA4CH;IAElEI,IAAAA,uEAAAA,EAAqCJ;IAErCK,IAAAA,gDAAAA,EAA4B,wCAAwCL;IAEpE,OAAOM,IAAAA,2DAAAA,EAAkCN,OAAOE;AAClD;AAEAJ,mBAAmBS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n root: NonNullable<Slot<PopoverProps>>;\n\n /**\n * Button that triggers the Popover.\n */\n triggerButton: NonNullable<Slot<'button'>>;\n\n /**\n * List that contains the overflowed AvatarGroupItems.\n */\n content: NonNullable<Slot<'ul'>>;\n\n /**\n * PopoverSurface that contains the content.\n */\n popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n /**\n * Tooltip shown when triggerButton is hovered.\n */\n tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n /**\n * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n * Note: The indicator will default to `icon` when the size is less than 24.\n * @default count\n */\n indicator?: 'count' | 'icon';\n\n /**\n * Number of AvatarGroupItems that will be rendered.\n *\n * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n * children, this is not possible and therefore it has do be added manually.\n */\n count?: number;\n\n children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n };\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarGroupPopover: function() {
return _AvatarGroupPopover.AvatarGroupPopover;
},
avatarGroupPopoverClassNames: function() {
return _useAvatarGroupPopoverStylesstyles.avatarGroupPopoverClassNames;
},
renderAvatarGroupPopover_unstable: function() {
return _renderAvatarGroupPopover.renderAvatarGroupPopover_unstable;
},
useAvatarGroupPopoverContextValues_unstable: function() {
return _useAvatarGroupPopoverContextValues.useAvatarGroupPopoverContextValues_unstable;
},
useAvatarGroupPopoverStyles_unstable: function() {
return _useAvatarGroupPopoverStylesstyles.useAvatarGroupPopoverStyles_unstable;
},
useAvatarGroupPopover_unstable: function() {
return _useAvatarGroupPopover.useAvatarGroupPopover_unstable;
}
});
const _AvatarGroupPopover = require("./AvatarGroupPopover");
const _renderAvatarGroupPopover = require("./renderAvatarGroupPopover");
const _useAvatarGroupPopover = require("./useAvatarGroupPopover");
const _useAvatarGroupPopoverStylesstyles = require("./useAvatarGroupPopoverStyles.styles");
const _useAvatarGroupPopoverContextValues = require("./useAvatarGroupPopoverContextValues");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,kBAAkB;eAAlBA,sCAAkB;;IASzBC,4BAA4B;eAA5BA,+DAA4B;;IAHrBC,iCAAiC;eAAjCA,2DAAiC;;IAMjCC,2CAA2C;eAA3CA,+EAA2C;;IAFlDC,oCAAoC;eAApCA,uEAAoC;;IAH7BC,8BAA8B;eAA9BA,qDAA8B;;;oCAPJ;0CAMe;uCACH;mDAIxC;oDACqD"}
@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderAvatarGroupPopover_unstable", {
enumerable: true,
get: function() {
return renderAvatarGroupPopover_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
const _reactutilities = require("@fluentui/react-utilities");
const _reactpopover = require("@fluentui/react-popover");
const renderAvatarGroupPopover_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpopover.PopoverTrigger, {
disableButtonEnhancement: true,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.tooltip, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.triggerButton, {})
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.popoverSurface, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AvatarGroupContext.AvatarGroupProvider, {
value: contextValues.avatarGroup,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {})
})
})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\n contextValues: AvatarGroupContextValues,\n) => {\n assertSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <state.root>\n <PopoverTrigger disableButtonEnhancement>\n <state.tooltip>\n <state.triggerButton />\n </state.tooltip>\n </PopoverTrigger>\n <state.popoverSurface>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.content />\n </AvatarGroupProvider>\n </state.popoverSurface>\n </state.root>\n );\n};\n"],"names":["renderAvatarGroupPopover_unstable","state","contextValues","assertSlots","_jsxs","root","_jsx","PopoverTrigger","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","AvatarGroupProvider","value","avatarGroup","content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;4BAXb;oCACoC;gCAGR;8BACG;AAMxB,MAAMA,oCAAoC,CAC/CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAqCF;IAErC,OAAA,WAAA,GACEG,IAAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACC,4BAAAA,EAAAA;gBAAeC,0BAAwB;0BACtC,WAAA,GAAAF,IAAAA,eAAA,EAACL,MAAMQ,OAAO,EAAA;8BACZ,WAAA,GAAAH,IAAAA,eAAA,EAACL,MAAMS,aAAa,EAAA,CAAA;;;0BAGxBJ,IAAAA,eAAA,EAACL,MAAMU,cAAc,EAAA;0BACnB,WAAA,GAAAL,IAAAA,eAAA,EAACM,uCAAAA,EAAAA;oBAAoBC,OAAOX,cAAcY,WAAW;8BACnD,WAAA,GAAAR,IAAAA,eAAA,EAACL,MAAMc,OAAO,EAAA,CAAA;;;;;AAKxB"}
@@ -0,0 +1,95 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAvatarGroupPopover_unstable", {
enumerable: true,
get: function() {
return useAvatarGroupPopover_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _AvatarGroupContext = require("../../contexts/AvatarGroupContext");
const _useAvatarGroup = require("../AvatarGroup/useAvatarGroup");
const _reactutilities = require("@fluentui/react-utilities");
const _reacticons = require("@fluentui/react-icons");
const _reactpopover = require("@fluentui/react-popover");
const _reacttooltip = require("@fluentui/react-tooltip");
const useAvatarGroupPopover_unstable = (props)=>{
var _useAvatarGroupContext_unstable;
const size = (_useAvatarGroupContext_unstable = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.size)) !== null && _useAvatarGroupContext_unstable !== void 0 ? _useAvatarGroupContext_unstable : _useAvatarGroup.defaultAvatarGroupSize;
const layout = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.layout);
const { indicator = size < 24 ? 'icon' : 'count', count = _react.Children.count(props.children), children, ...restOfProps } = props;
const [popoverOpen, setPopoverOpen] = (0, _reactutilities.useControllableState)({
state: props.open,
defaultState: props.defaultOpen,
initialState: false
});
const handleOnPopoverChange = (e, data)=>{
var _restOfProps_onOpenChange;
(_restOfProps_onOpenChange = restOfProps.onOpenChange) === null || _restOfProps_onOpenChange === void 0 ? void 0 : _restOfProps_onOpenChange.call(restOfProps, e, data);
setPopoverOpen(data.open);
};
let triggerButtonChildren;
if (layout === 'pie') {
triggerButtonChildren = null;
} else if (indicator === 'icon') {
triggerButtonChildren = /*#__PURE__*/ _react.createElement(_reacticons.MoreHorizontalRegular, null);
} else {
triggerButtonChildren = count > 99 ? '99+' : `+${count}`;
}
return {
count,
indicator,
layout,
popoverOpen,
size,
components: {
root: _reactpopover.Popover,
triggerButton: 'button',
content: 'ul',
popoverSurface: _reactpopover.PopoverSurface,
tooltip: _reacttooltip.Tooltip
},
root: _reactutilities.slot.always({
// Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.
children: /*#__PURE__*/ _react.createElement(_react.Fragment, null),
size: 'small',
trapFocus: true,
...restOfProps,
open: popoverOpen,
onOpenChange: handleOnPopoverChange
}, {
elementType: _reactpopover.Popover
}),
triggerButton: _reactutilities.slot.always(props.triggerButton, {
defaultProps: {
children: triggerButtonChildren,
type: 'button'
},
elementType: 'button'
}),
content: _reactutilities.slot.always(props.content, {
defaultProps: {
children,
role: 'list'
},
elementType: 'ul'
}),
popoverSurface: _reactutilities.slot.always(props.popoverSurface, {
defaultProps: {
'aria-label': 'Overflow',
tabIndex: 0
},
elementType: _reactpopover.PopoverSurface
}),
tooltip: _reactutilities.slot.always(props.tooltip, {
defaultProps: {
content: 'View more people.',
relationship: 'label'
},
elementType: _reacttooltip.Tooltip
})
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useAvatarGroupPopoverContextValues_unstable", {
enumerable: true,
get: function() {
return useAvatarGroupPopoverContextValues_unstable;
}
});
const useAvatarGroupPopoverContextValues_unstable = (state)=>{
const avatarGroup = {
isOverflow: true,
size: 24
};
return {
avatarGroup
};
};
@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGaA;;;eAAAA;;;AAAN,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB"}
@@ -0,0 +1,508 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
avatarGroupPopoverClassNames: function() {
return avatarGroupPopoverClassNames;
},
useAvatarGroupPopoverStyles_unstable: function() {
return useAvatarGroupPopoverStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useAvatarGroupItemStylesstyles = require("../AvatarGroupItem/useAvatarGroupItemStyles.styles");
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
const avatarGroupPopoverClassNames = {
root: 'fui-AvatarGroupPopover',
content: 'fui-AvatarGroupPopover__content',
popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',
tooltip: 'fui-AvatarGroupPopover__tooltip',
triggerButton: 'fui-AvatarGroupPopover__triggerButton'
};
/**
* Styles for the content slot.
*/ const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
dclx09: "ftrb29c",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1s184ao",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai",
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62"
}
}, {
d: [
".ftrb29c{list-style-type:none;}",
[
".f1s184ao{margin:0;}",
{
p: -1
}
],
[
".f1mk8lai{padding:0;}",
{
p: -1
}
],
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}"
]
});
/**
* Styles for the popoverSurface slot.
*/ const usePopoverSurfaceStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bxyxcbc: "fopcw2o",
sshi5w: "f1n5o1gx",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f19r5mr9",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1f5q0n8",
a9b677: "f13dwy2t"
}
}, {
d: [
".fopcw2o{max-height:220px;}",
".f1n5o1gx{min-height:80px;}",
[
".f19r5mr9{overflow:hidden scroll;}",
{
p: -1
}
],
[
".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
{
p: -1
}
],
".f13dwy2t{width:220px;}"
]
});
/**
* Styles for the triggerButton slot.
*/ const useTriggerButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "ftuwxu6",
qhf8xq: "f10pi13n",
Bnnss6s: "fi64zpg",
Brf1p80: "f4d9j23",
Bt984gj: "f122n59",
sj55zd: "f19n0e5",
De3pzq: "fxugw4r",
g2u3we: "fj3muxo",
h3c5rm: [
"f1akhkt",
"f1lxtadh"
],
B9xav0g: "f1aperda",
zhjwy3: [
"f1lxtadh",
"f1akhkt"
],
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
icvyot: "fzkkow9",
vrafjx: [
"fcdblym",
"fjik90z"
],
oivjwe: "fg706s2",
wvpqe5: [
"fjik90z",
"fcdblym"
],
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai",
Bjwas2f: "fw33nwi",
Bn1d65q: [
"f1ptkjjm",
"fmzzjfk"
],
Bxeuatn: "f15j0dln",
n51gp8: [
"fmzzjfk",
"f1ptkjjm"
]
},
pie: {
De3pzq: "f1c21dwh",
g2u3we: "fghlq4f",
h3c5rm: [
"f1gn591s",
"fjscplz"
],
B9xav0g: "fb073pr",
zhjwy3: [
"fjscplz",
"f1gn591s"
],
sj55zd: "f44pa96"
},
focusIndicator: {
Byu6kyc: 0,
n8qw10: 0,
Bbjhlyh: 0,
i2cumq: 0,
Bunx835: 0,
Bdrgwmp: 0,
mqozju: 0,
lbo84a: 0,
Bksnhdo: 0,
Bci5o5g: 0,
u5e7qz: 0,
Bn40d3w: 0,
B7b6zxw: 0,
B8q5s1w: 0,
B5gfjzb: 0,
Bbcte9g: 0,
Bqz3imu: "f1j9b7x8",
g9k6zt: "f1nev41a"
},
states: {
Bi91k9c: "feu1g3u",
Jwef8y: "f1knas48",
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "f1xlaoq0",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
lj723h: "f1g4hkjv",
ecr2s2: "fb40n2d",
B6oc9vd: "fvs00aa",
ak43y8: [
"f1assf6x",
"f4ruux4"
],
wmxk5l: "fumykes",
B50zh58: [
"f4ruux4",
"f1assf6x"
]
},
selected: {
sj55zd: "f14nttnl",
De3pzq: "f1nfm20t",
g2u3we: "f1ly1fcm",
h3c5rm: [
"fi8bssc",
"fj6btzu"
],
B9xav0g: "f1s9tnsa",
zhjwy3: [
"fj6btzu",
"fi8bssc"
]
},
icon12: {
Be2twd7: "f1ugzwwg"
},
icon16: {
Be2twd7: "f4ybsrx"
},
icon20: {
Be2twd7: "fe5j1ua"
},
icon24: {
Be2twd7: "f1rt2boy"
},
icon28: {
Be2twd7: "f24l1pt"
},
icon32: {
Be2twd7: "ffl51b"
},
icon48: {
Be2twd7: "f18m8u13"
},
caption2Strong: {
Bahqtrf: "fk6fouc",
Be2twd7: "f13mqy1h",
Bhrd7zp: "fl43uef",
Bg96gwp: "fcpl73t"
},
caption1Strong: {
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "fl43uef",
Bg96gwp: "fwrc4pm"
},
body1Strong: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "fl43uef",
Bg96gwp: "f1i3iumi"
},
subtitle2: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
subtitle1: {
Bahqtrf: "fk6fouc",
Be2twd7: "f1pp30po",
Bhrd7zp: "fl43uef",
Bg96gwp: "f106mvju"
},
title3: {
Bahqtrf: "fk6fouc",
Be2twd7: "f1x0m3f5",
Bhrd7zp: "fl43uef",
Bg96gwp: "fb86gi6"
},
borderThin: {
B4j52fo: "f192inf7",
Bekrc4i: [
"f5tn483",
"f1ojsxk5"
],
Bn0qgzm: "f1vxd6vx",
ibv6hh: [
"f1ojsxk5",
"f5tn483"
]
},
borderThick: {
B4j52fo: "f18zi460",
Bekrc4i: [
"f1wpluaz",
"fsfsuhs"
],
Bn0qgzm: "fmklw6v",
ibv6hh: [
"fsfsuhs",
"f1wpluaz"
]
},
borderThicker: {
B4j52fo: "fgx37oo",
Bekrc4i: [
"f130t4y6",
"f1efpmoh"
],
Bn0qgzm: "fv51ejd",
ibv6hh: [
"f1efpmoh",
"f130t4y6"
]
},
borderThickest: {
B4j52fo: "fwn6jck",
Bekrc4i: [
"figl7jc",
"f1g0iy8l"
],
Bn0qgzm: "f1b8shu7",
ibv6hh: [
"f1g0iy8l",
"figl7jc"
]
}
}, {
d: [
".ftuwxu6{display:inline-flex;}",
".f10pi13n{position:relative;}",
".fi64zpg{flex-shrink:0;}",
".f4d9j23{justify-content:center;}",
".f122n59{align-items:center;}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}",
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
".fzkkow9{border-top-style:solid;}",
".fcdblym{border-right-style:solid;}",
".fjik90z{border-left-style:solid;}",
".fg706s2{border-bottom-style:solid;}",
[
".f1mk8lai{padding:0;}",
{
p: -1
}
],
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
".fjscplz{border-left-color:var(--colorTransparentStroke);}",
".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
".f44pa96{color:transparent;}",
[
".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
{
p: -2
}
],
".f1nev41a[data-fui-focus-visible]{outline-style:none;}",
".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}",
".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}",
".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}",
".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}",
".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}",
".f1ugzwwg{font-size:12px;}",
".f4ybsrx{font-size:16px;}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}",
".f24l1pt{font-size:28px;}",
".ffl51b{font-size:32px;}",
".f18m8u13{font-size:48px;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".f13mqy1h{font-size:var(--fontSizeBase100);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".fcpl73t{line-height:var(--lineHeightBase100);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
".f1pp30po{font-size:var(--fontSizeBase500);}",
".f106mvju{line-height:var(--lineHeightBase500);}",
".f1x0m3f5{font-size:var(--fontSizeBase600);}",
".fb86gi6{line-height:var(--lineHeightBase600);}",
".f192inf7{border-top-width:var(--strokeWidthThin);}",
".f5tn483{border-right-width:var(--strokeWidthThin);}",
".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}",
".f18zi460{border-top-width:var(--strokeWidthThick);}",
".f1wpluaz{border-right-width:var(--strokeWidthThick);}",
".fsfsuhs{border-left-width:var(--strokeWidthThick);}",
".fmklw6v{border-bottom-width:var(--strokeWidthThick);}",
".fgx37oo{border-top-width:var(--strokeWidthThicker);}",
".f130t4y6{border-right-width:var(--strokeWidthThicker);}",
".f1efpmoh{border-left-width:var(--strokeWidthThicker);}",
".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}",
".fwn6jck{border-top-width:var(--strokeWidthThickest);}",
".figl7jc{border-right-width:var(--strokeWidthThickest);}",
".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}",
".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"
],
m: [
[
"@media (forced-colors: active){.fw33nwi{border-top-color:CanvasText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ptkjjm{border-right-color:CanvasText;}.fmzzjfk{border-left-color:CanvasText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f15j0dln{border-bottom-color:CanvasText;}}",
{
m: "(forced-colors: active)"
}
]
],
h: [
".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"
],
a: [
".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}",
".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"
]
});
const useAvatarGroupPopoverStyles_unstable = (state)=>{
'use no memo';
const { indicator, size, layout, popoverOpen } = state;
const sizeStyles = (0, _useAvatarStylesstyles.useSizeStyles)();
const triggerButtonStyles = useTriggerButtonStyles();
const contentStyles = useContentStyles();
const popoverSurfaceStyles = usePopoverSurfaceStyles();
const groupChildClassName = (0, _useAvatarGroupItemStylesstyles.useGroupChildClassName)(layout, size);
const triggerButtonClasses = [];
if (size < 36) {
triggerButtonClasses.push(triggerButtonStyles.borderThin);
} else if (size < 56) {
triggerButtonClasses.push(triggerButtonStyles.borderThick);
} else if (size < 72) {
triggerButtonClasses.push(triggerButtonStyles.borderThicker);
} else {
triggerButtonClasses.push(triggerButtonStyles.borderThickest);
}
if (indicator === 'count') {
if (size <= 24) {
triggerButtonClasses.push(triggerButtonStyles.caption2Strong);
} else if (size <= 28) {
triggerButtonClasses.push(triggerButtonStyles.caption1Strong);
} else if (size <= 40) {
triggerButtonClasses.push(triggerButtonStyles.body1Strong);
} else if (size <= 56) {
triggerButtonClasses.push(triggerButtonStyles.subtitle2);
} else if (size <= 96) {
triggerButtonClasses.push(triggerButtonStyles.subtitle1);
} else {
triggerButtonClasses.push(triggerButtonStyles.title3);
}
} else {
if (size <= 16) {
triggerButtonClasses.push(triggerButtonStyles.icon12);
} else if (size <= 24) {
triggerButtonClasses.push(triggerButtonStyles.icon16);
} else if (size <= 40) {
triggerButtonClasses.push(triggerButtonStyles.icon20);
} else if (size <= 48) {
triggerButtonClasses.push(triggerButtonStyles.icon24);
} else if (size <= 56) {
triggerButtonClasses.push(triggerButtonStyles.icon28);
} else if (size <= 72) {
triggerButtonClasses.push(triggerButtonStyles.icon32);
} else {
triggerButtonClasses.push(triggerButtonStyles.icon48);
}
}
state.triggerButton.className = (0, _react.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);
state.content.className = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
state.popoverSurface.className = (0, _react.mergeClasses)(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarContextProvider: function() {
return AvatarContextProvider;
},
useAvatarContext: function() {
return useAvatarContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const avatarContext = /*#__PURE__*/ _react.createContext(undefined);
const avatarContextDefaultValue = {};
const AvatarContextProvider = avatarContext.Provider;
const useAvatarContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(avatarContext)) !== null && _React_useContext !== void 0 ? _React_useContext : avatarContextDefaultValue;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/AvatarContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarShape, AvatarSize } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n shape?: AvatarShape;\n size?: AvatarSize;\n}\n\nconst avatarContextDefaultValue: AvatarContextValue = {};\n\n/**\n * @internal\n */\nexport const AvatarContextProvider = avatarContext.Provider;\n\n/**\n * @internal\n */\nexport const useAvatarContext = () => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"],"names":["AvatarContextProvider","useAvatarContext","avatarContext","React","createContext","undefined","avatarContextDefaultValue","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAkBaA,qBAAAA;eAAAA;;IAKAC,gBAAAA;eAAAA;;;;iEAvBU;AAGvB,MAAMC,8BAAgBC,OAAMC,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAKhD,MAAMN,wBAAwBE,cAAcK,QAAQ;AAKpD,MAAMN,mBAAmB;QAAME;WAAAA,CAAAA,oBAAAA,OAAMK,UAAU,CAACN,cAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAmCG;AAAwB"}
@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarGroupContext: function() {
return AvatarGroupContext;
},
AvatarGroupProvider: function() {
return AvatarGroupProvider;
},
useAvatarGroupContext_unstable: function() {
return useAvatarGroupContext_unstable;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const AvatarGroupContext = (0, _reactcontextselector.createContext)(undefined);
const avatarGroupContextDefaultValue = {};
const AvatarGroupProvider = AvatarGroupContext.Provider;
const useAvatarGroupContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue)=>selector(ctx));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["AvatarGroupContext","AvatarGroupProvider","useAvatarGroupContext_unstable","createContext","undefined","avatarGroupContextDefaultValue","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,kBAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAEAC,8BAAAA;eAAAA;;;sCAhBsD;AAQ5D,MAAMF,qBAAuDG,IAAAA,mCAAAA,EAClEC;AAGF,MAAMC,iCAA0D,CAAC;AAE1D,MAAMJ,sBAAsBD,mBAAmBM,QAAQ;AAEvD,MAAMJ,iCAAiC,CAAIK,WAChDC,IAAAA,wCAAAA,EAAmBR,oBAAoB,CAACS,MAAMJ,8BAA8B,GAAKE,SAASE"}
+29
View File
@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
AvatarContextProvider: function() {
return _AvatarContext.AvatarContextProvider;
},
AvatarGroupContext: function() {
return _AvatarGroupContext.AvatarGroupContext;
},
AvatarGroupProvider: function() {
return _AvatarGroupContext.AvatarGroupProvider;
},
useAvatarContext: function() {
return _AvatarContext.useAvatarContext;
},
useAvatarGroupContext_unstable: function() {
return _AvatarGroupContext.useAvatarGroupContext_unstable;
}
});
const _AvatarGroupContext = require("./AvatarGroupContext");
const _AvatarContext = require("./AvatarContext");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export { AvatarGroupContext, AvatarGroupProvider, useAvatarGroupContext_unstable } from './AvatarGroupContext';\nexport type { AvatarContextValue } from './AvatarContext';\nexport { AvatarContextProvider, useAvatarContext } from './AvatarContext';\n"],"names":["AvatarContextProvider","AvatarGroupContext","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAESA,qBAAqB;eAArBA,oCAAqB;;IAFrBC,kBAAkB;eAAlBA,sCAAkB;;IAAEC,mBAAmB;eAAnBA,uCAAmB;;IAEhBC,gBAAgB;eAAhBA,+BAAgB;;IAFEC,8BAA8B;eAA9BA,kDAA8B;;;oCAAQ;+BAEhC"}
+102
View File
@@ -0,0 +1,102 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Avatar: function() {
return _Avatar.Avatar;
},
AvatarContextProvider: function() {
return _index1.AvatarContextProvider;
},
AvatarGroup: function() {
return _AvatarGroup.AvatarGroup;
},
AvatarGroupItem: function() {
return _AvatarGroupItem.AvatarGroupItem;
},
AvatarGroupPopover: function() {
return _AvatarGroupPopover.AvatarGroupPopover;
},
AvatarGroupProvider: function() {
return _index1.AvatarGroupProvider;
},
avatarClassNames: function() {
return _Avatar.avatarClassNames;
},
avatarGroupClassNames: function() {
return _AvatarGroup.avatarGroupClassNames;
},
avatarGroupItemClassNames: function() {
return _AvatarGroupItem.avatarGroupItemClassNames;
},
avatarGroupPopoverClassNames: function() {
return _AvatarGroupPopover.avatarGroupPopoverClassNames;
},
getInitials: function() {
return _index.getInitials;
},
partitionAvatarGroupItems: function() {
return _index.partitionAvatarGroupItems;
},
renderAvatarGroupItem_unstable: function() {
return _AvatarGroupItem.renderAvatarGroupItem_unstable;
},
renderAvatarGroupPopover_unstable: function() {
return _AvatarGroupPopover.renderAvatarGroupPopover_unstable;
},
renderAvatarGroup_unstable: function() {
return _AvatarGroup.renderAvatarGroup_unstable;
},
renderAvatar_unstable: function() {
return _Avatar.renderAvatar_unstable;
},
useAvatarContext: function() {
return _index1.useAvatarContext;
},
useAvatarGroupContextValues: function() {
return _AvatarGroup.useAvatarGroupContextValues;
},
useAvatarGroupContext_unstable: function() {
return _index1.useAvatarGroupContext_unstable;
},
useAvatarGroupItemStyles_unstable: function() {
return _AvatarGroupItem.useAvatarGroupItemStyles_unstable;
},
useAvatarGroupItem_unstable: function() {
return _AvatarGroupItem.useAvatarGroupItem_unstable;
},
useAvatarGroupPopoverContextValues_unstable: function() {
return _AvatarGroupPopover.useAvatarGroupPopoverContextValues_unstable;
},
useAvatarGroupPopoverStyles_unstable: function() {
return _AvatarGroupPopover.useAvatarGroupPopoverStyles_unstable;
},
useAvatarGroupPopover_unstable: function() {
return _AvatarGroupPopover.useAvatarGroupPopover_unstable;
},
useAvatarGroupStyles_unstable: function() {
return _AvatarGroup.useAvatarGroupStyles_unstable;
},
useAvatarGroup_unstable: function() {
return _AvatarGroup.useAvatarGroup_unstable;
},
useAvatarStyles_unstable: function() {
return _Avatar.useAvatarStyles_unstable;
},
useAvatar_unstable: function() {
return _Avatar.useAvatar_unstable;
}
});
const _Avatar = require("./Avatar");
const _index = require("./utils/index");
const _AvatarGroup = require("./AvatarGroup");
const _AvatarGroupItem = require("./AvatarGroupItem");
const _AvatarGroupPopover = require("./AvatarGroupPopover");
const _index1 = require("./contexts/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Avatar,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n} from './Avatar';\nexport type {\n AvatarNamedColor,\n AvatarProps,\n AvatarSlots,\n AvatarState,\n AvatarShape,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSize,\n} 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 useAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_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"],"names":["Avatar","AvatarContextProvider","AvatarGroup","AvatarGroupItem","AvatarGroupPopover","AvatarGroupProvider","avatarClassNames","avatarGroupClassNames","avatarGroupItemClassNames","avatarGroupPopoverClassNames","getInitials","partitionAvatarGroupItems","renderAvatarGroupItem_unstable","renderAvatarGroupPopover_unstable","renderAvatarGroup_unstable","renderAvatar_unstable","useAvatarContext","useAvatarGroupContextValues","useAvatarGroupContext_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarStyles_unstable","useAvatar_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,MAAM;eAANA,cAAM;;IAmDNC,qBAAqB;eAArBA,6BAAqB;;IAhCrBC,WAAW;eAAXA,wBAAW;;IAeXC,eAAe;eAAfA,gCAAe;;IAQfC,kBAAkB;eAAlBA,sCAAkB;;IAUlBC,mBAAmB;eAAnBA,2BAAmB;;IAnDnBC,gBAAgB;eAAhBA,wBAAgB;;IAmBhBC,qBAAqB;eAArBA,kCAAqB;;IAerBC,yBAAyB;eAAzBA,0CAAyB;;IAQzBC,4BAA4B;eAA5BA,gDAA4B;;IA3BrBC,WAAW;eAAXA,kBAAW;;IAAEC,yBAAyB;eAAzBA,gCAAyB;;IAoB7CC,8BAA8B;eAA9BA,+CAA8B;;IAQ9BC,iCAAiC;eAAjCA,qDAAiC;;IAvBjCC,0BAA0B;eAA1BA,uCAA0B;;IAnB1BC,qBAAqB;eAArBA,6BAAqB;;IAmDrBC,gBAAgB;eAAhBA,wBAAgB;;IA/BhBC,2BAA2B;eAA3BA,wCAA2B;;IAgC3BC,8BAA8B;eAA9BA,sCAA8B;;IAjB9BC,iCAAiC;eAAjCA,kDAAiC;;IACjCC,2BAA2B;eAA3BA,4CAA2B;;IAQ3BC,2CAA2C;eAA3CA,+DAA2C;;IAC3CC,oCAAoC;eAApCA,wDAAoC;;IAFpCC,8BAA8B;eAA9BA,kDAA8B;;IAtB9BC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;IArBvBC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;;wBACb;uBAWgD;6BAShD;iCAcA;oCASA;wBAOA"}
+69
View File
@@ -0,0 +1,69 @@
/**
* Regular expressions matching characters to ignore when calculating the initials.
*/ /**
* Regular expression matching characters within various types of enclosures, including the enclosures themselves
* so for example, (xyz) [xyz] {xyz} all would be ignored
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getInitials", {
enumerable: true,
get: function() {
return getInitials;
}
});
const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
/**
* Regular expression matching special ASCII characters except space, plus some unicode special characters.
* Applies after unwanted enclosures have been removed
*/ const 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
*/ const PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
/** Regular expression matching one or more spaces. */ const 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
*/ const 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) {
let initials = '';
const 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;
}
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);
}
File diff suppressed because one or more lines are too long
+20
View File
@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getInitials: function() {
return _getInitials.getInitials;
},
partitionAvatarGroupItems: function() {
return _partitionAvatarGroupItems.partitionAvatarGroupItems;
}
});
const _getInitials = require("./getInitials");
const _partitionAvatarGroupItems = require("./partitionAvatarGroupItems");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { getInitials } from './getInitials';\nexport { partitionAvatarGroupItems } from './partitionAvatarGroupItems';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './partitionAvatarGroupItems';\n"],"names":["getInitials","partitionAvatarGroupItems"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IACXC,yBAAyB;eAAzBA,oDAAyB;;;6BADN;2CACc"}
@@ -0,0 +1,34 @@
/**
* 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.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "partitionAvatarGroupItems", {
enumerable: true,
get: function() {
return partitionAvatarGroupItems;
}
});
const partitionAvatarGroupItems = (options)=>{
const { items } = options;
const isPie = options.layout === 'pie';
if (isPie) {
return {
inlineItems: items.slice(0, 3),
overflowItems: items.length > 0 ? items : undefined
};
}
var _options_maxInlineItems;
const maxInlineItems = (_options_maxInlineItems = options.maxInlineItems) !== null && _options_maxInlineItems !== void 0 ? _options_maxInlineItems : 5;
const inlineCount = -(maxInlineItems - (items.length > maxInlineItems ? 1 : 0));
const overflowItems = items.slice(0, inlineCount);
return {
inlineItems: items.slice(inlineCount),
overflowItems: overflowItems.length > 0 ? overflowItems : undefined
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/partitionAvatarGroupItems.ts"],"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"],"names":["partitionAvatarGroupItems","options","items","isPie","layout","inlineItems","slice","overflowItems","length","undefined","maxInlineItems","inlineCount"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAWA;;;;;;CAMC;;;;+BACYA;;;eAAAA;;;AAAN,MAAMA,4BAA4B,CACvCC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,MAAME,QAAQF,QAAQG,MAAM,KAAK;IAEjC,IAAID,OAAO;QACT,OAAO;YACLE,aAAaH,MAAMI,KAAK,CAAC,GAAG;YAC5BC,eAAeL,MAAMM,MAAM,GAAG,IAAIN,QAAQO;QAC5C;IACF;QAEuBR;IAAvB,MAAMS,iBAAiBT,CAAAA,0BAAAA,QAAQS,cAAc,AAAdA,MAAc,QAAtBT,4BAAAA,KAAAA,IAAAA,0BAA0B;IACjD,MAAMU,cAAc,CAAED,CAAAA,iBAAkBR,CAAAA,MAAMM,MAAM,GAAGE,iBAAiB,IAAI,CAAA,CAAA;IAC5E,MAAMH,gBAAgBL,MAAMI,KAAK,CAAC,GAAGK;IAErC,OAAO;QACLN,aAAaH,MAAMI,KAAK,CAACK;QACzBJ,eAAeA,cAAcC,MAAM,GAAG,IAAID,gBAAgBE;IAC5D;AACF"}
+1
View File
@@ -0,0 +1 @@
export { Avatar, DEFAULT_STRINGS, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, useSizeStyles } from './components/Avatar/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n AvatarNamedColor,\n AvatarProps,\n AvatarShape,\n AvatarSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSlots,\n AvatarState,\n} from './components/Avatar/index';\nexport {\n Avatar,\n DEFAULT_STRINGS,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useSizeStyles"],"rangeMappings":"","mappings":"AAUA,SACEA,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,aAAa,QACR,4BAA4B"}
+1
View File
@@ -0,0 +1 @@
export { AvatarGroup, avatarGroupClassNames, defaultAvatarGroupSize, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable } from './components/AvatarGroup/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroup.ts"],"sourcesContent":["export type {\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n} from './components/AvatarGroup/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n defaultAvatarGroupSize,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './components/AvatarGroup/index';\n"],"names":["AvatarGroup","avatarGroupClassNames","defaultAvatarGroupSize","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable"],"rangeMappings":"","mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,sBAAsB,EACtBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+1
View File
@@ -0,0 +1 @@
export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable, useGroupChildClassName } from './components/AvatarGroupItem/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupItem.ts"],"sourcesContent":["export type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n} from './components/AvatarGroupItem/index';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useGroupChildClassName,\n} from './components/AvatarGroupItem/index';\n"],"names":["AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useGroupChildClassName"],"rangeMappings":"","mappings":"AAKA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,EAC3BC,sBAAsB,QACjB,qCAAqC"}
+1
View File
@@ -0,0 +1 @@
export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopoverContextValues_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopover_unstable } from './components/AvatarGroupPopover/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupPopover.ts"],"sourcesContent":["export type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './components/AvatarGroupPopover/index';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopover_unstable,\n} from './components/AvatarGroupPopover/index';\n"],"names":["AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable"],"rangeMappings":"","mappings":"AAKA,SACEA,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,2CAA2C,EAC3CC,oCAAoC,EACpCC,8BAA8B,QACzB,wCAAwC"}
+12
View File
@@ -0,0 +1,12 @@
import * as React from 'react';
import { renderAvatar_unstable } from './renderAvatar';
import { useAvatar_unstable } from './useAvatar';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useAvatarStyles_unstable } from './useAvatarStyles.styles';
export const Avatar = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useAvatar_unstable(props, ref);
useAvatarStyles_unstable(state);
useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);
return renderAvatar_unstable(state);
});
Avatar.displayName = 'Avatar';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarStyles_unstable } from './useAvatarStyles.styles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n const state = useAvatar_unstable(props, ref);\n\n useAvatarStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);\n\n return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"names":["React","renderAvatar_unstable","useAvatar_unstable","useCustomStyleHook_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,wBAAwB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCJ,yBAAyBK;IAEzBN,4BAA4B,4BAA4BM;IAExD,OAAOR,sBAAsBQ;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
@@ -0,0 +1,3 @@
/**
* State used in rendering Avatar
*/ export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, 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\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?: JSX.Element;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA6JA;;CAEC,GACD,WAWI"}
+4
View File
@@ -0,0 +1,4 @@
export { Avatar } from './Avatar';
export { renderAvatar_unstable } from './renderAvatar';
export { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';
export { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n AvatarNamedColor,\n AvatarProps,\n AvatarShape,\n AvatarSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSlots,\n AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"rangeMappings":";;;","mappings":"AAUA,SAASA,MAAM,QAAQ,WAAW;AAClC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,cAAc;AAClE,SAASC,gBAAgB,EAAEC,wBAAwB,EAAEC,aAAa,QAAQ,2BAA2B"}
@@ -0,0 +1,14 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
export const renderAvatar_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.initials && /*#__PURE__*/ _jsx(state.initials, {}),
state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
state.image && /*#__PURE__*/ _jsx(state.image, {}),
state.badge && /*#__PURE__*/ _jsx(state.badge, {}),
state.activeAriaLabelElement
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n assertSlots<AvatarSlots>(state);\n\n return (\n <state.root>\n {state.initials && <state.initials />}\n {state.icon && <state.icon />}\n {state.image && <state.image />}\n {state.badge && <state.badge />}\n {state.activeAriaLabelElement}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAvatar_unstable","state","root","initials","icon","image","badge","activeAriaLabelElement"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC3BJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;YAC3BL,MAAMM,sBAAsB;;;AAGnC,EAAE"}
+185
View File
@@ -0,0 +1,185 @@
import * as React from 'react';
import { getIntrinsicElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
import { getInitials } from '../../utils/index';
import { PersonRegular } from '@fluentui/react-icons';
import { PresenceBadge } from '@fluentui/react-badge';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useAvatarContext } from '../../contexts/AvatarContext';
export const DEFAULT_STRINGS = {
active: 'active',
inactive: 'inactive'
};
export const useAvatar_unstable = (props, ref)=>{
const { dir } = useFluent();
const { shape: contextShape, size: contextSize } = useAvatarContext();
const { name, size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;
let { color = 'neutral' } = props;
// Resolve 'colorful' to a specific color name
if (color === 'colorful') {
var _ref;
color = avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length];
}
const baseId = useId('avatar-');
const root = slot.always(getIntrinsicElementProps('span', {
role: 'img',
id: baseId,
// aria-label and/or aria-labelledby are resolved below
...props,
ref
}, /* excludedPropNames: */ [
'name'
]), {
elementType: 'span'
});
const [imageHidden, setImageHidden] = React.useState(undefined);
let image = slot.optional(props.image, {
defaultProps: {
alt: '',
role: 'presentation',
'aria-hidden': true,
hidden: imageHidden
},
elementType: 'img'
}); // Image shouldn't be rendered if its src is not set
if (!(image === null || image === void 0 ? void 0 : image.src)) {
image = undefined;
} // Hide the image if it fails to load and restore it on a successful load
if (image) {
image.onError = mergeCallbacks(image.onError, ()=>setImageHidden(true));
image.onLoad = mergeCallbacks(image.onLoad, ()=>setImageHidden(undefined));
} // Resolve the initials slot, defaulted to getInitials.
let initials = slot.optional(props.initials, {
renderByDefault: true,
defaultProps: {
children: getInitials(name, dir === 'rtl', {
firstInitialOnly: size <= 16
}),
id: baseId + '__initials'
},
elementType: 'span'
}); // Don't render the initials slot if it's empty
if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
initials = undefined;
} // Render the icon slot *only if* there aren't any initials or image to display
let icon = undefined;
if (!initials && (!image || imageHidden)) {
icon = slot.optional(props.icon, {
renderByDefault: true,
defaultProps: {
children: /*#__PURE__*/ React.createElement(PersonRegular, null),
'aria-hidden': true
},
elementType: 'span'
});
}
const badge = slot.optional(props.badge, {
defaultProps: {
size: getBadgeSize(size),
id: baseId + '__badge'
},
elementType: PresenceBadge
});
let activeAriaLabelElement; // Resolve aria-label and/or aria-labelledby if not provided by the user
if (!root['aria-label'] && !root['aria-labelledby']) {
if (name) {
root['aria-label'] = name; // Include the badge in labelledby if it exists
if (badge) {
root['aria-labelledby'] = root.id + ' ' + badge.id;
}
} else if (initials) {
// root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
} // Add the active state to the aria label
if (active === 'active' || active === 'inactive') {
const activeText = DEFAULT_STRINGS[active];
if (root['aria-labelledby']) {
// If using aria-labelledby, render a hidden span and append it to the labelledby
const activeId = baseId + '__active';
root['aria-labelledby'] += ' ' + activeId;
activeAriaLabelElement = /*#__PURE__*/ React.createElement("span", {
hidden: true,
id: activeId
}, activeText);
} else if (root['aria-label']) {
// Otherwise, just append it to the aria-label
root['aria-label'] += ' ' + activeText;
}
}
}
return {
size,
shape,
active,
activeAppearance,
activeAriaLabelElement,
color,
components: {
root: 'span',
initials: 'span',
icon: 'span',
image: 'img',
badge: PresenceBadge
},
root,
initials,
icon,
image,
badge
};
};
const getBadgeSize = (size)=>{
if (size >= 96) {
return 'extra-large';
} else if (size >= 64) {
return 'large';
} else if (size >= 56) {
return 'medium';
} else if (size >= 40) {
return 'small';
} else if (size >= 28) {
return 'extra-small';
} else {
return 'tiny';
}
};
const avatarColors = [
'dark-red',
'cranberry',
'red',
'pumpkin',
'peach',
'marigold',
'gold',
'brass',
'brown',
'forest',
'seafoam',
'dark-green',
'light-teal',
'teal',
'steel',
'blue',
'royal-blue',
'cornflower',
'navy',
'lavender',
'purple',
'grape',
'lilac',
'pink',
'magenta',
'plum',
'beige',
'mink',
'platinum',
'anchor'
];
const getHashCode = (str)=>{
let hashCode = 0;
for(let len = str.length - 1; len >= 0; len--){
const ch = str.charCodeAt(len);
const shift = len % 8;
hashCode ^= (ch << shift) + (ch >> 8 - shift); // eslint-disable-line no-bitwise
}
return hashCode;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,603 @@
import { tokens } from '@fluentui/react-theme';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
export const avatarClassNames = {
root: 'fui-Avatar',
image: 'fui-Avatar__image',
initials: 'fui-Avatar__initials',
icon: 'fui-Avatar__icon',
badge: 'fui-Avatar__badge'
};
// CSS variables used internally in Avatar's styles
const vars = {
badgeRadius: '--fui-Avatar-badgeRadius',
badgeGap: '--fui-Avatar-badgeGap',
badgeAlign: '--fui-Avatar-badgeAlign',
ringWidth: '--fui-Avatar-ringWidth'
};
const useRootClassName = /*#__PURE__*/__resetStyles("r81b29z", "r1aatmv", {
r: [".r81b29z{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r81b29z::before,.r81b29z::after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r81b29z::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}", ".r1aatmv{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r1aatmv::before,.r1aatmv::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r1aatmv::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}"],
s: ["@media screen and (prefers-reduced-motion: reduce){.r81b29z::before,.r81b29z::after{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1aatmv::before,.r1aatmv::after{transition-duration:0.01ms;}}"]
});
const useImageClassName = /*#__PURE__*/__resetStyles("r136dc0n", "rjly0nl", [".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}", ".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"]);
const useIconInitialsClassName = /*#__PURE__*/__resetStyles("rip04v", "r31uzil", [".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}", ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}"]);
/**
* Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.
* This creates a transparent gap between the badge and Avatar.
*
* Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.
*/
const badgeMask = margin => {
// Center the cutout at the badge's radius away from the edge.
// The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.
const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;
// radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px
// to "fade" from transparent to opaque over a half-pixel and ease the transition.
const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;
const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;
return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;
};
const useStyles = /*#__PURE__*/__styles({
textCaption2Strong: {
Be2twd7: "f13mqy1h"
},
textCaption1Strong: {
Be2twd7: "fy9rknc"
},
textSubtitle2: {
Be2twd7: "fod5ikn"
},
textSubtitle1: {
Be2twd7: "f1pp30po"
},
textTitle3: {
Be2twd7: "f1x0m3f5"
},
squareSmall: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fq9zq91"
},
squareMedium: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
squareLarge: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1o0qvyv"
},
squareXLarge: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1kijzfu"
},
activeOrInactive: {
Bz10aip: "ftfx35i",
Bmy1vo4: "fv0atk9",
B3o57yi: "f1iry5bo",
Bkqvd7p: "f15n41j8",
Hwfdqs: "f1onx1g3"
},
ring: {
Ftih45: "f1wl9k8s"
},
ringBadgeCutout: {
f4a502: "fp2gujx"
},
ringThick: {
of393c: "fq1w1vq"
},
ringThicker: {
of393c: "fzg6ace"
},
ringThickest: {
of393c: "f1nu8p71"
},
shadow: {
Bsft5z2: "f13zj6fq"
},
shadow4: {
Be6vj1x: "fcjn15l"
},
shadow8: {
Be6vj1x: "f1tm8t9f"
},
shadow16: {
Be6vj1x: "f1a1aohj"
},
shadow28: {
Be6vj1x: "fond6v5"
},
inactive: {
abs64n: "fp25eh",
Bz10aip: "f1clczzi",
Bkqvd7p: "f1l3s34x",
Bfgortx: 0,
Bnvr3x9: 0,
b2tv09: 0,
Bucmhp4: 0,
iayac2: "flkahu5",
b6ubon: "fw457kn",
Bqinb2h: "f1wmllxl"
},
badge: {
qhf8xq: "f1euv43f",
B5kzvoi: "f1yab3r1",
j35jbq: ["f1e31b4d", "f1vgc2s3"]
},
badgeCutout: {
btxmck: "f1eugkqs"
},
badgeAlign: {
Dnlfbu: ["f1tlnv9o", "f1y9kyih"]
},
tiny: {
Bdjeniz: "f1uwoubl",
niu6jh: "fid048z"
},
"extra-small": {
Bdjeniz: "f13ar0e0",
niu6jh: "fid048z"
},
small: {
Bdjeniz: "fwwuruf",
niu6jh: "fid048z"
},
medium: {
Bdjeniz: "f1af27q5",
niu6jh: "fid048z"
},
large: {
Bdjeniz: "f18yy57a",
niu6jh: "f924bxt"
},
"extra-large": {
Bdjeniz: "f2jg042",
niu6jh: "f924bxt"
},
icon12: {
Be2twd7: "f1ugzwwg"
},
icon16: {
Be2twd7: "f4ybsrx"
},
icon20: {
Be2twd7: "fe5j1ua"
},
icon24: {
Be2twd7: "f1rt2boy"
},
icon28: {
Be2twd7: "f24l1pt"
},
icon32: {
Be2twd7: "ffl51b"
},
icon48: {
Be2twd7: "f18m8u13"
}
}, {
d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
p: -1
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], [".f1o0qvyv{border-radius:var(--borderRadiusLarge);}", {
p: -1
}], [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
p: -1
}], ".ftfx35i{transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".fp2gujx::before{-webkit-mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".fq1w1vq{--fui-Avatar-ringWidth:var(--strokeWidthThick);}", ".fzg6ace{--fui-Avatar-ringWidth:var(--strokeWidthThicker);}", ".f1nu8p71{--fui-Avatar-ringWidth:var(--strokeWidthThickest);}", ".f13zj6fq::after{content:\"\";}", ".fcjn15l::after{box-shadow:var(--shadow4);}", ".f1tm8t9f::after{box-shadow:var(--shadow8);}", ".f1a1aohj::after{box-shadow:var(--shadow16);}", ".fond6v5::after{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{transform:scale(0.875);}", ".f1l3s34x{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", [".flkahu5::before,.flkahu5::after{margin:0;}", {
p: -1
}], ".fw457kn::before,.fw457kn::after{opacity:0;}", ".f1wmllxl::before,.f1wmllxl::after{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1eugkqs{-webkit-mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".f1tlnv9o{--fui-Avatar-badgeAlign:right;}", ".f1y9kyih{--fui-Avatar-badgeAlign:left;}", ".f1uwoubl{--fui-Avatar-badgeRadius:3px;}", ".fid048z{--fui-Avatar-badgeGap:var(--strokeWidthThin);}", ".f13ar0e0{--fui-Avatar-badgeRadius:5px;}", ".fwwuruf{--fui-Avatar-badgeRadius:6px;}", ".f1af27q5{--fui-Avatar-badgeRadius:8px;}", ".f18yy57a{--fui-Avatar-badgeRadius:10px;}", ".f924bxt{--fui-Avatar-badgeGap:var(--strokeWidthThick);}", ".f2jg042{--fui-Avatar-badgeRadius:14px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}]]
});
export const useSizeStyles = /*#__PURE__*/__styles({
"16": {
a9b677: "fjw5fx7",
Bqenvij: "fd461yt"
},
"20": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
"24": {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
"28": {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
"32": {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
},
"36": {
a9b677: "fpdz1er",
Bqenvij: "f8ljn23"
},
"40": {
a9b677: "feqmc2u",
Bqenvij: "fbhnoac"
},
"48": {
a9b677: "f124akge",
Bqenvij: "ff2sm71"
},
"56": {
a9b677: "f1u66zr1",
Bqenvij: "fzki0ko"
},
"64": {
a9b677: "fa9ln6p",
Bqenvij: "f16k9i2m"
},
"72": {
a9b677: "fhcae8x",
Bqenvij: "f1shusfg"
},
"96": {
a9b677: "f1kyr2gn",
Bqenvij: "fypu0ge"
},
"120": {
a9b677: "fwfqyga",
Bqenvij: "fjr5b71"
},
"128": {
a9b677: "f1iksgmy",
Bqenvij: "fele2au"
}
}, {
d: [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fpdz1er{width:36px;}", ".f8ljn23{height:36px;}", ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", ".f124akge{width:48px;}", ".ff2sm71{height:48px;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
});
const useColorStyles = /*#__PURE__*/__styles({
neutral: {
sj55zd: "f11d4kpn",
De3pzq: "f18f03hv"
},
brand: {
sj55zd: "fonrgv7",
De3pzq: "f1blnnmj"
},
"dark-red": {
sj55zd: "fqjd1y1",
De3pzq: "f1vq2oo4"
},
cranberry: {
sj55zd: "fg9gses",
De3pzq: "f1lwxszt"
},
red: {
sj55zd: "f23f7i0",
De3pzq: "f1q9qhfq"
},
pumpkin: {
sj55zd: "fjnan08",
De3pzq: "fz91bi3"
},
peach: {
sj55zd: "fknu15p",
De3pzq: "f1b9nr51"
},
marigold: {
sj55zd: "f9603vw",
De3pzq: "f3z4w6d"
},
gold: {
sj55zd: "fmq0uwp",
De3pzq: "fg50kya"
},
brass: {
sj55zd: "f28g5vo",
De3pzq: "f4w2gd0"
},
brown: {
sj55zd: "ftl572b",
De3pzq: "f14wu1f4"
},
forest: {
sj55zd: "f1gymlvd",
De3pzq: "f19ut4y6"
},
seafoam: {
sj55zd: "fnnb6wn",
De3pzq: "f1n057jc"
},
"dark-green": {
sj55zd: "ff58qw8",
De3pzq: "f11t05wk"
},
"light-teal": {
sj55zd: "f1up9qbj",
De3pzq: "f42feg1"
},
teal: {
sj55zd: "f135dsb4",
De3pzq: "f6hvv1p"
},
steel: {
sj55zd: "f151dlcp",
De3pzq: "f1lnp8zf"
},
blue: {
sj55zd: "f1rjv50u",
De3pzq: "f1ggcpy6"
},
"royal-blue": {
sj55zd: "f1emykk5",
De3pzq: "f12rj61f"
},
cornflower: {
sj55zd: "fqsigj7",
De3pzq: "f8k7hur"
},
navy: {
sj55zd: "f1nj97xi",
De3pzq: "f19gw0ux"
},
lavender: {
sj55zd: "fwctg0i",
De3pzq: "ff379vm"
},
purple: {
sj55zd: "fjrsgpu",
De3pzq: "f1mzf1e1"
},
grape: {
sj55zd: "f1fiiydq",
De3pzq: "f1o4k8oy"
},
lilac: {
sj55zd: "f1res9jt",
De3pzq: "f1x6mz1o"
},
pink: {
sj55zd: "fv3fbbi",
De3pzq: "fydlv6t"
},
magenta: {
sj55zd: "f1f1fwnz",
De3pzq: "f4xb6j5"
},
plum: {
sj55zd: "f8ptl6j",
De3pzq: "fqo8e26"
},
beige: {
sj55zd: "f1ntv3ld",
De3pzq: "f101elhj"
},
mink: {
sj55zd: "f1fscmp",
De3pzq: "f13g8o5c"
},
platinum: {
sj55zd: "f1dr00v2",
De3pzq: "fkh7blw"
},
anchor: {
sj55zd: "f1f3ti53",
De3pzq: "fu4yj0j"
}
}, {
d: [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}", ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}", ".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}", ".f23f7i0{color:var(--colorPaletteRedForeground2);}", ".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}", ".fjnan08{color:var(--colorPalettePumpkinForeground2);}", ".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}", ".fknu15p{color:var(--colorPalettePeachForeground2);}", ".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}", ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}", ".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}", ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}", ".fg50kya{background-color:var(--colorPaletteGoldBackground2);}", ".f28g5vo{color:var(--colorPaletteBrassForeground2);}", ".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}", ".ftl572b{color:var(--colorPaletteBrownForeground2);}", ".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}", ".f1gymlvd{color:var(--colorPaletteForestForeground2);}", ".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}", ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}", ".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}", ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}", ".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}", ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}", ".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}", ".f135dsb4{color:var(--colorPaletteTealForeground2);}", ".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}", ".f151dlcp{color:var(--colorPaletteSteelForeground2);}", ".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}", ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}", ".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}", ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}", ".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}", ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}", ".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}", ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}", ".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}", ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}", ".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}", ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}", ".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}", ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}", ".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}", ".f1res9jt{color:var(--colorPaletteLilacForeground2);}", ".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}", ".fv3fbbi{color:var(--colorPalettePinkForeground2);}", ".fydlv6t{background-color:var(--colorPalettePinkBackground2);}", ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}", ".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}", ".f8ptl6j{color:var(--colorPalettePlumForeground2);}", ".fqo8e26{background-color:var(--colorPalettePlumBackground2);}", ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}", ".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}", ".f1fscmp{color:var(--colorPaletteMinkForeground2);}", ".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}", ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}", ".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}", ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}", ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"]
});
const useRingColorStyles = /*#__PURE__*/__styles({
neutral: {
Bic5iru: "f1uuiafn"
},
brand: {
Bic5iru: "f1uuiafn"
},
"dark-red": {
Bic5iru: "f1t2x9on"
},
cranberry: {
Bic5iru: "f1pvshc9"
},
red: {
Bic5iru: "f1ectbk9"
},
pumpkin: {
Bic5iru: "fvzpl0b"
},
peach: {
Bic5iru: "fwj2kd7"
},
marigold: {
Bic5iru: "fr120vy"
},
gold: {
Bic5iru: "f8xmmar"
},
brass: {
Bic5iru: "f1hbety2"
},
brown: {
Bic5iru: "f1vg3s4g"
},
forest: {
Bic5iru: "f1m3olm5"
},
seafoam: {
Bic5iru: "f17xiqtr"
},
"dark-green": {
Bic5iru: "fx32vyh"
},
"light-teal": {
Bic5iru: "f1mkihwv"
},
teal: {
Bic5iru: "fecnooh"
},
steel: {
Bic5iru: "f15hfgzm"
},
blue: {
Bic5iru: "fqproka"
},
"royal-blue": {
Bic5iru: "f17v2w59"
},
cornflower: {
Bic5iru: "fp0q1mo"
},
navy: {
Bic5iru: "f1nlym55"
},
lavender: {
Bic5iru: "f62vk8h"
},
purple: {
Bic5iru: "f15zl69q"
},
grape: {
Bic5iru: "f53w4j7"
},
lilac: {
Bic5iru: "fu2771t"
},
pink: {
Bic5iru: "fzflscs"
},
magenta: {
Bic5iru: "fb6rmqc"
},
plum: {
Bic5iru: "f1a4gm5b"
},
beige: {
Bic5iru: "f1qpf9z1"
},
mink: {
Bic5iru: "f1l7or83"
},
platinum: {
Bic5iru: "fzrj0iu"
},
anchor: {
Bic5iru: "f8oz6wf"
}
}, {
d: [".f1uuiafn::before{color:var(--colorBrandStroke1);}", ".f1t2x9on::before{color:var(--colorPaletteDarkRedBorderActive);}", ".f1pvshc9::before{color:var(--colorPaletteCranberryBorderActive);}", ".f1ectbk9::before{color:var(--colorPaletteRedBorderActive);}", ".fvzpl0b::before{color:var(--colorPalettePumpkinBorderActive);}", ".fwj2kd7::before{color:var(--colorPalettePeachBorderActive);}", ".fr120vy::before{color:var(--colorPaletteMarigoldBorderActive);}", ".f8xmmar::before{color:var(--colorPaletteGoldBorderActive);}", ".f1hbety2::before{color:var(--colorPaletteBrassBorderActive);}", ".f1vg3s4g::before{color:var(--colorPaletteBrownBorderActive);}", ".f1m3olm5::before{color:var(--colorPaletteForestBorderActive);}", ".f17xiqtr::before{color:var(--colorPaletteSeafoamBorderActive);}", ".fx32vyh::before{color:var(--colorPaletteDarkGreenBorderActive);}", ".f1mkihwv::before{color:var(--colorPaletteLightTealBorderActive);}", ".fecnooh::before{color:var(--colorPaletteTealBorderActive);}", ".f15hfgzm::before{color:var(--colorPaletteSteelBorderActive);}", ".fqproka::before{color:var(--colorPaletteBlueBorderActive);}", ".f17v2w59::before{color:var(--colorPaletteRoyalBlueBorderActive);}", ".fp0q1mo::before{color:var(--colorPaletteCornflowerBorderActive);}", ".f1nlym55::before{color:var(--colorPaletteNavyBorderActive);}", ".f62vk8h::before{color:var(--colorPaletteLavenderBorderActive);}", ".f15zl69q::before{color:var(--colorPalettePurpleBorderActive);}", ".f53w4j7::before{color:var(--colorPaletteGrapeBorderActive);}", ".fu2771t::before{color:var(--colorPaletteLilacBorderActive);}", ".fzflscs::before{color:var(--colorPalettePinkBorderActive);}", ".fb6rmqc::before{color:var(--colorPaletteMagentaBorderActive);}", ".f1a4gm5b::before{color:var(--colorPalettePlumBorderActive);}", ".f1qpf9z1::before{color:var(--colorPaletteBeigeBorderActive);}", ".f1l7or83::before{color:var(--colorPaletteMinkBorderActive);}", ".fzrj0iu::before{color:var(--colorPalettePlatinumBorderActive);}", ".f8oz6wf::before{color:var(--colorPaletteAnchorBorderActive);}"]
});
export const useAvatarStyles_unstable = state => {
'use no memo';
const {
size,
shape,
active,
activeAppearance,
color
} = state;
const rootClassName = useRootClassName();
const imageClassName = useImageClassName();
const iconInitialsClassName = useIconInitialsClassName();
const styles = useStyles();
const sizeStyles = useSizeStyles();
const colorStyles = useColorStyles();
const ringColorStyles = useRingColorStyles();
const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]];
if (state.badge) {
rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);
}
if (size <= 24) {
rootClasses.push(styles.textCaption2Strong);
} else if (size <= 28) {
rootClasses.push(styles.textCaption1Strong);
} else if (size <= 40) {
// Default text size included in useRootClassName
} else if (size <= 56) {
rootClasses.push(styles.textSubtitle2);
} else if (size <= 96) {
rootClasses.push(styles.textSubtitle1);
} else {
rootClasses.push(styles.textTitle3);
}
if (shape === 'square') {
if (size <= 24) {
rootClasses.push(styles.squareSmall);
} else if (size <= 48) {
rootClasses.push(styles.squareMedium);
} else if (size <= 72) {
rootClasses.push(styles.squareLarge);
} else {
rootClasses.push(styles.squareXLarge);
}
}
if (active === 'active' || active === 'inactive') {
rootClasses.push(styles.activeOrInactive);
if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
rootClasses.push(styles.ring, ringColorStyles[color]);
if (state.badge) {
rootClasses.push(styles.ringBadgeCutout);
}
if (size <= 48) {
rootClasses.push(styles.ringThick);
} else if (size <= 64) {
rootClasses.push(styles.ringThicker);
} else {
rootClasses.push(styles.ringThickest);
}
}
if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
rootClasses.push(styles.shadow);
if (size <= 28) {
rootClasses.push(styles.shadow4);
} else if (size <= 48) {
rootClasses.push(styles.shadow8);
} else if (size <= 64) {
rootClasses.push(styles.shadow16);
} else {
rootClasses.push(styles.shadow28);
}
}
// Note: The inactive style overrides some of the activeAppearance styles and must be applied after them
if (active === 'inactive') {
rootClasses.push(styles.inactive);
}
}
state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
if (state.badge) {
state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
}
if (state.image) {
state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
}
if (state.initials) {
state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
}
if (state.icon) {
let iconSizeClass;
if (size <= 16) {
iconSizeClass = styles.icon12;
} else if (size <= 24) {
iconSizeClass = styles.icon16;
} else if (size <= 40) {
iconSizeClass = styles.icon20;
} else if (size <= 48) {
iconSizeClass = styles.icon24;
} else if (size <= 56) {
iconSizeClass = styles.icon28;
} else if (size <= 72) {
iconSizeClass = styles.icon32;
} else {
iconSizeClass = styles.icon48;
}
state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
import * as React from 'react';
import { renderAvatarGroup_unstable } from './renderAvatarGroup';
import { useAvatarGroup_unstable } from './useAvatarGroup';
import { useAvatarGroupContextValues } from './useAvatarGroupContextValues';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';
/**
* The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
* of individual Avatars in a spread, stack, or pie layout.
*/ export const AvatarGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useAvatarGroup_unstable(props, ref);
const contextValues = useAvatarGroupContextValues(state);
useAvatarGroupStyles_unstable(state);
useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state);
return renderAvatarGroup_unstable(state, contextValues);
});
AvatarGroup.displayName = 'AvatarGroup';

Some files were not shown because too many files have changed in this diff Show More