@fluentui/react-avatar 9.0.4 → 9.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +214 -6
- package/CHANGELOG.md +52 -7
- package/README-AvatarGroup.md +63 -39
- package/SPEC-AvatarGroup.md +103 -85
- package/dist/index.d.ts +97 -64
- package/lib/AvatarGroupPopover.js +2 -0
- package/lib/AvatarGroupPopover.js.map +1 -0
- package/lib/components/Avatar/useAvatar.js +3 -7
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatarStyles.js +2 -2
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.js +4 -2
- package/lib/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib/components/AvatarGroup/index.js +1 -0
- package/lib/components/AvatarGroup/index.js.map +1 -1
- package/lib/components/AvatarGroup/renderAvatarGroup.js +5 -31
- package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js +4 -62
- package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js +14 -0
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -0
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js +5 -268
- package/lib/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js +10 -11
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js +51 -59
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js +16 -0
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -0
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js +2 -0
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -0
- package/lib/components/AvatarGroupPopover/index.js +6 -0
- package/lib/components/AvatarGroupPopover/index.js.map +1 -0
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +23 -0
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js +102 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +10 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +307 -0
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -0
- package/lib/contexts/AvatarGroupContext.js +7 -4
- package/lib/contexts/AvatarGroupContext.js.map +1 -1
- package/lib/index.js +4 -3
- package/lib/index.js.map +1 -1
- package/lib/utils/index.js +1 -0
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/partitionAvatarGroupItems.js +30 -0
- package/lib/utils/partitionAvatarGroupItems.js.map +1 -0
- package/lib-commonjs/{AvatarGroupOverflow.js → AvatarGroupPopover.js} +2 -2
- package/lib-commonjs/AvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/components/Avatar/useAvatar.js +2 -7
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js +2 -2
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.js +5 -2
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/index.js +2 -0
- package/lib-commonjs/components/AvatarGroup/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js +4 -32
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js +3 -64
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js +23 -0
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -0
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js +3 -268
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js +2 -2
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js +8 -9
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js +52 -60
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js +29 -0
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/{contexts/AvatarGroupContext.types.js → components/AvatarGroupPopover/AvatarGroupPopover.types.js} +1 -1
- package/lib-commonjs/{contexts/AvatarGroupContext.types.js.map → components/AvatarGroupPopover/AvatarGroupPopover.types.js.map} +0 -0
- package/lib-commonjs/components/AvatarGroupPopover/index.js +18 -0
- package/lib-commonjs/components/AvatarGroupPopover/index.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js +36 -0
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js +118 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +19 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +321 -0
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -0
- package/lib-commonjs/contexts/AvatarGroupContext.js +10 -4
- package/lib-commonjs/contexts/AvatarGroupContext.js.map +1 -1
- package/lib-commonjs/index.js +60 -4
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/index.js +10 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/partitionAvatarGroupItems.js +39 -0
- package/lib-commonjs/utils/partitionAvatarGroupItems.js.map +1 -0
- package/package.json +14 -12
- package/MIGRATION-AvatarGroup.md +0 -35
- package/dist/tsdoc-metadata.json +0 -11
- package/lib/AvatarGroupOverflow.js +0 -2
- package/lib/AvatarGroupOverflow.js.map +0 -1
- package/lib/components/AvatarGroupOverflow/AvatarGroupOverflow.js +0 -15
- package/lib/components/AvatarGroupOverflow/AvatarGroupOverflow.js.map +0 -1
- package/lib/components/AvatarGroupOverflow/AvatarGroupOverflow.types.js +0 -2
- package/lib/components/AvatarGroupOverflow/AvatarGroupOverflow.types.js.map +0 -1
- package/lib/components/AvatarGroupOverflow/index.js +0 -6
- package/lib/components/AvatarGroupOverflow/index.js.map +0 -1
- package/lib/components/AvatarGroupOverflow/renderAvatarGroupOverflow.js +0 -16
- package/lib/components/AvatarGroupOverflow/renderAvatarGroupOverflow.js.map +0 -1
- package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflow.js +0 -27
- package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflow.js.map +0 -1
- package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.js +0 -27
- package/lib/components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.js.map +0 -1
- package/lib/contexts/AvatarGroupContext.types.js +0 -2
- package/lib/contexts/AvatarGroupContext.types.js.map +0 -1
- package/lib-commonjs/AvatarGroupOverflow.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupOverflow/AvatarGroupOverflow.js +0 -26
- package/lib-commonjs/components/AvatarGroupOverflow/AvatarGroupOverflow.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupOverflow/AvatarGroupOverflow.types.js +0 -6
- package/lib-commonjs/components/AvatarGroupOverflow/AvatarGroupOverflow.types.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupOverflow/index.js +0 -18
- package/lib-commonjs/components/AvatarGroupOverflow/index.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupOverflow/renderAvatarGroupOverflow.js +0 -27
- package/lib-commonjs/components/AvatarGroupOverflow/renderAvatarGroupOverflow.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupOverflow/useAvatarGroupOverflow.js +0 -37
- package/lib-commonjs/components/AvatarGroupOverflow/useAvatarGroupOverflow.js.map +0 -1
- package/lib-commonjs/components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.js +0 -37
- package/lib-commonjs/components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.js.map +0 -1
package/MIGRATION-AvatarGroup.md
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# AvatarGroup Migration
|
|
2
|
-
|
|
3
|
-
## Migration from v0
|
|
4
|
-
|
|
5
|
-
`v0` does not have a component similar to `AvatarGroup`.
|
|
6
|
-
|
|
7
|
-
## Migration from v8
|
|
8
|
-
|
|
9
|
-
AvatarGroup and Facepile have similar APIs, but the main difference is how they interact with AvatarGroupItem/Persona. AvatarGroup receives AvatarGroupItems as children and places them in their respective place, this means AvatarGroup has no control over AvatarGroupItem. `size` is the only property of AvatarGroupItem that is modified by AvatarGroup to make all AvatarGroupItems the same size. Face adding functionality is not supported.
|
|
10
|
-
|
|
11
|
-
Avatars must not be used inside an AvatarGroup, instead AvatarGroupItems are used since it has extra functionality used only in AvatarGroups. This includes adding a label when the AvatarGroupItem is rendered in the overflow Popover and specific styling for each layout.
|
|
12
|
-
|
|
13
|
-
AvatarGroup has extra functionality that Facepile does not have, this includes:
|
|
14
|
-
- When the AvatarGroupItems are overflowing, a Popover is rendered that contains all the overflowed AvatarGroupItems. The Popover is triggered when the overflow button is clicked.
|
|
15
|
-
- AvatarGroup supports three layouts: `spread` (default), `stack`, and `pie`.
|
|
16
|
-
|
|
17
|
-
## Property mapping
|
|
18
|
-
|
|
19
|
-
| v8 `Facepile` | v9 `AvatarGroup` |
|
|
20
|
-
| ------------------------ | -------------------------------------------------------- |
|
|
21
|
-
| `personas` | `children` |
|
|
22
|
-
| `addButtonProps` | - |
|
|
23
|
-
| `className` | `className` |
|
|
24
|
-
| `getPersonaProps` | `AvatarGroupItem`'s props |
|
|
25
|
-
| `maxDisplayablePersonas` | `maxAvatars` |
|
|
26
|
-
| `onRenderPersona` | Render function for the AvatarGroupItem |
|
|
27
|
-
| `onRenderPersonaCoin` | Render function for the `avatar` slot in AvatarGroupItem |
|
|
28
|
-
| `onRenderPersonaWrapper` | - |
|
|
29
|
-
| `overflowButtonProps` | `overflowButton` slot props |
|
|
30
|
-
| `overflowButtonType` | `overflowIndicator` |
|
|
31
|
-
| `overflowPersonas` | - |
|
|
32
|
-
| `personaSize` | `size` |
|
|
33
|
-
| `showAddButton` | - |
|
|
34
|
-
| `showTooltip` | - |
|
|
35
|
-
| `styles` | (theme) |
|
package/dist/tsdoc-metadata.json
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
|
|
2
|
-
// It should be published with your NPM package. It should not be tracked by Git.
|
|
3
|
-
{
|
|
4
|
-
"tsdocVersion": "0.12",
|
|
5
|
-
"toolPackages": [
|
|
6
|
-
{
|
|
7
|
-
"packageName": "@microsoft/api-extractor",
|
|
8
|
-
"packageVersion": "7.18.1"
|
|
9
|
-
}
|
|
10
|
-
]
|
|
11
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupOverflow.js","sourceRoot":"../src/","sources":["AvatarGroupOverflow.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC","sourcesContent":["export * from './components/AvatarGroupOverflow/index';\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useAvatarGroupOverflow_unstable } from './useAvatarGroupOverflow';
|
|
3
|
-
import { renderAvatarGroupOverflow_unstable } from './renderAvatarGroupOverflow';
|
|
4
|
-
import { useAvatarGroupOverflowStyles_unstable } from './useAvatarGroupOverflowStyles';
|
|
5
|
-
/**
|
|
6
|
-
* AvatarGroupOverflow component - TODO: add more docs
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export const AvatarGroupOverflow = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
-
const state = useAvatarGroupOverflow_unstable(props, ref);
|
|
11
|
-
useAvatarGroupOverflowStyles_unstable(state);
|
|
12
|
-
return renderAvatarGroupOverflow_unstable(state);
|
|
13
|
-
});
|
|
14
|
-
AvatarGroupOverflow.displayName = 'AvatarGroupOverflow';
|
|
15
|
-
//# sourceMappingURL=AvatarGroupOverflow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AACA,SAAS,qCAAT,QAAsD,gCAAtD;AAIA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,qCAAqC,CAAC,KAAD,CAArC;EACA,OAAO,kCAAkC,CAAC,KAAD,CAAzC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupOverflow_unstable } from './useAvatarGroupOverflow';\nimport { renderAvatarGroupOverflow_unstable } from './renderAvatarGroupOverflow';\nimport { useAvatarGroupOverflowStyles_unstable } from './useAvatarGroupOverflowStyles';\nimport type { AvatarGroupOverflowProps } from './AvatarGroupOverflow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * AvatarGroupOverflow component - TODO: add more docs\n */\nexport const AvatarGroupOverflow: ForwardRefComponent<AvatarGroupOverflowProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupOverflow_unstable(props, ref);\n\n useAvatarGroupOverflowStyles_unstable(state);\n return renderAvatarGroupOverflow_unstable(state);\n});\n\nAvatarGroupOverflow.displayName = 'AvatarGroupOverflow';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/AvatarGroupOverflow.types.ts"],"names":[],"mappings":"WAeA","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupOverflowSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * AvatarGroupOverflow Props\n */\nexport type AvatarGroupOverflowProps = ComponentProps<AvatarGroupOverflowSlots> & {};\n\n/**\n * State used in rendering AvatarGroupOverflow\n */\nexport type AvatarGroupOverflowState = ComponentState<AvatarGroupOverflowSlots>;\n// & Required<Pick<AvatarGroupOverflowProps, 'propName'>>\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AvatarGroupOverflow/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './AvatarGroupOverflow';\nexport * from './AvatarGroupOverflow.types';\nexport * from './renderAvatarGroupOverflow';\nexport * from './useAvatarGroupOverflow';\nexport * from './useAvatarGroupOverflowStyles';\n"]}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { getSlots } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Render the final JSX of AvatarGroupOverflow
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
export const renderAvatarGroupOverflow_unstable = state => {
|
|
8
|
-
const {
|
|
9
|
-
slots,
|
|
10
|
-
slotProps
|
|
11
|
-
} = getSlots(state); // TODO Add additional slots in the appropriate place
|
|
12
|
-
|
|
13
|
-
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
14
|
-
});
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=renderAvatarGroupOverflow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/renderAvatarGroupOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAoC;EACpF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA2B,KAA3B,CAArC,CADoF,CAGpF;;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupOverflowState, AvatarGroupOverflowSlots } from './AvatarGroupOverflow.types';\n\n/**\n * Render the final JSX of AvatarGroupOverflow\n */\nexport const renderAvatarGroupOverflow_unstable = (state: AvatarGroupOverflowState) => {\n const { slots, slotProps } = getSlots<AvatarGroupOverflowSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
2
|
-
/**
|
|
3
|
-
* Create the state required to render AvatarGroupOverflow.
|
|
4
|
-
*
|
|
5
|
-
* The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,
|
|
6
|
-
* before being passed to renderAvatarGroupOverflow_unstable.
|
|
7
|
-
*
|
|
8
|
-
* @param props - props from this instance of AvatarGroupOverflow
|
|
9
|
-
* @param ref - reference to root HTMLElement of AvatarGroupOverflow
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
export const useAvatarGroupOverflow_unstable = (props, ref) => {
|
|
13
|
-
return {
|
|
14
|
-
// TODO add appropriate props/defaults
|
|
15
|
-
components: {
|
|
16
|
-
// TODO add each slot's element type or component
|
|
17
|
-
root: 'div'
|
|
18
|
-
},
|
|
19
|
-
// TODO add appropriate slots, for example:
|
|
20
|
-
// mySlot: resolveShorthand(props.mySlot),
|
|
21
|
-
root: getNativeElementProps('div', {
|
|
22
|
-
ref,
|
|
23
|
-
...props
|
|
24
|
-
})
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=useAvatarGroupOverflow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/useAvatarGroupOverflow.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,OAAO;IACL;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAFP;IAML;IACA;IACA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR;EARtB,CAAP;AAaD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupOverflowProps, AvatarGroupOverflowState } from './AvatarGroupOverflow.types';\n\n/**\n * Create the state required to render AvatarGroupOverflow.\n *\n * The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,\n * before being passed to renderAvatarGroupOverflow_unstable.\n *\n * @param props - props from this instance of AvatarGroupOverflow\n * @param ref - reference to root HTMLElement of AvatarGroupOverflow\n */\nexport const useAvatarGroupOverflow_unstable = (\n props: AvatarGroupOverflowProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupOverflowState => {\n return {\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
-
export const avatarGroupOverflowClassName = 'fui-AvatarGroupOverflow';
|
|
3
|
-
export const avatarGroupOverflowClassNames = {
|
|
4
|
-
root: 'fui-AvatarGroupOverflow' // TODO: add class names for all slots on AvatarGroupOverflowSlots.
|
|
5
|
-
// Should be of the form `<slotName>: 'fui-AvatarGroupOverflow__<slotName>`
|
|
6
|
-
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Styles for the root slot
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
const useStyles = /*#__PURE__*/__styles({
|
|
13
|
-
"root": {}
|
|
14
|
-
}, {});
|
|
15
|
-
/**
|
|
16
|
-
* Apply styling to the AvatarGroupOverflow slots based on the state
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
export const useAvatarGroupOverflowStyles_unstable = state => {
|
|
21
|
-
const styles = useStyles();
|
|
22
|
-
state.root.className = mergeClasses(avatarGroupOverflowClassName, styles.root, state.root.className); // TODO Add class names to slots, for example:
|
|
23
|
-
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
24
|
-
|
|
25
|
-
return state;
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=useAvatarGroupOverflowStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,4BAA4B,GAAG,yBAArC;AACP,OAAO,MAAM,6BAA6B,GAA6C;EACrF,IAAI,EAAE,yBAD+E,CAErF;EACA;;AAHqF,CAAhF;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,qCAAqC,GAAI,KAAD,IAA8D;EACjH,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,4BAAD,EAA+B,MAAM,CAAC,IAAtC,EAA4C,KAAK,CAAC,IAAN,CAAW,SAAvD,CAAnC,CAFiH,CAIjH;EACA;;EAEA,OAAO,KAAP;AACD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { AvatarGroupOverflowSlots, AvatarGroupOverflowState } from './AvatarGroupOverflow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupOverflowClassName = 'fui-AvatarGroupOverflow';\nexport const avatarGroupOverflowClassNames: SlotClassNames<AvatarGroupOverflowSlots> = {\n root: 'fui-AvatarGroupOverflow',\n // TODO: add class names for all slots on AvatarGroupOverflowSlots.\n // Should be of the form `<slotName>: 'fui-AvatarGroupOverflow__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n // TODO Add default styles for the root element\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroupOverflow slots based on the state\n */\nexport const useAvatarGroupOverflowStyles_unstable = (state: AvatarGroupOverflowState): AvatarGroupOverflowState => {\n const styles = useStyles();\n state.root.className = mergeClasses(avatarGroupOverflowClassName, styles.root, state.root.className);\n\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupContext.types.js","sourceRoot":"../src/","sources":["contexts/AvatarGroupContext.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarGroupProps } from '../AvatarGroup';\n\nexport type AvatarGroupContextValue = Pick<AvatarGroupProps, 'size' | 'layout'> & {\n isOverflow?: boolean;\n nonOverflowAvatarsCount?: number;\n};\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["AvatarGroupOverflow.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/AvatarGroupOverflow/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.AvatarGroupOverflow = void 0;
|
|
7
|
-
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
|
-
const useAvatarGroupOverflow_1 = /*#__PURE__*/require("./useAvatarGroupOverflow");
|
|
11
|
-
|
|
12
|
-
const renderAvatarGroupOverflow_1 = /*#__PURE__*/require("./renderAvatarGroupOverflow");
|
|
13
|
-
|
|
14
|
-
const useAvatarGroupOverflowStyles_1 = /*#__PURE__*/require("./useAvatarGroupOverflowStyles");
|
|
15
|
-
/**
|
|
16
|
-
* AvatarGroupOverflow component - TODO: add more docs
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
exports.AvatarGroupOverflow = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
|
-
const state = useAvatarGroupOverflow_1.useAvatarGroupOverflow_unstable(props, ref);
|
|
22
|
-
useAvatarGroupOverflowStyles_1.useAvatarGroupOverflowStyles_unstable(state);
|
|
23
|
-
return renderAvatarGroupOverflow_1.renderAvatarGroupOverflow_unstable(state);
|
|
24
|
-
});
|
|
25
|
-
exports.AvatarGroupOverflow.displayName = 'AvatarGroupOverflow';
|
|
26
|
-
//# sourceMappingURL=AvatarGroupOverflow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/AvatarGroupOverflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,2BAAA,CAAA,kCAAA,CAAmC,KAAnC,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport { useAvatarGroupOverflow_unstable } from './useAvatarGroupOverflow';\nimport { renderAvatarGroupOverflow_unstable } from './renderAvatarGroupOverflow';\nimport { useAvatarGroupOverflowStyles_unstable } from './useAvatarGroupOverflowStyles';\nimport type { AvatarGroupOverflowProps } from './AvatarGroupOverflow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * AvatarGroupOverflow component - TODO: add more docs\n */\nexport const AvatarGroupOverflow: ForwardRefComponent<AvatarGroupOverflowProps> = React.forwardRef((props, ref) => {\n const state = useAvatarGroupOverflow_unstable(props, ref);\n\n useAvatarGroupOverflowStyles_unstable(state);\n return renderAvatarGroupOverflow_unstable(state);\n});\n\nAvatarGroupOverflow.displayName = 'AvatarGroupOverflow';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/AvatarGroupOverflow.types.ts"],"names":[],"mappings":";;;;IAeA","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarGroupOverflowSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * AvatarGroupOverflow Props\n */\nexport type AvatarGroupOverflowProps = ComponentProps<AvatarGroupOverflowSlots> & {};\n\n/**\n * State used in rendering AvatarGroupOverflow\n */\nexport type AvatarGroupOverflowState = ComponentState<AvatarGroupOverflowSlots>;\n// & Required<Pick<AvatarGroupOverflowProps, 'propName'>>\n"],"sourceRoot":"../src/"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
|
-
tslib_1.__exportStar(require("./AvatarGroupOverflow"), exports);
|
|
10
|
-
|
|
11
|
-
tslib_1.__exportStar(require("./AvatarGroupOverflow.types"), exports);
|
|
12
|
-
|
|
13
|
-
tslib_1.__exportStar(require("./renderAvatarGroupOverflow"), exports);
|
|
14
|
-
|
|
15
|
-
tslib_1.__exportStar(require("./useAvatarGroupOverflow"), exports);
|
|
16
|
-
|
|
17
|
-
tslib_1.__exportStar(require("./useAvatarGroupOverflowStyles"), exports);
|
|
18
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './AvatarGroupOverflow';\nexport * from './AvatarGroupOverflow.types';\nexport * from './renderAvatarGroupOverflow';\nexport * from './useAvatarGroupOverflow';\nexport * from './useAvatarGroupOverflowStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.renderAvatarGroupOverflow_unstable = void 0;
|
|
7
|
-
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
-
/**
|
|
12
|
-
* Render the final JSX of AvatarGroupOverflow
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const renderAvatarGroupOverflow_unstable = state => {
|
|
17
|
-
const {
|
|
18
|
-
slots,
|
|
19
|
-
slotProps
|
|
20
|
-
} = react_utilities_1.getSlots(state); // TODO Add additional slots in the appropriate place
|
|
21
|
-
|
|
22
|
-
return React.createElement(slots.root, { ...slotProps.root
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
exports.renderAvatarGroupOverflow_unstable = renderAvatarGroupOverflow_unstable;
|
|
27
|
-
//# sourceMappingURL=renderAvatarGroupOverflow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/renderAvatarGroupOverflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kCAAkC,GAAI,KAAD,IAAoC;EACpF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAmC,KAAnC,CAA7B,CADoF,CAGpF;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarGroupOverflowState, AvatarGroupOverflowSlots } from './AvatarGroupOverflow.types';\n\n/**\n * Render the final JSX of AvatarGroupOverflow\n */\nexport const renderAvatarGroupOverflow_unstable = (state: AvatarGroupOverflowState) => {\n const { slots, slotProps } = getSlots<AvatarGroupOverflowSlots>(state);\n\n // TODO Add additional slots in the appropriate place\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useAvatarGroupOverflow_unstable = void 0;
|
|
7
|
-
|
|
8
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
/**
|
|
10
|
-
* Create the state required to render AvatarGroupOverflow.
|
|
11
|
-
*
|
|
12
|
-
* The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,
|
|
13
|
-
* before being passed to renderAvatarGroupOverflow_unstable.
|
|
14
|
-
*
|
|
15
|
-
* @param props - props from this instance of AvatarGroupOverflow
|
|
16
|
-
* @param ref - reference to root HTMLElement of AvatarGroupOverflow
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const useAvatarGroupOverflow_unstable = (props, ref) => {
|
|
21
|
-
return {
|
|
22
|
-
// TODO add appropriate props/defaults
|
|
23
|
-
components: {
|
|
24
|
-
// TODO add each slot's element type or component
|
|
25
|
-
root: 'div'
|
|
26
|
-
},
|
|
27
|
-
// TODO add appropriate slots, for example:
|
|
28
|
-
// mySlot: resolveShorthand(props.mySlot),
|
|
29
|
-
root: react_utilities_1.getNativeElementProps('div', {
|
|
30
|
-
ref,
|
|
31
|
-
...props
|
|
32
|
-
})
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
exports.useAvatarGroupOverflow_unstable = useAvatarGroupOverflow_unstable;
|
|
37
|
-
//# sourceMappingURL=useAvatarGroupOverflow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/useAvatarGroupOverflow.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,OAAO;IACL;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAFP;IAML;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B;EARD,CAAP;AAaD,CAjBM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { AvatarGroupOverflowProps, AvatarGroupOverflowState } from './AvatarGroupOverflow.types';\n\n/**\n * Create the state required to render AvatarGroupOverflow.\n *\n * The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,\n * before being passed to renderAvatarGroupOverflow_unstable.\n *\n * @param props - props from this instance of AvatarGroupOverflow\n * @param ref - reference to root HTMLElement of AvatarGroupOverflow\n */\nexport const useAvatarGroupOverflow_unstable = (\n props: AvatarGroupOverflowProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupOverflowState => {\n return {\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useAvatarGroupOverflowStyles_unstable = exports.avatarGroupOverflowClassNames = exports.avatarGroupOverflowClassName = void 0;
|
|
7
|
-
|
|
8
|
-
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
-
|
|
10
|
-
exports.avatarGroupOverflowClassName = 'fui-AvatarGroupOverflow';
|
|
11
|
-
exports.avatarGroupOverflowClassNames = {
|
|
12
|
-
root: 'fui-AvatarGroupOverflow' // TODO: add class names for all slots on AvatarGroupOverflowSlots.
|
|
13
|
-
// Should be of the form `<slotName>: 'fui-AvatarGroupOverflow__<slotName>`
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
/**
|
|
17
|
-
* Styles for the root slot
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
21
|
-
"root": {}
|
|
22
|
-
}, {});
|
|
23
|
-
/**
|
|
24
|
-
* Apply styling to the AvatarGroupOverflow slots based on the state
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const useAvatarGroupOverflowStyles_unstable = state => {
|
|
29
|
-
const styles = useStyles();
|
|
30
|
-
state.root.className = react_1.mergeClasses(exports.avatarGroupOverflowClassName, styles.root, state.root.className); // TODO Add class names to slots, for example:
|
|
31
|
-
// state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
|
|
32
|
-
|
|
33
|
-
return state;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
exports.useAvatarGroupOverflowStyles_unstable = useAvatarGroupOverflowStyles_unstable;
|
|
37
|
-
//# sourceMappingURL=useAvatarGroupOverflowStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AvatarGroupOverflow/useAvatarGroupOverflowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,4BAAA,GAA+B,yBAA/B;AACA,OAAA,CAAA,6BAAA,GAA0E;EACrF,IAAI,EAAE,yBAD+E,CAErF;EACA;;AAHqF,CAA1E;AAMb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;AAAA,MAAlB;AAQA;;AAEG;;;AACI,MAAM,qCAAqC,GAAI,KAAD,IAA8D;EACjH,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,4BAAb,EAA2C,MAAM,CAAC,IAAlD,EAAwD,KAAK,CAAC,IAAN,CAAW,SAAnE,CAAvB,CAFiH,CAIjH;EACA;;EAEA,OAAO,KAAP;AACD,CARM;;AAAM,OAAA,CAAA,qCAAA,GAAqC,qCAArC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { AvatarGroupOverflowSlots, AvatarGroupOverflowState } from './AvatarGroupOverflow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupOverflowClassName = 'fui-AvatarGroupOverflow';\nexport const avatarGroupOverflowClassNames: SlotClassNames<AvatarGroupOverflowSlots> = {\n root: 'fui-AvatarGroupOverflow',\n // TODO: add class names for all slots on AvatarGroupOverflowSlots.\n // Should be of the form `<slotName>: 'fui-AvatarGroupOverflow__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n // TODO Add default styles for the root element\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the AvatarGroupOverflow slots based on the state\n */\nexport const useAvatarGroupOverflowStyles_unstable = (state: AvatarGroupOverflowState): AvatarGroupOverflowState => {\n const styles = useStyles();\n state.root.className = mergeClasses(avatarGroupOverflowClassName, styles.root, state.root.className);\n\n // TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|