Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

4110
node_modules/@fluentui/react-avatar/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-avatar/LICENSE generated vendored Normal file
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

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
node_modules/@fluentui/react-avatar/README.md generated vendored Normal file
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.

473
node_modules/@fluentui/react-avatar/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,473 @@
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 { JSXElement } 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 type AvatarBaseProps = ComponentProps<Omit<AvatarSlots, 'badge'>> & Pick<AvatarProps, 'name'>;
export declare type AvatarBaseState = ComponentState<Omit<AvatarSlots, 'badge'>> & Pick<AvatarState, 'activeAriaLabelElement'>;
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 type AvatarGroupBaseProps = Omit<AvatarGroupProps, 'size'>;
export declare type AvatarGroupBaseState = Omit<AvatarGroupState, 'size'>;
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 type AvatarGroupItemBaseProps = AvatarGroupItemProps;
export declare type AvatarGroupItemBaseState = Omit<AvatarGroupItemState, 'size'>;
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 type AvatarGroupPopoverBaseProps = AvatarGroupPopoverProps;
export declare type AvatarGroupPopoverBaseState = Omit<AvatarGroupPopoverState, 'size'>;
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?: JSXElement;
};
/**
* 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: AvatarBaseState) => JSXElement;
/**
* Render the final JSX of AvatarGroup
*/
export declare const renderAvatarGroup_unstable: (state: AvatarGroupBaseState, contextValues: AvatarGroupContextValues) => JSXElement;
/**
* Render the final JSX of AvatarGroupItem
*/
export declare const renderAvatarGroupItem_unstable: (state: AvatarGroupItemBaseState) => JSXElement;
/**
* Render the final JSX of AvatarGroupPopover
*/
export declare const renderAvatarGroupPopover_unstable: (state: AvatarGroupPopoverBaseState, contextValues: AvatarGroupContextValues) => JSXElement;
export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
/**
* Base hook for Avatar component, manages state and structure common to all variants of Avatar
*/
export declare const useAvatarBase_unstable: (props: AvatarBaseProps, ref?: React_2.Ref<HTMLElement>) => AvatarBaseState;
/**
* @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;
/**
* Create the base state to render AvatarGroup, without design-specific props.
*
* @param props - props from this instance of AvatarGroup
* @param ref - reference to root HTMLDivElement of AvatarGroup
*/
export declare const useAvatarGroupBase_unstable: (props: AvatarGroupBaseProps, ref: React_2.Ref<HTMLDivElement>) => AvatarGroupBaseState;
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;
/**
* Create the base state required to render AvatarGroupItem, without default slot props or component types.
*
* 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
* @returns AvatarGroupItem state without default slot props or component types
*/
export declare const useAvatarGroupItemBase_unstable: (props: AvatarGroupItemBaseProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupItemBaseState;
/**
* 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;
/**
* Handles popover open/closed state, indicator display, and slot configuration.
* Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.
*
* @param props - AvatarGroupPopover props
* @returns AvatarGroupPopover state
*/
export declare const useAvatarGroupPopoverBase_unstable: (props: AvatarGroupPopoverBaseProps) => AvatarGroupPopoverBaseState;
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 { }

View File

@@ -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 _index.Avatar;
},
DEFAULT_STRINGS: function() {
return _index.DEFAULT_STRINGS;
},
avatarClassNames: function() {
return _index.avatarClassNames;
},
renderAvatar_unstable: function() {
return _index.renderAvatar_unstable;
},
useAvatarBase_unstable: function() {
return _index.useAvatarBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n AvatarNamedColor,\n AvatarBaseProps,\n AvatarProps,\n AvatarShape,\n AvatarSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSlots,\n AvatarBaseState,\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 useAvatarBase_unstable,\n useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","useSizeStyles"],"mappings":";;;;;;;;;;;IAaEA;4BAAM;;;eACNC,sBAAe;;;eACfC,uBAAgB;;;eAChBC,4BAAqB;;0BAGC;eAAtBG;;;eAFAF,+BAAwB;;;eACxBC,yBAAkB;;;eAElBE,oBAAa;;;uBACR,4BAA4B"}

View File

@@ -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, {
AvatarGroup: function() {
return _index.AvatarGroup;
},
avatarGroupClassNames: function() {
return _index.avatarGroupClassNames;
},
defaultAvatarGroupSize: function() {
return _index.defaultAvatarGroupSize;
},
renderAvatarGroup_unstable: function() {
return _index.renderAvatarGroup_unstable;
},
useAvatarGroupBase_unstable: function() {
return _index.useAvatarGroupBase_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");

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 AvatarGroupBaseProps,\n AvatarGroupBaseState,\n} from './components/AvatarGroup/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n defaultAvatarGroupSize,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n useAvatarGroupBase_unstable,\n} from './components/AvatarGroup/index';\n"],"names":["AvatarGroup","avatarGroupClassNames","defaultAvatarGroupSize","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarGroupBase_unstable"],"mappings":";;;;;;;;;;;IAUEA;iCAAW;;;eACXC,4BAAqB;;;eACrBC,6BAAsB;;;eACtBC,iCAA0B;;IAI1BI;iDAA2B;;;eAH3BH,kCAA2B;;;eAC3BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,iCAAiC"}

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, {
AvatarGroupItem: function() {
return _index.AvatarGroupItem;
},
avatarGroupItemClassNames: function() {
return _index.avatarGroupItemClassNames;
},
renderAvatarGroupItem_unstable: function() {
return _index.renderAvatarGroupItem_unstable;
},
useAvatarGroupItemBase_unstable: function() {
return _index.useAvatarGroupItemBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupItem.ts"],"sourcesContent":["export type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n AvatarGroupItemBaseProps,\n AvatarGroupItemBaseState,\n} from './components/AvatarGroupItem/index';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useGroupChildClassName,\n useAvatarGroupItemBase_unstable,\n} from './components/AvatarGroupItem/index';\n"],"names":["AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useGroupChildClassName","useAvatarGroupItemBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,sBAAe;;;eACfC,gCAAyB;;;eACzBC,qCAA8B;;;eAI9BI,sCAA+B;;;eAH/BH,wCAAiC;;;eACjCC,kCAA2B;;;eAC3BC,6BAAsB;;;uBAEjB,qCAAqC"}

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, {
AvatarGroupPopover: function() {
return _index.AvatarGroupPopover;
},
avatarGroupPopoverClassNames: function() {
return _index.avatarGroupPopoverClassNames;
},
renderAvatarGroupPopover_unstable: function() {
return _index.renderAvatarGroupPopover_unstable;
},
useAvatarGroupPopoverBase_unstable: function() {
return _index.useAvatarGroupPopoverBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupPopover.ts"],"sourcesContent":["export type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './components/AvatarGroupPopover/index';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopover_unstable,\n useAvatarGroupPopoverBase_unstable,\n} from './components/AvatarGroupPopover/index';\n"],"names":["AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,yBAAkB;;;eAClBC,mCAA4B;;;eAC5BC,wCAAiC;;;eAIjCI,yCAAkC;;;eAHlCH,kDAA2C;;;eAC3CC,2CAAoC;;;eACpCC,qCAA8B;;;uBAEzB,wCAAwC"}

View File

@@ -0,0 +1,24 @@
'use client';
"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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACO,iBAAiB;2BACpB,cAAc;qCACL,kCAAkC;uCACrC,2BAA2B;AAI7D,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQP,6BAAAA,EAAmBK,OAAOC;QAExCJ,+CAAAA,EAAyBK;QAEzBN,gDAAAA,EAA4B,4BAA4BM;IAExD,WAAOR,mCAAAA,EAAsBQ;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,40 @@
"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;
},
useAvatarBase_unstable: function() {
return _useAvatar.useAvatarBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n AvatarNamedColor,\n AvatarBaseProps,\n AvatarProps,\n AvatarShape,\n AvatarSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSlots,\n AvatarBaseState,\n AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","useAvatarBase_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":";;;;;;;;;;;IAYSA;6BAAM;;;eAENE,0BAAe;;IACfG;sDAAgB;;;eAFhBJ,mCAAqB;;0BACsC;eAAtBG;;;eACnBE,+CAAwB;;;eADzBH,6BAAkB;;;eACSI,oCAAa;;;wBAH3C,WAAW;8BACI,iBAAiB;2BACqB,cAAc;uCAChB,2BAA2B"}

View File

@@ -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
]
});
};

View File

@@ -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 { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AvatarSlots, AvatarBaseState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarBaseState): JSXElement => {\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"],"mappings":";;;;+BAQaC;;;;;;4BAPb,iCAAiD;gCAErB,4BAA4B;AAKjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,QAAQ,EAAA,CAAA;YACjCF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;YAC3BJ,MAAMK,KAAK,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,KAAK,EAAA,CAAA;YAC3BL,MAAMM,sBAAsB;;;AAGnC,EAAE"}

View File

@@ -0,0 +1,250 @@
'use client';
"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;
},
useAvatarBase_unstable: function() {
return useAvatarBase_unstable;
},
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 { size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor, color: propColor = 'neutral', ...rest } = props;
const state = useAvatarBase_unstable(rest, ref);
var _ref;
// Resolve 'colorful' to a specific color name
const color = propColor === 'colorful' ? avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : props.name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length] : propColor;
if (state.initials) {
var _state_initials;
state.initials = _reactutilities.slot.optional(props.initials, {
renderByDefault: true,
defaultProps: {
children: (0, _index.getInitials)(props.name, dir === 'rtl', {
firstInitialOnly: size <= 16
}),
id: (_state_initials = state.initials) === null || _state_initials === void 0 ? void 0 : _state_initials.id
},
elementType: 'span'
});
}
if (state.icon) {
var _state_icon;
var _children;
(_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ _react.createElement(_reacticons.PersonRegular, null);
}
const badge = _reactutilities.slot.optional(props.badge, {
defaultProps: {
size: getBadgeSize(size),
id: state.root.id + '__badge'
},
elementType: _reactbadge.PresenceBadge
});
let activeAriaLabelElement = state.activeAriaLabelElement;
// Enhance aria-label and/or aria-labelledby to include badge and active state
// Only process if aria attributes were not explicitly provided by the user
const userProvidedAriaLabel = props['aria-label'] !== undefined;
const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;
if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {
if (props.name) {
if (badge) {
state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;
}
} else if (state.initials) {
// root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');
delete state.root['aria-label'];
}
// Add the active state to the aria label
if (active === 'active' || active === 'inactive') {
const activeText = DEFAULT_STRINGS[active];
if (state.root['aria-labelledby']) {
// If using aria-labelledby, render a hidden span and append it to the labelledby
const activeId = state.root.id + '__active';
state.root['aria-labelledby'] += ' ' + activeId;
activeAriaLabelElement = /*#__PURE__*/ _react.createElement("span", {
hidden: true,
id: activeId
}, activeText);
} else if (state.root['aria-label']) {
// Otherwise, just append it to the aria-label
state.root['aria-label'] += ' ' + activeText;
}
}
}
return {
...state,
size,
shape,
active,
activeAppearance,
activeAriaLabelElement,
color,
badge,
// eslint-disable-next-line @typescript-eslint/no-deprecated
components: {
...state.components,
badge: _reactbadge.PresenceBadge
}
};
};
const useAvatarBase_unstable = (props, ref)=>{
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const { name, ...rest } = props;
const baseId = (0, _reactutilities.useId)('avatar-');
const root = _reactutilities.slot.always({
role: 'img',
id: baseId,
ref,
...rest
}, {
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'),
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: {
'aria-hidden': true
},
elementType: 'span'
});
}
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;
} 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;
}
}
return {
activeAriaLabelElement,
components: {
root: 'span',
initials: 'span',
icon: 'span',
image: 'img'
},
root,
initials,
icon,
image
};
};
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

View File

@@ -0,0 +1,839 @@
'use client';
"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",
Bg24rqe: "f9ttr0w"
},
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){.f9ttr0w{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

View File

@@ -0,0 +1,724 @@
'use client';
"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 _reacttheme = require("@fluentui/react-theme");
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 = (0, _react.makeResetStyles)({
display: 'inline-block',
flexShrink: 0,
position: 'relative',
verticalAlign: 'middle',
borderRadius: _reacttheme.tokens.borderRadiusCircular,
fontFamily: _reacttheme.tokens.fontFamilyBase,
fontWeight: _reacttheme.tokens.fontWeightSemibold,
fontSize: _reacttheme.tokens.fontSizeBase300,
width: '32px',
height: '32px',
// ::before is the ring, and ::after is the shadow.
// These are not displayed by default; the ring and shadow clases set content: "" to display them when appropriate.
'::before,::after': {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
zIndex: -1,
margin: `calc(-2 * var(${vars.ringWidth}, 0px))`,
borderRadius: 'inherit',
transitionProperty: 'margin, opacity',
transitionTimingFunction: `${_reacttheme.tokens.curveEasyEaseMax}, ${_reacttheme.tokens.curveLinear}`,
transitionDuration: `${_reacttheme.tokens.durationUltraSlow}, ${_reacttheme.tokens.durationSlower}`,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms'
}
},
'::before': {
borderStyle: 'solid',
borderWidth: `var(${vars.ringWidth})`
}
});
const useImageClassName = (0, _react.makeResetStyles)({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: 'inherit',
objectFit: 'cover',
verticalAlign: 'top'
});
const useIconInitialsClassName = (0, _react.makeResetStyles)({
position: 'absolute',
boxSizing: 'border-box',
top: 0,
left: 0,
width: '100%',
height: '100%',
lineHeight: '1',
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'center',
textAlign: 'center',
userSelect: 'none',
borderRadius: '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 = (0, _react.makeStyles)({
textCaption2Strong: {
fontSize: _reacttheme.tokens.fontSizeBase100
},
textCaption1Strong: {
fontSize: _reacttheme.tokens.fontSizeBase200
},
textSubtitle2: {
fontSize: _reacttheme.tokens.fontSizeBase400
},
textSubtitle1: {
fontSize: _reacttheme.tokens.fontSizeBase500
},
textTitle3: {
fontSize: _reacttheme.tokens.fontSizeBase600
},
squareSmall: {
borderRadius: _reacttheme.tokens.borderRadiusSmall
},
squareMedium: {
borderRadius: _reacttheme.tokens.borderRadiusMedium
},
squareLarge: {
borderRadius: _reacttheme.tokens.borderRadiusLarge
},
squareXLarge: {
borderRadius: _reacttheme.tokens.borderRadiusXLarge
},
activeOrInactive: {
transform: 'perspective(1px)',
transitionProperty: 'transform, opacity',
transitionDuration: `${_reacttheme.tokens.durationUltraSlow}, ${_reacttheme.tokens.durationFaster}`,
transitionTimingFunction: `${_reacttheme.tokens.curveEasyEaseMax}, ${_reacttheme.tokens.curveLinear}`,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms'
}
},
ring: {
// Show the ::before pseudo-element, which is the ring
'::before': {
content: '""'
}
},
ringBadgeCutout: {
'::before': {
maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`)
}
},
ringThick: {
[vars.ringWidth]: _reacttheme.tokens.strokeWidthThick
},
ringThicker: {
[vars.ringWidth]: _reacttheme.tokens.strokeWidthThicker
},
ringThickest: {
[vars.ringWidth]: _reacttheme.tokens.strokeWidthThickest
},
shadow: {
// Show the ::after pseudo-element, which is the shadow
'::after': {
content: '""'
}
},
shadow4: {
'::after': {
boxShadow: _reacttheme.tokens.shadow4
}
},
shadow8: {
'::after': {
boxShadow: _reacttheme.tokens.shadow8
}
},
shadow16: {
'::after': {
boxShadow: _reacttheme.tokens.shadow16
}
},
shadow28: {
'::after': {
boxShadow: _reacttheme.tokens.shadow28
}
},
inactive: {
opacity: '0.8',
transform: 'scale(0.875)',
transitionTimingFunction: `${_reacttheme.tokens.curveDecelerateMin}, ${_reacttheme.tokens.curveLinear}`,
'::before,::after': {
margin: 0,
opacity: 0,
transitionTimingFunction: `${_reacttheme.tokens.curveDecelerateMin}, ${_reacttheme.tokens.curveLinear}`
}
},
// Applied to the badge slot
badge: {
position: 'absolute',
bottom: 0,
right: 0
},
// Applied to the image, initials, or icon slot when there is a badge
badgeCutout: {
maskImage: badgeMask()
},
// Applied to the root when there is a badge
badgeAlign: {
// Griffel won't auto-flip the "right" alignment to "left" in RTL if it is inline in the maskImage,
// so split it out into a css variable that will auto-flip.
[vars.badgeAlign]: 'right'
},
// Badge size: applied to root when there is a badge
tiny: {
[vars.badgeRadius]: '3px',
[vars.badgeGap]: _reacttheme.tokens.strokeWidthThin
},
'extra-small': {
[vars.badgeRadius]: '5px',
[vars.badgeGap]: _reacttheme.tokens.strokeWidthThin
},
small: {
[vars.badgeRadius]: '6px',
[vars.badgeGap]: _reacttheme.tokens.strokeWidthThin
},
medium: {
[vars.badgeRadius]: '8px',
[vars.badgeGap]: _reacttheme.tokens.strokeWidthThin
},
large: {
[vars.badgeRadius]: '10px',
[vars.badgeGap]: _reacttheme.tokens.strokeWidthThick
},
'extra-large': {
[vars.badgeRadius]: '14px',
[vars.badgeGap]: _reacttheme.tokens.strokeWidthThick
},
icon12: {
fontSize: '12px'
},
icon16: {
fontSize: '16px'
},
icon20: {
fontSize: '20px'
},
icon24: {
fontSize: '24px'
},
icon28: {
fontSize: '28px'
},
icon32: {
fontSize: '32px'
},
icon48: {
fontSize: '48px'
}
});
const useSizeStyles = (0, _react.makeStyles)({
16: {
width: '16px',
height: '16px'
},
20: {
width: '20px',
height: '20px'
},
24: {
width: '24px',
height: '24px'
},
28: {
width: '28px',
height: '28px'
},
32: {
width: '32px',
height: '32px'
},
36: {
width: '36px',
height: '36px'
},
40: {
width: '40px',
height: '40px'
},
48: {
width: '48px',
height: '48px'
},
56: {
width: '56px',
height: '56px'
},
64: {
width: '64px',
height: '64px'
},
72: {
width: '72px',
height: '72px'
},
96: {
width: '96px',
height: '96px'
},
120: {
width: '120px',
height: '120px'
},
128: {
width: '128px',
height: '128px'
}
});
const useColorStyles = (0, _react.makeStyles)({
neutral: {
color: _reacttheme.tokens.colorNeutralForeground3,
backgroundColor: _reacttheme.tokens.colorNeutralBackground6
},
brand: {
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted,
backgroundColor: _reacttheme.tokens.colorBrandBackgroundStatic
},
'dark-red': {
color: _reacttheme.tokens.colorPaletteDarkRedForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteDarkRedBackground2
},
cranberry: {
color: _reacttheme.tokens.colorPaletteCranberryForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteCranberryBackground2
},
red: {
color: _reacttheme.tokens.colorPaletteRedForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground2
},
pumpkin: {
color: _reacttheme.tokens.colorPalettePumpkinForeground2,
backgroundColor: _reacttheme.tokens.colorPalettePumpkinBackground2
},
peach: {
color: _reacttheme.tokens.colorPalettePeachForeground2,
backgroundColor: _reacttheme.tokens.colorPalettePeachBackground2
},
marigold: {
color: _reacttheme.tokens.colorPaletteMarigoldForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteMarigoldBackground2
},
gold: {
color: _reacttheme.tokens.colorPaletteGoldForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteGoldBackground2
},
brass: {
color: _reacttheme.tokens.colorPaletteBrassForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteBrassBackground2
},
brown: {
color: _reacttheme.tokens.colorPaletteBrownForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteBrownBackground2
},
forest: {
color: _reacttheme.tokens.colorPaletteForestForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteForestBackground2
},
seafoam: {
color: _reacttheme.tokens.colorPaletteSeafoamForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteSeafoamBackground2
},
'dark-green': {
color: _reacttheme.tokens.colorPaletteDarkGreenForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteDarkGreenBackground2
},
'light-teal': {
color: _reacttheme.tokens.colorPaletteLightTealForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteLightTealBackground2
},
teal: {
color: _reacttheme.tokens.colorPaletteTealForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteTealBackground2
},
steel: {
color: _reacttheme.tokens.colorPaletteSteelForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteSteelBackground2
},
blue: {
color: _reacttheme.tokens.colorPaletteBlueForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteBlueBackground2
},
'royal-blue': {
color: _reacttheme.tokens.colorPaletteRoyalBlueForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteRoyalBlueBackground2
},
cornflower: {
color: _reacttheme.tokens.colorPaletteCornflowerForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteCornflowerBackground2
},
navy: {
color: _reacttheme.tokens.colorPaletteNavyForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteNavyBackground2
},
lavender: {
color: _reacttheme.tokens.colorPaletteLavenderForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteLavenderBackground2
},
purple: {
color: _reacttheme.tokens.colorPalettePurpleForeground2,
backgroundColor: _reacttheme.tokens.colorPalettePurpleBackground2
},
grape: {
color: _reacttheme.tokens.colorPaletteGrapeForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteGrapeBackground2
},
lilac: {
color: _reacttheme.tokens.colorPaletteLilacForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteLilacBackground2
},
pink: {
color: _reacttheme.tokens.colorPalettePinkForeground2,
backgroundColor: _reacttheme.tokens.colorPalettePinkBackground2
},
magenta: {
color: _reacttheme.tokens.colorPaletteMagentaForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteMagentaBackground2
},
plum: {
color: _reacttheme.tokens.colorPalettePlumForeground2,
backgroundColor: _reacttheme.tokens.colorPalettePlumBackground2
},
beige: {
color: _reacttheme.tokens.colorPaletteBeigeForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteBeigeBackground2
},
mink: {
color: _reacttheme.tokens.colorPaletteMinkForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteMinkBackground2
},
platinum: {
color: _reacttheme.tokens.colorPalettePlatinumForeground2,
backgroundColor: _reacttheme.tokens.colorPalettePlatinumBackground2
},
anchor: {
color: _reacttheme.tokens.colorPaletteAnchorForeground2,
backgroundColor: _reacttheme.tokens.colorPaletteAnchorBackground2
}
});
const useRingColorStyles = (0, _react.makeStyles)({
neutral: {
'::before': {
color: _reacttheme.tokens.colorBrandStroke1
}
},
brand: {
'::before': {
color: _reacttheme.tokens.colorBrandStroke1
}
},
'dark-red': {
'::before': {
color: _reacttheme.tokens.colorPaletteDarkRedBorderActive
}
},
cranberry: {
'::before': {
color: _reacttheme.tokens.colorPaletteCranberryBorderActive
}
},
red: {
'::before': {
color: _reacttheme.tokens.colorPaletteRedBorderActive
}
},
pumpkin: {
'::before': {
color: _reacttheme.tokens.colorPalettePumpkinBorderActive
}
},
peach: {
'::before': {
color: _reacttheme.tokens.colorPalettePeachBorderActive
}
},
marigold: {
'::before': {
color: _reacttheme.tokens.colorPaletteMarigoldBorderActive
}
},
gold: {
'::before': {
color: _reacttheme.tokens.colorPaletteGoldBorderActive
}
},
brass: {
'::before': {
color: _reacttheme.tokens.colorPaletteBrassBorderActive
}
},
brown: {
'::before': {
color: _reacttheme.tokens.colorPaletteBrownBorderActive
}
},
forest: {
'::before': {
color: _reacttheme.tokens.colorPaletteForestBorderActive
}
},
seafoam: {
'::before': {
color: _reacttheme.tokens.colorPaletteSeafoamBorderActive
}
},
'dark-green': {
'::before': {
color: _reacttheme.tokens.colorPaletteDarkGreenBorderActive
}
},
'light-teal': {
'::before': {
color: _reacttheme.tokens.colorPaletteLightTealBorderActive
}
},
teal: {
'::before': {
color: _reacttheme.tokens.colorPaletteTealBorderActive
}
},
steel: {
'::before': {
color: _reacttheme.tokens.colorPaletteSteelBorderActive
}
},
blue: {
'::before': {
color: _reacttheme.tokens.colorPaletteBlueBorderActive
}
},
'royal-blue': {
'::before': {
color: _reacttheme.tokens.colorPaletteRoyalBlueBorderActive
}
},
cornflower: {
'::before': {
color: _reacttheme.tokens.colorPaletteCornflowerBorderActive
}
},
navy: {
'::before': {
color: _reacttheme.tokens.colorPaletteNavyBorderActive
}
},
lavender: {
'::before': {
color: _reacttheme.tokens.colorPaletteLavenderBorderActive
}
},
purple: {
'::before': {
color: _reacttheme.tokens.colorPalettePurpleBorderActive
}
},
grape: {
'::before': {
color: _reacttheme.tokens.colorPaletteGrapeBorderActive
}
},
lilac: {
'::before': {
color: _reacttheme.tokens.colorPaletteLilacBorderActive
}
},
pink: {
'::before': {
color: _reacttheme.tokens.colorPalettePinkBorderActive
}
},
magenta: {
'::before': {
color: _reacttheme.tokens.colorPaletteMagentaBorderActive
}
},
plum: {
'::before': {
color: _reacttheme.tokens.colorPalettePlumBorderActive
}
},
beige: {
'::before': {
color: _reacttheme.tokens.colorPaletteBeigeBorderActive
}
},
mink: {
'::before': {
color: _reacttheme.tokens.colorPaletteMinkBorderActive
}
},
platinum: {
'::before': {
color: _reacttheme.tokens.colorPalettePlatinumBorderActive
}
},
anchor: {
'::before': {
color: _reacttheme.tokens.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

View File

@@ -0,0 +1,26 @@
'use client';
"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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * 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":["React","renderAvatarGroup_unstable","useAvatarGroup_unstable","useAvatarGroupContextValues","useCustomStyleHook_unstable","useAvatarGroupStyles_unstable","AvatarGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;gCACzB,mBAAmB;6CACf,gCAAgC;qCAChC,kCAAkC;4CAChC,gCAAgC;AAQvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;IAC7C,MAAME,oBAAgBR,wDAAAA,EAA4BO;QAElDL,yDAAAA,EAA8BK;QAE9BN,gDAAAA,EAA4B,iCAAiCM;IAE7D,WAAOT,6CAAAA,EAA2BS,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -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\nexport type AvatarGroupBaseProps = Omit<AvatarGroupProps, 'size'>;\n\n/**\n * State used in rendering AvatarGroup\n */\nexport type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size'>>;\n\nexport type AvatarGroupBaseState = Omit<AvatarGroupState, 'size'>;\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n isOverflow?: boolean;\n};\n\nexport type AvatarGroupContextValues = {\n avatarGroup: AvatarGroupContextValue;\n};\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,41 @@
"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;
},
useAvatarGroupBase_unstable: function() {
return _useAvatarGroup.useAvatarGroupBase_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");

View File

@@ -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 AvatarGroupBaseProps,\n AvatarGroupBaseState,\n} from './AvatarGroup.types';\nexport { renderAvatarGroup_unstable } from './renderAvatarGroup';\nexport { defaultAvatarGroupSize, useAvatarGroup_unstable, useAvatarGroupBase_unstable } from './useAvatarGroup';\nexport { avatarGroupClassNames, useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles';\nexport { useAvatarGroupContextValues } from './useAvatarGroupContextValues';\n"],"names":["AvatarGroup","renderAvatarGroup_unstable","defaultAvatarGroupSize","useAvatarGroup_unstable","useAvatarGroupBase_unstable","avatarGroupClassNames","useAvatarGroupStyles_unstable","useAvatarGroupContextValues"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;yBAYU;eAArBK;;;eADAH,sCAAsB;;;eADtBD,6CAA0B;;;eACuBG,2CAA2B;;;eAE5EG,wDAA2B;;;eADJD,yDAA6B;;;eAD5BH,uCAAuB;;;6BAX5B,gBAAgB;mCAUD,sBAAsB;gCAC4B,mBAAmB;4CAC3C,gCAAgC;6CACzD,gCAAgC"}

View File

@@ -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, {})
});
};

View File

@@ -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 type { JSXElement } from '@fluentui/react-utilities';\n\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupSlots, AvatarGroupContextValues, AvatarGroupBaseState } from './AvatarGroup.types';\n\n/**\n * Render the final JSX of AvatarGroup\n */\nexport const renderAvatarGroup_unstable = (\n state: AvatarGroupBaseState,\n contextValues: AvatarGroupContextValues,\n): JSXElement => {\n assertSlots<AvatarGroupSlots>(state);\n\n return (\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.root />\n </AvatarGroupProvider>\n );\n};\n"],"names":["assertSlots","AvatarGroupProvider","renderAvatarGroup_unstable","state","contextValues","value","avatarGroup","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;oCAGpB,oCAAoC;AAMjE,mCAAmC,CACxCC,OACAC;QAEAJ,2BAAAA,EAA8BG;IAE9B,OAAA,WAAA,OACE,eAAA,EAACF,uCAAAA,EAAAA;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

View File

@@ -0,0 +1,51 @@
'use client';
"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;
},
useAvatarGroupBase_unstable: function() {
return useAvatarGroupBase_unstable;
},
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 { size = defaultAvatarGroupSize, ...baseProps } = props;
const state = useAvatarGroupBase_unstable(baseProps, ref);
return {
size,
...state
};
};
const useAvatarGroupBase_unstable = (props, ref)=>{
const { layout = 'spread' } = props;
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
role: 'group',
...props,
ref
}), {
elementType: 'div'
});
return {
layout,
components: {
root: 'div'
},
root
};
};
const defaultAvatarGroupSize = 32;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n AvatarGroupBaseProps,\n AvatarGroupBaseState,\n AvatarGroupProps,\n AvatarGroupState,\n} 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 { size = defaultAvatarGroupSize, ...baseProps } = props;\n const state = useAvatarGroupBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n size,\n ...state,\n };\n};\n\n/**\n * Create the base state to render AvatarGroup, without design-specific props.\n *\n * @param props - props from this instance of AvatarGroup\n * @param ref - reference to root HTMLDivElement of AvatarGroup\n */\nexport const useAvatarGroupBase_unstable = (\n props: AvatarGroupBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): AvatarGroupBaseState => {\n const { layout = 'spread' } = props;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\n role: 'group',\n ...props,\n ref,\n }),\n { elementType: 'div' },\n );\n return { layout, components: { root: 'div' }, root };\n};\n\nexport const defaultAvatarGroupSize = 32;\n"],"names":["React","getIntrinsicElementProps","slot","useAvatarGroup_unstable","props","ref","size","defaultAvatarGroupSize","baseProps","state","useAvatarGroupBase_unstable","layout","root","always","role","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;0BAqDaO;;;+BAjBAG;;;2BAhBAP;;;;;iEAlBU,QAAQ;gCACgB,4BAA4B;AAiBpE,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,OAAOC,sBAAsB,EAAE,GAAGC,WAAW,GAAGJ;IACxD,MAAMK,QAAQC,4BAA4BF,WAAWH;IAErD,OAAO;QACLC;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAQK,MAAMC,8BAA8B,CACzCN,OACAC;IAEA,MAAM,EAAEM,SAAS,QAAQ,EAAE,GAAGP;IAE9B,MAAMQ,OAAOV,oBAAAA,CAAKW,MAAM,KACtBZ,wCAAAA,EAAyB,OAAO;QAC9Ba,MAAM;QACN,GAAGV,KAAK;QACRC;IACF,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEJ;QAAQK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACrD,EAAE;AAEK,MAAML,yBAAyB,GAAG"}

View File

@@ -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
};
};

View File

@@ -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"],"mappings":";;;;;;;;;;AAEO,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEzB,MAAMG,cAAuC;QAC3CF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAY;AACvB,EAAE"}

View File

@@ -0,0 +1,60 @@
'use client';
"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",
By8wz76: "f1wgxgin"
}
}, {
d: [
".ftuwxu6{display:inline-flex;}",
".f10pi13n{position:relative;}",
".f1uz6ud1{clip-path:circle(50%);}",
".f1ganh6p{background-color:var(--colorTransparentStroke);}"
],
m: [
[
"@media (forced-colors: active){.f1wgxgin{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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useAvatarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nexport const avatarGroupClassNames = {\n root: 'fui-AvatarGroup'\n};\n/**\n * Styles for the root slot.\n */ const useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative'\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n }\n});\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */ export const useAvatarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n state.root.className = mergeClasses(avatarGroupClassNames.root, styles.base, layout === 'pie' && sizeStyles[size], layout === 'pie' && styles.pie, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","mc9l5x","qhf8xq","pie","Bgl5zvf","De3pzq","By8wz76","d","m","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,qBAAqB;;;IAoBjBY,6BAA6B;;;;uBAvBL,gBAAgB;uCAE3B,kCAAkC;AACzD,8BAA8B;IACjCX,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAM,EAAEC,MAAM,EAAEC,IAAAA,EAAM,GAAGF,KAAK;IAC9B,MAAMG,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,MAAMe,UAAU,OAAGlB,oCAAa,CAAC,CAAC;IAClCc,KAAK,CAACZ,IAAI,CAACiB,SAAS,OAAGrB,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAEe,MAAM,CAACb,IAAI,EAAEW,MAAM,KAAK,KAAK,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAED,MAAM,KAAK,KAAK,IAAIE,MAAM,CAACV,GAAG,EAAEO,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;IACxK,OAAOL,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,48 @@
'use client';
"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 _reacttheme = require("@fluentui/react-theme");
const _useAvatarStylesstyles = require("../Avatar/useAvatarStyles.styles");
const avatarGroupClassNames = {
root: 'fui-AvatarGroup'
};
/**
* Styles for the root slot.
*/ const useStyles = (0, _react.makeStyles)({
base: {
display: 'inline-flex',
position: 'relative'
},
pie: {
clipPath: 'circle(50%)',
backgroundColor: _reacttheme.tokens.colorTransparentStroke,
'@media (forced-colors: active)': {
backgroundColor: 'CanvasText'
}
}
});
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroup/useAvatarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles.styles';\nimport type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots> = {\n root: 'fui-AvatarGroup',\n};\n\n/**\n * Styles for the root slot.\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n pie: {\n clipPath: 'circle(50%)',\n backgroundColor: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n});\n\n/**\n * Apply styling to the AvatarGroup slots based on the state\n */\nexport const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGroupState => {\n 'use no memo';\n\n const { layout, size } = state;\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n\n state.root.className = mergeClasses(\n avatarGroupClassNames.root,\n styles.base,\n layout === 'pie' && sizeStyles[size],\n layout === 'pie' && styles.pie,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useSizeStyles","avatarGroupClassNames","root","useStyles","base","display","position","pie","clipPath","backgroundColor","colorTransparentStroke","useAvatarGroupStyles_unstable","state","layout","size","styles","sizeStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,qBAAAA;;;iCAwBAU;;;;uBA9B4B,iBAAiB;4BACnC,wBAAwB;uCACjB,mCAAmC;AAI1D,8BAAgE;IACrET,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,MAAM;QACJC,SAAS;QACTC,UAAU;IACZ;IACAC,KAAK;QACHC,UAAU;QACVC,iBAAiBV,kBAAAA,CAAOW,sBAAsB;QAC9C,kCAAkC;YAChCD,iBAAiB;QACnB;IACF;AACF;AAKO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;IACzB,MAAMG,SAASZ;IACf,MAAMa,iBAAahB,oCAAAA;IAEnBY,MAAMV,IAAI,CAACe,SAAS,OAAGnB,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1Ba,OAAOX,IAAI,EACXS,WAAW,SAASG,UAAU,CAACF,KAAK,EACpCD,WAAW,SAASE,OAAOR,GAAG,EAC9BK,MAAMV,IAAI,CAACe,SAAS;IAGtB,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupItem/AvatarGroupItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nimport { useAvatarGroupItem_unstable } from './useAvatarGroupItem';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles';\nimport type { AvatarGroupItemProps } from './AvatarGroupItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The AvatarGroupItem component represents a single person or entity.\n * AvatarGroupItem should only be used in an AvatarGroup component.\n */\nexport const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupItem_unstable(props, ref);\n\n useAvatarGroupItemStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state);\n\n return renderAvatarGroupItem_unstable(state);\n});\n\nAvatarGroupItem.displayName = 'AvatarGroupItem';\n"],"names":["React","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useCustomStyleHook_unstable","useAvatarGroupItemStyles_unstable","AvatarGroupItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;uCACgB,0BAA0B;oCAC7B,uBAAuB;qCACvB,kCAAkC;gDAC5B,oCAAoC;AAQ/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQP,+CAAAA,EAA4BK,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAElCN,gDAAAA,EAA4B,qCAAqCM;IAEjE,WAAOR,qDAAAA,EAA+BQ;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -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\nexport type AvatarGroupItemBaseProps = AvatarGroupItemProps;\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\nexport type AvatarGroupItemBaseState = Omit<AvatarGroupItemState, 'size'>;\n"],"names":[],"mappings":""}

View File

@@ -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, {
AvatarGroupItem: function() {
return _AvatarGroupItem.AvatarGroupItem;
},
avatarGroupItemClassNames: function() {
return _useAvatarGroupItemStylesstyles.avatarGroupItemClassNames;
},
renderAvatarGroupItem_unstable: function() {
return _renderAvatarGroupItem.renderAvatarGroupItem_unstable;
},
useAvatarGroupItemBase_unstable: function() {
return _useAvatarGroupItem.useAvatarGroupItemBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupItem/index.ts"],"sourcesContent":["export { AvatarGroupItem } from './AvatarGroupItem';\nexport type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n AvatarGroupItemBaseProps,\n AvatarGroupItemBaseState,\n} from './AvatarGroupItem.types';\nexport { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem';\nexport { useAvatarGroupItem_unstable, useAvatarGroupItemBase_unstable } from './useAvatarGroupItem';\nexport {\n avatarGroupItemClassNames,\n useAvatarGroupItemStyles_unstable,\n useGroupChildClassName,\n} from './useAvatarGroupItemStyles.styles';\n"],"names":["AvatarGroupItem","renderAvatarGroupItem_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemBase_unstable","avatarGroupItemClassNames","useAvatarGroupItemStyles_unstable","useGroupChildClassName"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAWtBI,yDAAyB;;;eAHlBH,qDAA8B;;;eACDE,mDAA+B;;;eAGnEE,iEAAiC;;;eAH1BH,+CAA2B;;;eAIlCI,sDAAsB;;;iCAbQ,oBAAoB;uCAQL,0BAA0B;oCACI,uBAAuB;gDAK7F,oCAAoC"}

View File

@@ -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, {})
]
});
};

View File

@@ -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 { JSXElement } from '@fluentui/react-utilities';\n\nimport type { AvatarGroupItemBaseState, AvatarGroupItemSlots } from './AvatarGroupItem.types';\n\n/**\n * Render the final JSX of AvatarGroupItem\n */\nexport const renderAvatarGroupItem_unstable = (state: AvatarGroupItemBaseState): JSXElement => {\n assertSlots<AvatarGroupItemSlots>(state);\n\n return (\n <state.root>\n <state.avatar />\n {state.isOverflowItem && <state.overflowLabel />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAvatarGroupItem_unstable","state","root","avatar","isOverflowItem","overflowLabel"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;AAQjD,uCAAuC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,MAAM,EAAA,CAAA;YACZF,MAAMG,cAAc,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMI,aAAa,EAAA,CAAA;;;AAGnD,EAAE"}

View File

@@ -0,0 +1,90 @@
'use client';
"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, {
useAvatarGroupItemBase_unstable: function() {
return useAvatarGroupItemBase_unstable;
},
useAvatarGroupItem_unstable: 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 state = useAvatarGroupItemBase_unstable(props, ref);
const groupSize = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.size);
const size = groupSize !== null && groupSize !== void 0 ? groupSize : _useAvatarGroup.defaultAvatarGroupSize;
return {
size,
...state,
components: {
// eslint-disable-next-line @typescript-eslint/no-deprecated
...state.components,
avatar: _Avatar.Avatar
},
avatar: _reactutilities.slot.always(props.avatar, {
defaultProps: {
size,
color: 'colorful',
...state.avatar
},
elementType: _Avatar.Avatar
})
};
};
const useAvatarGroupItemBase_unstable = (props, ref)=>{
const groupIsOverflow = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.isOverflow);
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, overflowLabel, ...avatarSlotProps } = props;
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,
components: {
root: groupIsOverflow ? 'li' : 'div',
avatar: 'span',
overflowLabel: 'span'
},
root: _reactutilities.slot.always(props.root, {
defaultProps: {
style,
className
},
elementType: groupIsOverflow ? 'li' : 'div'
}),
avatar: _reactutilities.slot.always(props.avatar, {
defaultProps: {
ref,
...avatarSlotProps
},
elementType: 'span'
}),
overflowLabel: _reactutilities.slot.always(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'
})
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,397 @@
'use client';
"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

View File

@@ -0,0 +1,283 @@
'use client';
"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 _reacttheme = require("@fluentui/react-theme");
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 = (0, _react.makeStyles)({
base: {
alignItems: 'center',
display: 'inline-flex',
flexShrink: 0,
position: 'relative'
},
overflowItem: {
padding: `${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalXS}`
},
nonOverflowItem: {
borderRadius: _reacttheme.tokens.borderRadiusCircular
}
});
/**
* Styles for the avatar slot
*/ const useAvatarStyles = (0, _react.makeStyles)({
nonOverflowItem: {
position: 'absolute'
},
pie: {
borderRadius: '0'
}
});
/**
* Styles for the label slot
*/ const useOverflowLabelStyles = (0, _react.makeStyles)({
base: {
marginLeft: _reacttheme.tokens.spacingHorizontalS,
color: _reacttheme.tokens.colorNeutralForeground1,
..._reacttheme.typographyStyles.body1
}
});
/**
* Styles for the stack layout
*/ const useStackStyles = (0, _react.makeStyles)({
thick: {
boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorNeutralBackground2}`
},
thicker: {
boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorNeutralBackground2}`
},
thickest: {
boxShadow: `0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorNeutralBackground2}`
},
xxs: {
'&:not(:first-child)': {
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalXXS})`
}
},
xs: {
'&:not(:first-child)': {
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalXS})`
}
},
s: {
'&:not(:first-child)': {
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalS})`
}
},
l: {
'&:not(:first-child)': {
marginLeft: `calc(-1 * ${_reacttheme.tokens.spacingHorizontalL})`
}
}
});
/**
* Styles for the spread layout
*/ const useSpreadStyles = (0, _react.makeStyles)({
s: {
'&:not(:first-child)': {
marginLeft: _reacttheme.tokens.spacingHorizontalS
}
},
mNudge: {
'&:not(:first-child)': {
marginLeft: _reacttheme.tokens.spacingHorizontalMNudge
}
},
m: {
'&:not(:first-child)': {
marginLeft: _reacttheme.tokens.spacingHorizontalM
}
},
l: {
'&:not(:first-child)': {
marginLeft: _reacttheme.tokens.spacingHorizontalL
}
},
xl: {
'&:not(:first-child)': {
marginLeft: _reacttheme.tokens.spacingHorizontalXL
}
}
});
/**
* Styles for the pie layout
*/ const usePieStyles = (0, _react.makeStyles)({
base: {
position: 'absolute'
},
slices: {
// Two slices
// 1st of 2 items
'&:nth-of-type(1):nth-last-of-type(2)': {
clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,
left: '-25%'
},
// 2nd of 2 items
'&:nth-of-type(2):nth-last-of-type(1)': {
clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,
left: '25%'
},
// Three slices
// 1st of 3 items
'&:nth-of-type(1):nth-last-of-type(3)': {
clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,
left: '-25%'
},
// 2nd of 3 items
'&:nth-of-type(2):nth-last-of-type(2)': {
// Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.
clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,
left: '50%',
transform: 'scale(0.5)',
transformOrigin: '0 0'
},
// 3rd of 3 items
'&:nth-of-type(3):nth-last-of-type(1)': {
clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,
left: '50%',
top: '50%',
transform: 'scale(0.5)',
transformOrigin: '0 0'
}
},
rtlSlices: {
// Two slices
// 1st of 2 items
'&:nth-of-type(1):nth-last-of-type(2)': {
clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`
},
// 2nd of 2 items
'&:nth-of-type(2):nth-last-of-type(1)': {
clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`
},
// Three slices
// 1st of 3 items
'&:nth-of-type(1):nth-last-of-type(3)': {
clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`
},
// 2nd of 3 items
'&:nth-of-type(2):nth-last-of-type(2)': {
clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`,
left: '0'
},
// 3rd of 3 items
'&:nth-of-type(3):nth-last-of-type(1)': {
clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`,
left: '0'
}
},
thick: {
[avatarGroupItemDividerWidthVar]: _reacttheme.tokens.strokeWidthThick
},
thicker: {
[avatarGroupItemDividerWidthVar]: _reacttheme.tokens.strokeWidthThicker
},
thickest: {
[avatarGroupItemDividerWidthVar]: _reacttheme.tokens.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

View File

@@ -0,0 +1,26 @@
'use client';
"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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nimport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nimport { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';\nimport type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';\n\n/**\n * The AvatarGroupPopover component provides a button with a Popover containing the children provided.\n */\nexport const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {\n const state = useAvatarGroupPopover_unstable(props);\n const contextValues = useAvatarGroupPopoverContextValues_unstable(state);\n\n useAvatarGroupPopoverStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state);\n\n return renderAvatarGroupPopover_unstable(state, contextValues);\n};\n\nAvatarGroupPopover.displayName = 'AvatarGroupPopover';\n"],"names":["React","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0CACmB,6BAA6B;oDACnB,uCAAuC;qCACvD,kCAAkC;uCAC/B,0BAA0B;mDACpB,uCAAuC;AAMrF,MAAMM,qBAAwDC,CAAAA;IACnE,MAAMC,YAAQJ,qDAAAA,EAA+BG;IAC7C,MAAME,oBAAgBP,+EAAAA,EAA4CM;QAElEH,uEAAAA,EAAqCG;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}

View File

@@ -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"));

View File

@@ -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\nexport type AvatarGroupPopoverBaseProps = AvatarGroupPopoverProps;\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\nexport type AvatarGroupPopoverBaseState = Omit<AvatarGroupPopoverState, 'size'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -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, {
AvatarGroupPopover: function() {
return _AvatarGroupPopover.AvatarGroupPopover;
},
avatarGroupPopoverClassNames: function() {
return _useAvatarGroupPopoverStylesstyles.avatarGroupPopoverClassNames;
},
renderAvatarGroupPopover_unstable: function() {
return _renderAvatarGroupPopover.renderAvatarGroupPopover_unstable;
},
useAvatarGroupPopoverBase_unstable: function() {
return _useAvatarGroupPopover.useAvatarGroupPopoverBase_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");

View File

@@ -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 AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverBase_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"mappings":";;;;;;;;;;;IAASA;qDAAkB;;IAWzBI;8EAA4B;;;eAHrBH,2DAAiC;;;eACDE,yDAAkC;;;eAKlEG,+EAA2C;;;eAFlDD,uEAAoC;;;eAH7BH,qDAA8B;;;oCATJ,uBAAuB;0CAQR,6BAA6B;uCACI,0BAA0B;mDAItG,uCAAuC;oDACc,uCAAuC"}

View File

@@ -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, {})
})
})
]
});
};

View File

@@ -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 type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverBaseState,\n contextValues: AvatarGroupContextValues,\n): JSXElement => {\n assertSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <state.root>\n <PopoverTrigger disableButtonEnhancement>\n <state.tooltip>\n <state.triggerButton />\n </state.tooltip>\n </PopoverTrigger>\n <state.popoverSurface>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.content />\n </AvatarGroupProvider>\n </state.popoverSurface>\n </state.root>\n );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":";;;;+BAaaG;;;;;;4BAZb,iCAAiD;oCACb,oCAAoC;gCAG5C,4BAA4B;8BAEzB,0BAA0B;AAMlD,0CAA0C,CAC/CC,OACAC;QAEAJ,2BAAAA,EAAqCG;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACJ,4BAAAA,EAAAA;gBAAeK,wBAAwB,EAAA;0BACtC,WAAA,OAAA,eAAA,EAACH,MAAMI,OAAO,EAAA;8BACZ,WAAA,OAAA,eAAA,EAACJ,MAAMK,aAAa,EAAA,CAAA;;;8BAGxB,eAAA,EAACL,MAAMM,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACV,uCAAAA,EAAAA;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,WAAA,OAAA,eAAA,EAACR,MAAMS,OAAO,EAAA,CAAA;;;;;AAKxB,EAAE"}

View File

@@ -0,0 +1,136 @@
'use client';
"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, {
useAvatarGroupPopoverBase_unstable: function() {
return useAvatarGroupPopoverBase_unstable;
},
useAvatarGroupPopover_unstable: 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', ...baseProps } = props;
const state = useAvatarGroupPopoverBase_unstable({
indicator,
...baseProps
});
if (layout === 'pie') {
state.triggerButton.children = null;
} else if (indicator === 'icon') {
state.triggerButton.children = /*#__PURE__*/ _react.createElement(_reacticons.MoreHorizontalRegular, null);
}
return {
size,
...state,
components: {
// eslint-disable-next-line @typescript-eslint/no-deprecated
...state.components,
root: _reactpopover.Popover,
popoverSurface: _reactpopover.PopoverSurface,
tooltip: _reacttooltip.Tooltip
},
root: _reactutilities.slot.always(state.root, {
elementType: _reactpopover.Popover
}),
popoverSurface: _reactutilities.slot.always(props.popoverSurface, {
defaultProps: state.popoverSurface,
elementType: _reactpopover.PopoverSurface
}),
tooltip: _reactutilities.slot.always(props.tooltip, {
defaultProps: state.tooltip,
elementType: _reacttooltip.Tooltip
})
};
};
const useAvatarGroupPopoverBase_unstable = (props)=>{
const layout = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.layout);
const { indicator = '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 === 'count') {
triggerButtonChildren = count > 99 ? '99+' : `+${count}`;
}
return {
count,
indicator,
layout,
popoverOpen,
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: 'div'
}),
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: 'div'
}),
tooltip: _reactutilities.slot.always(props.tooltip, {
defaultProps: {
content: 'View more people.',
relationship: 'label'
},
elementType: 'div'
})
};
};

File diff suppressed because one or more lines are too long

View File

@@ -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
};
};

View File

@@ -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"],"mappings":";;;;;;;;;;AAGO,MAAMA,8CAA8C,CACzDC;IAEA,MAAMC,cAAuC;QAC3CC,YAAY;QACZC,MAAM;IACR;IAEA,OAAO;QAAEF;IAAY;AACvB,EAAE"}

View File

@@ -0,0 +1,509 @@
'use client';
"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",
Bcq6wej: "fx5js7k",
Jcjdmf: [
"f17aelzi",
"f2tn0l4"
],
sc4o1m: "f14ood81",
Bosien3: [
"f2tn0l4",
"f17aelzi"
]
},
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){.fx5js7k{border-top-color:CanvasText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f17aelzi{border-right-color:CanvasText;}.f2tn0l4{border-left-color:CanvasText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f14ood81{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

View File

@@ -0,0 +1,205 @@
'use client';
"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 _reacttabster = require("@fluentui/react-tabster");
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
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 = (0, _react.makeStyles)({
base: {
listStyleType: 'none',
margin: '0',
padding: '0',
display: 'flex',
flexDirection: 'column'
}
});
/**
* Styles for the popoverSurface slot.
*/ const usePopoverSurfaceStyles = (0, _react.makeStyles)({
base: {
maxHeight: '220px',
minHeight: '80px',
overflow: 'hidden scroll',
padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`,
width: '220px'
}
});
/**
* Styles for the triggerButton slot.
*/ const useTriggerButtonStyles = (0, _react.makeStyles)({
base: {
display: 'inline-flex',
position: 'relative',
flexShrink: 0,
justifyContent: 'center',
alignItems: 'center',
color: _reacttheme.tokens.colorNeutralForeground1,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
borderRadius: _reacttheme.tokens.borderRadiusCircular,
..._react.shorthands.borderStyle('solid'),
padding: '0',
// Match color to Avatar's outline color.
'@media (forced-colors: active)': {
..._react.shorthands.borderColor('CanvasText')
}
},
pie: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke),
color: 'transparent'
},
focusIndicator: (0, _reacttabster.createCustomFocusIndicatorStyle)({
border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
outlineStyle: 'none'
}),
states: {
'&:hover': {
color: _reacttheme.tokens.colorNeutralForeground1Hover,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover)
},
'&:active': {
color: _reacttheme.tokens.colorNeutralForeground1Pressed,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed)
}
},
selected: {
color: _reacttheme.tokens.colorNeutralForeground1Selected,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
},
icon12: {
fontSize: '12px'
},
icon16: {
fontSize: '16px'
},
icon20: {
fontSize: '20px'
},
icon24: {
fontSize: '24px'
},
icon28: {
fontSize: '28px'
},
icon32: {
fontSize: '32px'
},
icon48: {
fontSize: '48px'
},
caption2Strong: {
..._reacttheme.typographyStyles.caption2Strong
},
caption1Strong: {
..._reacttheme.typographyStyles.caption1Strong
},
body1Strong: {
..._reacttheme.typographyStyles.body1Strong
},
subtitle2: {
..._reacttheme.typographyStyles.subtitle2
},
subtitle1: {
..._reacttheme.typographyStyles.subtitle1
},
title3: {
..._reacttheme.typographyStyles.title3
},
borderThin: {
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
},
borderThick: {
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThick)
},
borderThicker: {
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker)
},
borderThickest: {
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThickest)
}
});
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

View File

@@ -0,0 +1,28 @@
'use client';
"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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/AvatarContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarShape, AvatarSize } from '../components/Avatar/Avatar.types';\n\nconst avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport interface AvatarContextValue {\n shape?: AvatarShape;\n size?: AvatarSize;\n}\n\nconst avatarContextDefaultValue: AvatarContextValue = {};\n\n/**\n * @internal\n */\nexport const AvatarContextProvider = avatarContext.Provider;\n\n/**\n * @internal\n */\nexport const useAvatarContext = (): AvatarContextValue => React.useContext(avatarContext) ?? avatarContextDefaultValue;\n"],"names":["React","avatarContext","createContext","undefined","avatarContextDefaultValue","AvatarContextProvider","Provider","useAvatarContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;yBAoBaK;;;oBAKAE;;;;;iEAvBU,QAAQ;AAG/B,MAAMN,8BAAgBD,OAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAKhD,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAKrD,MAAMC,mBAAmB;QAA0BP;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,cAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAmCI;EAA0B"}

View File

@@ -0,0 +1,27 @@
'use client';
"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));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;sBAUaE;;;uBAMAG;;;kCAEAE;;;;sCAhBsD,mCAAmC;AAQ/F,MAAML,yBAAuDF,mCAAAA,EAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAE1D,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAExD,MAAMC,iCAAiC,CAAIC,eAChDP,wCAAAA,EAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}

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");

View File

@@ -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":["AvatarGroupContext","AvatarGroupProvider","useAvatarGroupContext_unstable","AvatarContextProvider","useAvatarContext"],"mappings":";;;;;;;;;;;;eAESG,oCAAqB;;;eAFrBH,sCAAkB;;;eAAEC,uCAAmB;;;eAEhBG,+BAAgB;;;eAFEF,kDAA8B;;;oCAAQ,uBAAuB;+BAEvD,kBAAkB"}

View File

@@ -0,0 +1,114 @@
"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;
},
useAvatarBase_unstable: function() {
return _Avatar.useAvatarBase_unstable;
},
useAvatarContext: function() {
return _index1.useAvatarContext;
},
useAvatarGroupBase_unstable: function() {
return _AvatarGroup.useAvatarGroupBase_unstable;
},
useAvatarGroupContextValues: function() {
return _AvatarGroup.useAvatarGroupContextValues;
},
useAvatarGroupContext_unstable: function() {
return _index1.useAvatarGroupContext_unstable;
},
useAvatarGroupItemBase_unstable: function() {
return _AvatarGroupItem.useAvatarGroupItemBase_unstable;
},
useAvatarGroupItemStyles_unstable: function() {
return _AvatarGroupItem.useAvatarGroupItemStyles_unstable;
},
useAvatarGroupItem_unstable: function() {
return _AvatarGroupItem.useAvatarGroupItem_unstable;
},
useAvatarGroupPopoverBase_unstable: function() {
return _AvatarGroupPopover.useAvatarGroupPopoverBase_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");

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 useAvatarBase_unstable,\n} from './Avatar';\nexport type {\n AvatarNamedColor,\n AvatarProps,\n AvatarSlots,\n AvatarState,\n AvatarShape,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSize,\n AvatarBaseProps,\n AvatarBaseState,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n useAvatarGroupBase_unstable,\n} from './AvatarGroup';\nexport type {\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupBaseProps,\n AvatarGroupBaseState,\n} from './AvatarGroup';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useAvatarGroupItemBase_unstable,\n} from './AvatarGroupItem';\nexport type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n AvatarGroupItemBaseProps,\n AvatarGroupItemBaseState,\n} from './AvatarGroupItem';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopoverBase_unstable,\n} from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './AvatarGroupPopover';\nexport {\n AvatarContextProvider,\n AvatarGroupProvider,\n useAvatarContext,\n useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarGroupBase_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useAvatarGroupItemBase_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverBase_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":";;;;;;;;;;;IACEA,MAAM;;;IAuEN4B,qBAAqB;;;;eAjDrBpB,wBAAW;;;eAkBXO,gCAAe;;;eAefM,sCAAkB;;;eAiBlBQ,2BAAmB;;;eAvEnB5B,wBAAgB;;;eAsBhBQ,kCAAqB;;6BAkBI;eAAzBO;;gCAe4B;eAA5BM;;IArCOhB;iCAAW;;;eAAEC,gCAAyB;;;eAuB7CU,+CAA8B;;IAe9BM;oEAAiC;;;eAjCjCb,uCAA0B;;;eAtB1BR,6BAAqB;;;eAGrBG,8BAAsB;;oBAoEN;eAAhByB;;;eA7CAhB,wCAA2B;;;eAH3BH,wCAA2B;;IAiD3BoB;qDAA8B;;;eA7B9BX,gDAA+B;;;eAF/BF,kDAAiC;;;eACjCC,4CAA2B;;;eAiB3BQ,sDAAkC;;IAFlCF;8EAA2C;;IAC3CC,oCAAoC;;;;eAFpCF,kDAA8B;;;eAhC9BZ,0CAA6B;;;eAC7BC,oCAAuB;;;eAxBvBV,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,WAAW;uBAaqC,gBAAgB;6BAUhE,gBAAgB;iCAiBhB,oBAAoB;oCAgBpB,uBAAuB;wBAavB,mBAAmB"}

View File

@@ -0,0 +1,89 @@
/**
* 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.
* Note: the range starts at \uE000 (not \uD800) to avoid matching surrogate code units, which would break
* supplementary Unicode characters (encoded as surrogate pairs in UTF-16) such as GB18030-2022 extension characters.
*/ const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uE000-\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.
* Note: Supplementary CJK characters (GB18030-2022 extension characters in Ext B-I) are intentionally not listed
* here so they can be rendered as initials.
*/ 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]/;
function getFirstCodePoint(value) {
if (!value) {
return '';
}
const codePoint = value.codePointAt(0);
return codePoint === undefined ? '' : String.fromCodePoint(codePoint);
}
function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
let initials = '';
const splits = displayName.split(' ');
if (splits.length !== 0) {
// Use code point-aware helper to correctly handle supplementary characters (e.g. GB18030-2022 extension chars)
// that are encoded as surrogate pairs; charAt(0) would only return half of such a character.
initials += getFirstCodePoint(splits[0]).toUpperCase();
}
if (!firstInitialOnly) {
if (splits.length === 2) {
initials += getFirstCodePoint(splits[1]).toUpperCase();
} else if (splits.length === 3) {
initials += getFirstCodePoint(splits[2]).toUpperCase();
}
}
if (isRtl && [
...initials
].length > 1) {
const chars = [
...initials
];
return chars[1] + chars[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);
// Check only the first code point against UNSUPPORTED_TEXT_REGEX so that names starting with a supported
// character (e.g. GB18030-2022 extension characters) produce an initial even when the rest of the string
// contains BMP CJK characters that would otherwise trigger the regex.
const firstCodePoint = getFirstCodePoint(displayName);
if (UNSUPPORTED_TEXT_REGEX.test(firstCodePoint) || !(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

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");

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"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eACXC,oDAAyB;;;6BADN,gBAAgB;2CACF,8BAA8B"}

View File

@@ -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
};
};

View File

@@ -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"],"mappings":"AAWA;;;;;;CAMC,GACD;;;;;;;;;;AAAO,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,cAAAA,AAAc,MAAA,QAAtBT,4BAAAA,KAAAA,IAAAA,0BAA0B;IACjD,MAAMU,cAAc,CAAED,CAAAA,iBAAkBR,CAAAA,MAAMM,MAAM,GAAGE,iBAAiB,IAAI,EAAA,CAAC;IAC7E,MAAMH,gBAAgBL,MAAMI,KAAK,CAAC,GAAGK;IAErC,OAAO;QACLN,aAAaH,MAAMI,KAAK,CAACK;QACzBJ,eAAeA,cAAcC,MAAM,GAAG,IAAID,gBAAgBE;IAC5D;AACF,EAAE"}

1
node_modules/@fluentui/react-avatar/lib/Avatar.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Avatar, DEFAULT_STRINGS, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, useAvatarBase_unstable, useSizeStyles } from './components/Avatar/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n AvatarNamedColor,\n AvatarBaseProps,\n AvatarProps,\n AvatarShape,\n AvatarSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSlots,\n AvatarBaseState,\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 useAvatarBase_unstable,\n useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","useSizeStyles"],"mappings":"AAYA,SACEA,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,aAAa,QACR,4BAA4B"}

View File

@@ -0,0 +1 @@
export { AvatarGroup, avatarGroupClassNames, defaultAvatarGroupSize, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable, useAvatarGroupBase_unstable } from './components/AvatarGroup/index';

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 AvatarGroupBaseProps,\n AvatarGroupBaseState,\n} from './components/AvatarGroup/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n defaultAvatarGroupSize,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n useAvatarGroupBase_unstable,\n} from './components/AvatarGroup/index';\n"],"names":["AvatarGroup","avatarGroupClassNames","defaultAvatarGroupSize","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","useAvatarGroupBase_unstable"],"mappings":"AASA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,sBAAsB,EACtBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,iCAAiC"}

View File

@@ -0,0 +1 @@
export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable, useGroupChildClassName, useAvatarGroupItemBase_unstable } from './components/AvatarGroupItem/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupItem.ts"],"sourcesContent":["export type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n AvatarGroupItemBaseProps,\n AvatarGroupItemBaseState,\n} from './components/AvatarGroupItem/index';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useGroupChildClassName,\n useAvatarGroupItemBase_unstable,\n} from './components/AvatarGroupItem/index';\n"],"names":["AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useGroupChildClassName","useAvatarGroupItemBase_unstable"],"mappings":"AAOA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,EAC3BC,sBAAsB,EACtBC,+BAA+B,QAC1B,qCAAqC"}

View File

@@ -0,0 +1 @@
export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopoverContextValues_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './components/AvatarGroupPopover/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/AvatarGroupPopover.ts"],"sourcesContent":["export type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n} from './components/AvatarGroupPopover/index';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopover_unstable,\n useAvatarGroupPopoverBase_unstable,\n} from './components/AvatarGroupPopover/index';\n"],"names":["AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverBase_unstable"],"mappings":"AAOA,SACEA,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,2CAA2C,EAC3CC,oCAAoC,EACpCC,8BAA8B,EAC9BC,kCAAkC,QAC7B,wCAAwC"}

View File

@@ -0,0 +1,13 @@
'use client';
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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;AAEA,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"}

View File

@@ -0,0 +1 @@
export { };

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,4 @@
export { Avatar } from './Avatar';
export { renderAvatar_unstable } from './renderAvatar';
export { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';
export { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';

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