@fluentui/react-avatar 9.10.4 → 9.11.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.md +34 -2
- package/dist/index.d.ts +56 -6
- package/lib/AvatarGroup.js +1 -1
- package/lib/AvatarGroup.js.map +1 -1
- package/lib/AvatarGroupItem.js +1 -1
- package/lib/AvatarGroupItem.js.map +1 -1
- package/lib/AvatarGroupPopover.js +1 -1
- package/lib/AvatarGroupPopover.js.map +1 -1
- package/lib/components/Avatar/Avatar.types.js.map +1 -1
- package/lib/components/Avatar/renderAvatar.js.map +1 -1
- package/lib/components/Avatar/useAvatar.js +5 -7
- package/lib/components/Avatar/useAvatar.js.map +1 -1
- package/lib/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib/components/AvatarGroup/index.js +1 -1
- package/lib/components/AvatarGroup/index.js.map +1 -1
- package/lib/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroup.js +17 -10
- package/lib/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js +7 -2
- package/lib/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
- package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js +1 -3
- package/lib/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
- package/lib/components/AvatarGroupItem/index.js +1 -1
- package/lib/components/AvatarGroupItem/index.js.map +1 -1
- package/lib/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js +33 -8
- package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js +0 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js +1 -1
- package/lib/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -1
- package/lib/components/AvatarGroupPopover/index.js +1 -1
- package/lib/components/AvatarGroupPopover/index.js.map +1 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js +49 -11
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +6 -4
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
- package/lib/contexts/AvatarGroupContext.js.map +1 -1
- package/lib/index.js +4 -7
- package/lib/index.js.map +1 -1
- package/lib/utils/getInitials.js +32 -12
- package/lib/utils/getInitials.js.map +1 -1
- package/lib-commonjs/AvatarGroup.js +3 -0
- package/lib-commonjs/AvatarGroup.js.map +1 -1
- package/lib-commonjs/AvatarGroupItem.js +3 -0
- package/lib-commonjs/AvatarGroupItem.js.map +1 -1
- package/lib-commonjs/AvatarGroupPopover.js +3 -0
- package/lib-commonjs/AvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/Avatar/Avatar.types.js.map +1 -1
- package/lib-commonjs/components/Avatar/renderAvatar.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatar.js +5 -7
- package/lib-commonjs/components/Avatar/useAvatar.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/AvatarGroup.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/index.js +3 -0
- package/lib-commonjs/components/AvatarGroup/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/renderAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js +15 -11
- package/lib-commonjs/components/AvatarGroup/useAvatarGroup.js.map +1 -1
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js +8 -2
- package/lib-commonjs/components/AvatarGroup/useAvatarGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.types.js +1 -3
- package/lib-commonjs/components/AvatarGroupItem/AvatarGroupItem.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/index.js +3 -0
- package/lib-commonjs/components/AvatarGroupItem/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/renderAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js +35 -12
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js +0 -2
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.types.js +0 -2
- package/lib-commonjs/components/AvatarGroupPopover/AvatarGroupPopover.types.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/index.js +3 -0
- package/lib-commonjs/components/AvatarGroupPopover/index.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js +54 -14
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js +7 -4
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.js.map +1 -1
- package/lib-commonjs/contexts/AvatarGroupContext.js.map +1 -1
- package/lib-commonjs/index.js +12 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/getInitials.js +32 -12
- package/lib-commonjs/utils/getInitials.js.map +1 -1
- package/package.json +8 -8
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { Avatar } from '../Avatar/Avatar';
|
|
4
3
|
import { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';
|
|
5
4
|
import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
|
|
@@ -14,12 +13,41 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
|
|
|
14
13
|
* @param props - props from this instance of AvatarGroupItem
|
|
15
14
|
* @param ref - reference to root HTMLElement of AvatarGroupItem
|
|
16
15
|
*/ export const useAvatarGroupItem_unstable = (props, ref)=>{
|
|
17
|
-
const
|
|
16
|
+
const state = useAvatarGroupItemBase_unstable(props, ref);
|
|
18
17
|
const groupSize = useAvatarGroupContext_unstable((ctx)=>ctx.size);
|
|
18
|
+
const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
|
|
19
|
+
return {
|
|
20
|
+
size,
|
|
21
|
+
...state,
|
|
22
|
+
components: {
|
|
23
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
24
|
+
...state.components,
|
|
25
|
+
avatar: Avatar
|
|
26
|
+
},
|
|
27
|
+
avatar: slot.always(props.avatar, {
|
|
28
|
+
defaultProps: {
|
|
29
|
+
size,
|
|
30
|
+
color: 'colorful',
|
|
31
|
+
...state.avatar
|
|
32
|
+
},
|
|
33
|
+
elementType: Avatar
|
|
34
|
+
})
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* Create the base state required to render AvatarGroupItem, without default slot props or component types.
|
|
39
|
+
*
|
|
40
|
+
* The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
|
|
41
|
+
* before being passed to renderAvatarGroupItem_unstable.
|
|
42
|
+
*
|
|
43
|
+
* @param props - props from this instance of AvatarGroupItem
|
|
44
|
+
* @param ref - reference to root HTMLElement of AvatarGroupItem
|
|
45
|
+
* @returns AvatarGroupItem state without default slot props or component types
|
|
46
|
+
*/ export const useAvatarGroupItemBase_unstable = (props, ref)=>{
|
|
47
|
+
const groupIsOverflow = useAvatarGroupContext_unstable((ctx)=>ctx.isOverflow);
|
|
19
48
|
const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
|
|
20
49
|
// Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
|
|
21
50
|
const { style, className, overflowLabel, ...avatarSlotProps } = props;
|
|
22
|
-
const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
|
|
23
51
|
const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
|
|
24
52
|
if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
|
|
25
53
|
// eslint-disable-next-line no-console
|
|
@@ -28,10 +56,9 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
|
|
|
28
56
|
return {
|
|
29
57
|
isOverflowItem: groupIsOverflow,
|
|
30
58
|
layout,
|
|
31
|
-
size,
|
|
32
59
|
components: {
|
|
33
60
|
root: groupIsOverflow ? 'li' : 'div',
|
|
34
|
-
avatar:
|
|
61
|
+
avatar: 'span',
|
|
35
62
|
overflowLabel: 'span'
|
|
36
63
|
},
|
|
37
64
|
root: slot.always(props.root, {
|
|
@@ -44,11 +71,9 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
|
|
|
44
71
|
avatar: slot.always(props.avatar, {
|
|
45
72
|
defaultProps: {
|
|
46
73
|
ref,
|
|
47
|
-
size,
|
|
48
|
-
color: 'colorful',
|
|
49
74
|
...avatarSlotProps
|
|
50
75
|
},
|
|
51
|
-
elementType:
|
|
76
|
+
elementType: 'span'
|
|
52
77
|
}),
|
|
53
78
|
overflowLabel: slot.always(overflowLabel, {
|
|
54
79
|
defaultProps: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type {\n AvatarGroupItemBaseProps,\n AvatarGroupItemBaseState,\n AvatarGroupItemProps,\n AvatarGroupItemState,\n} from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n props: AvatarGroupItemProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n const state = useAvatarGroupItemBase_unstable(props, ref);\n const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n const size = groupSize ?? defaultAvatarGroupSize;\n\n return {\n size,\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n avatar: Avatar,\n },\n avatar: slot.always(props.avatar, {\n defaultProps: { size, color: 'colorful', ...state.avatar },\n elementType: Avatar,\n }),\n };\n};\n\n/**\n * Create the base state required to render AvatarGroupItem, without default slot props or component types.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n * @returns AvatarGroupItem state without default slot props or component types\n */\nexport const useAvatarGroupItemBase_unstable = (\n props: AvatarGroupItemBaseProps,\n ref: React.Ref<HTMLElement>,\n): AvatarGroupItemBaseState => {\n const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n const { style, className, overflowLabel, ...avatarSlotProps } = props;\n const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n // eslint-disable-next-line no-console\n console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n }\n\n return {\n isOverflowItem: groupIsOverflow,\n layout,\n components: {\n root: groupIsOverflow ? 'li' : 'div',\n avatar: 'span',\n overflowLabel: 'span',\n },\n root: slot.always(props.root, {\n defaultProps: {\n style,\n className,\n },\n elementType: groupIsOverflow ? 'li' : 'div',\n }),\n avatar: slot.always(props.avatar, {\n defaultProps: {\n ref,\n ...avatarSlotProps,\n },\n elementType: 'span',\n }),\n overflowLabel: slot.always(overflowLabel, {\n defaultProps: {\n // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n 'aria-hidden': true,\n children: props.name,\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","state","useAvatarGroupItemBase_unstable","groupSize","ctx","size","components","avatar","always","defaultProps","color","elementType","groupIsOverflow","isOverflow","layout","style","className","overflowLabel","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","root","children","name"],"mappings":"AAAA;AAGA,SAASA,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,mBAAmB,QAAQ,mCAAmC;AAQvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IACrD,MAAMG,YAAYT,+BAA+BU,CAAAA,MAAOA,IAAIC,IAAI;IAChE,MAAMA,OAAOF,sBAAAA,uBAAAA,YAAaR;IAE1B,OAAO;QACLU;QACA,GAAGJ,KAAK;QACRK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,MAAMK,UAAU;YACnBC,QAAQf;QACV;QACAe,QAAQX,KAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBAAEJ;gBAAMK,OAAO;gBAAY,GAAGT,MAAMM,MAAM;YAAC;YACzDI,aAAanB;QACf;IACF;AACF,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,MAAMU,kCAAkC,CAC7CH,OACAC;IAEA,MAAMY,kBAAkBlB,+BAA+BU,CAAAA,MAAOA,IAAIS,UAAU;IAC5E,MAAMC,SAASpB,+BAA+BU,CAAAA,MAAOA,IAAIU,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,iBAAiB,GAAGnB;IAChE,MAAMoB,wBAAwBtB,oBAAoBJ;IAElD,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBb;QAChBE;QACAR,YAAY;YACVoB,MAAMd,kBAAkB,OAAO;YAC/BL,QAAQ;YACRU,eAAe;QACjB;QACAS,MAAM9B,KAAKY,MAAM,CAACT,MAAM2B,IAAI,EAAE;YAC5BjB,cAAc;gBACZM;gBACAC;YACF;YACAL,aAAaC,kBAAkB,OAAO;QACxC;QACAL,QAAQX,KAAKY,MAAM,CAACT,MAAMQ,MAAM,EAAE;YAChCE,cAAc;gBACZT;gBACA,GAAGkB,eAAe;YACpB;YACAP,aAAa;QACf;QACAM,eAAerB,KAAKY,MAAM,CAACS,eAAe;YACxCR,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfkB,UAAU5B,MAAM6B,IAAI;YACtB;YACAjB,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
|
|
4
3
|
import { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';
|
|
5
4
|
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
@@ -1 +1 @@
|
|
|
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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport type * 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":["renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useCustomStyleHook_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverStyles_unstable","AvatarGroupPopover","props","state","contextValues","displayName"],"mappings":"AAAA;AAGA,SAASA,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2CAA2C,QAAQ,uCAAuC;AACnG,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F;;CAEC,GACD,OAAO,MAAMC,qBAAwDC,CAAAA;IACnE,MAAMC,QAAQJ,+BAA+BG;IAC7C,MAAME,gBAAgBP,4CAA4CM;IAElEH,qCAAqCG;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO,OAAOC;AAClD,EAAE;AAEFH,mBAAmBI,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AvatarSize } from '../Avatar/Avatar.types';\nimport type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type AvatarGroupPopoverSlots = {\n root: NonNullable<Slot<PopoverProps>>;\n\n /**\n * Button that triggers the Popover.\n */\n triggerButton: NonNullable<Slot<'button'>>;\n\n /**\n * List that contains the overflowed AvatarGroupItems.\n */\n content: NonNullable<Slot<'ul'>>;\n\n /**\n * PopoverSurface that contains the content.\n */\n popoverSurface: NonNullable<Slot<typeof PopoverSurface>>;\n\n /**\n * Tooltip shown when triggerButton is hovered.\n */\n tooltip: NonNullable<Slot<TooltipProps>>;\n};\n\n/**\n * AvatarGroupPopover Props\n */\nexport type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {\n /**\n * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\n * Note: The indicator will default to `icon` when the size is less than 24.\n * @default count\n */\n indicator?: 'count' | 'icon';\n\n /**\n * Number of AvatarGroupItems that will be rendered.\n *\n * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\n * children, this is not possible and therefore it has do be added manually.\n */\n count?: number;\n\n children: React.ReactNode;\n};\n\n/**\n * State used in rendering AvatarGroupPopover\n */\nexport type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &\n Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {\n popoverOpen: boolean;\n layout: AvatarGroupProps['layout'];\n size: AvatarSize;\n };\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AAiEA,WAAgF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { AvatarGroupPopover } from './AvatarGroupPopover';
|
|
2
2
|
export { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
|
|
3
|
-
export { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';
|
|
3
|
+
export { useAvatarGroupPopover_unstable, useAvatarGroupPopoverBase_unstable } from './useAvatarGroupPopover';
|
|
4
4
|
export { avatarGroupPopoverClassNames, useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles';
|
|
5
5
|
export { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/index.ts"],"sourcesContent":["export { AvatarGroupPopover } from './AvatarGroupPopover';\nexport type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nexport { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';\nexport { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';\nexport {\n avatarGroupPopoverClassNames,\n useAvatarGroupPopoverStyles_unstable,\n} from './useAvatarGroupPopoverStyles.styles';\nexport { useAvatarGroupPopoverContextValues_unstable } from './useAvatarGroupPopoverContextValues';\n"],"names":["AvatarGroupPopover","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","avatarGroupPopoverClassNames","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopoverContextValues_unstable"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;
|
|
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":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAQ1D,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,8BAA8B,EAAEC,kCAAkC,QAAQ,0BAA0B;AAC7G,SACEC,4BAA4B,EAC5BC,oCAAoC,QAC/B,uCAAuC;AAC9C,SAASC,2CAA2C,QAAQ,uCAAuC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport type { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { AvatarGroupPopoverBaseState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverBaseState,\n contextValues: AvatarGroupContextValues,\n): JSXElement => {\n assertSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <state.root>\n <PopoverTrigger disableButtonEnhancement>\n <state.tooltip>\n <state.triggerButton />\n </state.tooltip>\n </PopoverTrigger>\n <state.popoverSurface>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <state.content />\n </AvatarGroupProvider>\n </state.popoverSurface>\n </state.root>\n );\n};\n"],"names":["AvatarGroupProvider","assertSlots","PopoverTrigger","renderAvatarGroupPopover_unstable","state","contextValues","root","disableButtonEnhancement","tooltip","triggerButton","popoverSurface","value","avatarGroup","content"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,mBAAmB,QAAQ,oCAAoC;AAGxE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEAJ,YAAqCG;IAErC,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACJ;gBAAeK,wBAAwB;0BACtC,cAAA,KAACH,MAAMI,OAAO;8BACZ,cAAA,KAACJ,MAAMK,aAAa;;;0BAGxB,KAACL,MAAMM,cAAc;0BACnB,cAAA,KAACV;oBAAoBW,OAAON,cAAcO,WAAW;8BACnD,cAAA,KAACR,MAAMS,OAAO;;;;;AAKxB,EAAE"}
|
|
@@ -17,7 +17,48 @@ import { Tooltip } from '@fluentui/react-tooltip';
|
|
|
17
17
|
var _useAvatarGroupContext_unstable;
|
|
18
18
|
const size = (_useAvatarGroupContext_unstable = useAvatarGroupContext_unstable((ctx)=>ctx.size)) !== null && _useAvatarGroupContext_unstable !== void 0 ? _useAvatarGroupContext_unstable : defaultAvatarGroupSize;
|
|
19
19
|
const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
|
|
20
|
-
const { indicator = size < 24 ? 'icon' : 'count',
|
|
20
|
+
const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;
|
|
21
|
+
const state = useAvatarGroupPopoverBase_unstable({
|
|
22
|
+
indicator,
|
|
23
|
+
...baseProps
|
|
24
|
+
});
|
|
25
|
+
if (layout === 'pie') {
|
|
26
|
+
state.triggerButton.children = null;
|
|
27
|
+
} else if (indicator === 'icon') {
|
|
28
|
+
state.triggerButton.children = /*#__PURE__*/ React.createElement(MoreHorizontalRegular, null);
|
|
29
|
+
}
|
|
30
|
+
return {
|
|
31
|
+
size,
|
|
32
|
+
...state,
|
|
33
|
+
components: {
|
|
34
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
35
|
+
...state.components,
|
|
36
|
+
root: Popover,
|
|
37
|
+
popoverSurface: PopoverSurface,
|
|
38
|
+
tooltip: Tooltip
|
|
39
|
+
},
|
|
40
|
+
root: slot.always(state.root, {
|
|
41
|
+
elementType: Popover
|
|
42
|
+
}),
|
|
43
|
+
popoverSurface: slot.always(props.popoverSurface, {
|
|
44
|
+
defaultProps: state.popoverSurface,
|
|
45
|
+
elementType: PopoverSurface
|
|
46
|
+
}),
|
|
47
|
+
tooltip: slot.always(props.tooltip, {
|
|
48
|
+
defaultProps: state.tooltip,
|
|
49
|
+
elementType: Tooltip
|
|
50
|
+
})
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
/**
|
|
54
|
+
* Handles popover open/closed state, indicator display, and slot configuration.
|
|
55
|
+
* Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.
|
|
56
|
+
*
|
|
57
|
+
* @param props - AvatarGroupPopover props
|
|
58
|
+
* @returns AvatarGroupPopover state
|
|
59
|
+
*/ export const useAvatarGroupPopoverBase_unstable = (props)=>{
|
|
60
|
+
const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
|
|
61
|
+
const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;
|
|
21
62
|
const [popoverOpen, setPopoverOpen] = useControllableState({
|
|
22
63
|
state: props.open,
|
|
23
64
|
defaultState: props.defaultOpen,
|
|
@@ -31,9 +72,7 @@ import { Tooltip } from '@fluentui/react-tooltip';
|
|
|
31
72
|
let triggerButtonChildren;
|
|
32
73
|
if (layout === 'pie') {
|
|
33
74
|
triggerButtonChildren = null;
|
|
34
|
-
} else if (indicator === '
|
|
35
|
-
triggerButtonChildren = /*#__PURE__*/ React.createElement(MoreHorizontalRegular, null);
|
|
36
|
-
} else {
|
|
75
|
+
} else if (indicator === 'count') {
|
|
37
76
|
triggerButtonChildren = count > 99 ? '99+' : `+${count}`;
|
|
38
77
|
}
|
|
39
78
|
return {
|
|
@@ -41,13 +80,12 @@ import { Tooltip } from '@fluentui/react-tooltip';
|
|
|
41
80
|
indicator,
|
|
42
81
|
layout,
|
|
43
82
|
popoverOpen,
|
|
44
|
-
size,
|
|
45
83
|
components: {
|
|
46
|
-
root:
|
|
84
|
+
root: 'div',
|
|
47
85
|
triggerButton: 'button',
|
|
48
86
|
content: 'ul',
|
|
49
|
-
popoverSurface:
|
|
50
|
-
tooltip:
|
|
87
|
+
popoverSurface: 'div',
|
|
88
|
+
tooltip: 'div'
|
|
51
89
|
},
|
|
52
90
|
root: slot.always({
|
|
53
91
|
// Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.
|
|
@@ -58,7 +96,7 @@ import { Tooltip } from '@fluentui/react-tooltip';
|
|
|
58
96
|
open: popoverOpen,
|
|
59
97
|
onOpenChange: handleOnPopoverChange
|
|
60
98
|
}, {
|
|
61
|
-
elementType:
|
|
99
|
+
elementType: 'div'
|
|
62
100
|
}),
|
|
63
101
|
triggerButton: slot.always(props.triggerButton, {
|
|
64
102
|
defaultProps: {
|
|
@@ -79,14 +117,14 @@ import { Tooltip } from '@fluentui/react-tooltip';
|
|
|
79
117
|
'aria-label': 'Overflow',
|
|
80
118
|
tabIndex: 0
|
|
81
119
|
},
|
|
82
|
-
elementType:
|
|
120
|
+
elementType: 'div'
|
|
83
121
|
}),
|
|
84
122
|
tooltip: slot.always(props.tooltip, {
|
|
85
123
|
defaultProps: {
|
|
86
124
|
content: 'View more people.',
|
|
87
125
|
relationship: 'label'
|
|
88
126
|
},
|
|
89
|
-
elementType:
|
|
127
|
+
elementType: 'div'
|
|
90
128
|
})
|
|
91
129
|
};
|
|
92
130
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport { OnOpenChangeData, OpenPopoverEvents
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { useControllableState, slot } from '@fluentui/react-utilities';\nimport { MoreHorizontalRegular } from '@fluentui/react-icons';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-popover';\nimport { Popover, type PopoverProps, PopoverSurface } from '@fluentui/react-popover';\nimport type {\n AvatarGroupPopoverBaseProps,\n AvatarGroupPopoverBaseState,\n AvatarGroupPopoverProps,\n AvatarGroupPopoverState,\n} from './AvatarGroupPopover.types';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render AvatarGroupPopover.\n *\n * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,\n * before being passed to renderAvatarGroupPopover_unstable.\n *\n * @param props - props from this instance of AvatarGroupPopover\n */\nexport const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {\n const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;\n\n const state = useAvatarGroupPopoverBase_unstable({\n indicator,\n ...baseProps,\n });\n\n if (layout === 'pie') {\n state.triggerButton.children = null;\n } else if (indicator === 'icon') {\n state.triggerButton.children = <MoreHorizontalRegular />;\n }\n\n return {\n size,\n ...state,\n\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n root: Popover,\n popoverSurface: PopoverSurface,\n tooltip: Tooltip,\n },\n root: slot.always(state.root as PopoverProps, { elementType: Popover }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: state.popoverSurface,\n elementType: PopoverSurface,\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: state.tooltip,\n elementType: Tooltip,\n }),\n };\n};\n\n/**\n * Handles popover open/closed state, indicator display, and slot configuration.\n * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.\n *\n * @param props - AvatarGroupPopover props\n * @returns AvatarGroupPopover state\n */\nexport const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {\n const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const handleOnPopoverChange = (e: OpenPopoverEvents, data: OnOpenChangeData) => {\n restOfProps.onOpenChange?.(e, data);\n setPopoverOpen(data.open);\n };\n\n let triggerButtonChildren;\n if (layout === 'pie') {\n triggerButtonChildren = null;\n } else if (indicator === 'count') {\n triggerButtonChildren = count > 99 ? '99+' : `+${count}`;\n }\n\n return {\n count,\n indicator,\n layout,\n popoverOpen,\n\n components: {\n root: 'div',\n triggerButton: 'button',\n content: 'ul',\n popoverSurface: 'div',\n tooltip: 'div',\n },\n root: slot.always(\n {\n // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.\n children: <></>,\n size: 'small',\n trapFocus: true,\n ...restOfProps,\n open: popoverOpen,\n onOpenChange: handleOnPopoverChange,\n },\n { elementType: 'div' },\n ),\n triggerButton: slot.always(props.triggerButton, {\n defaultProps: {\n children: triggerButtonChildren,\n type: 'button',\n },\n elementType: 'button',\n }),\n content: slot.always(props.content, {\n defaultProps: {\n children,\n role: 'list',\n },\n elementType: 'ul',\n }),\n popoverSurface: slot.always(props.popoverSurface, {\n defaultProps: {\n 'aria-label': 'Overflow',\n tabIndex: 0,\n },\n elementType: 'div',\n }),\n tooltip: slot.always(props.tooltip, {\n defaultProps: {\n content: 'View more people.',\n relationship: 'label',\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","useAvatarGroupContext_unstable","defaultAvatarGroupSize","useControllableState","slot","MoreHorizontalRegular","Popover","PopoverSurface","Tooltip","useAvatarGroupPopover_unstable","props","size","ctx","layout","indicator","baseProps","state","useAvatarGroupPopoverBase_unstable","triggerButton","children","components","root","popoverSurface","tooltip","always","elementType","defaultProps","count","Children","restOfProps","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","handleOnPopoverChange","e","data","onOpenChange","triggerButtonChildren","content","trapFocus","type","role","tabIndex","relationship"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,oCAAoC;AACnF,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,oBAAoB,EAAEC,IAAI,QAAQ,4BAA4B;AACvE,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D,SAASC,OAAO,EAAqBC,cAAc,QAAQ,0BAA0B;AAOrF,SAASC,OAAO,QAAQ,0BAA0B;AAElD;;;;;;;CAOC,GACD,OAAO,MAAMC,iCAAiC,CAACC;QAChCT;IAAb,MAAMU,OAAOV,CAAAA,kCAAAA,+BAA+BW,CAAAA,MAAOA,IAAID,IAAI,eAA9CV,6CAAAA,kCAAmDC;IAChE,MAAMW,SAASZ,+BAA+BW,CAAAA,MAAOA,IAAIC,MAAM;IAC/D,MAAM,EAAEC,YAAYH,OAAO,KAAK,SAAS,OAAO,EAAE,GAAGI,WAAW,GAAGL;IAEnE,MAAMM,QAAQC,mCAAmC;QAC/CH;QACA,GAAGC,SAAS;IACd;IAEA,IAAIF,WAAW,OAAO;QACpBG,MAAME,aAAa,CAACC,QAAQ,GAAG;IACjC,OAAO,IAAIL,cAAc,QAAQ;QAC/BE,MAAME,aAAa,CAACC,QAAQ,iBAAG,oBAACd;IAClC;IAEA,OAAO;QACLM;QACA,GAAGK,KAAK;QAERI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,MAAMI,UAAU;YACnBC,MAAMf;YACNgB,gBAAgBf;YAChBgB,SAASf;QACX;QACAa,MAAMjB,KAAKoB,MAAM,CAACR,MAAMK,IAAI,EAAkB;YAAEI,aAAanB;QAAQ;QACrEgB,gBAAgBlB,KAAKoB,MAAM,CAACd,MAAMY,cAAc,EAAE;YAChDI,cAAcV,MAAMM,cAAc;YAClCG,aAAalB;QACf;QACAgB,SAASnB,KAAKoB,MAAM,CAACd,MAAMa,OAAO,EAAE;YAClCG,cAAcV,MAAMO,OAAO;YAC3BE,aAAajB;QACf;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMS,qCAAqC,CAACP;IACjD,MAAMG,SAASZ,+BAA+BW,CAAAA,MAAOA,IAAIC,MAAM;IAC/D,MAAM,EAAEC,YAAY,OAAO,EAAEa,QAAQ3B,MAAM4B,QAAQ,CAACD,KAAK,CAACjB,MAAMS,QAAQ,CAAC,EAAEA,QAAQ,EAAE,GAAGU,aAAa,GAAGnB;IAExG,MAAM,CAACoB,aAAaC,eAAe,GAAG5B,qBAAqB;QACzDa,OAAON,MAAMsB,IAAI;QACjBC,cAAcvB,MAAMwB,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAwB,CAACC,GAAsBC;YACnDT;SAAAA,4BAAAA,YAAYU,YAAY,cAAxBV,gDAAAA,+BAAAA,aAA2BQ,GAAGC;QAC9BP,eAAeO,KAAKN,IAAI;IAC1B;IAEA,IAAIQ;IACJ,IAAI3B,WAAW,OAAO;QACpB2B,wBAAwB;IAC1B,OAAO,IAAI1B,cAAc,SAAS;QAChC0B,wBAAwBb,QAAQ,KAAK,QAAQ,CAAC,CAAC,EAAEA,OAAO;IAC1D;IAEA,OAAO;QACLA;QACAb;QACAD;QACAiB;QAEAV,YAAY;YACVC,MAAM;YACNH,eAAe;YACfuB,SAAS;YACTnB,gBAAgB;YAChBC,SAAS;QACX;QACAF,MAAMjB,KAAKoB,MAAM,CACf;YACE,oGAAoG;YACpGL,wBAAU;YACVR,MAAM;YACN+B,WAAW;YACX,GAAGb,WAAW;YACdG,MAAMF;YACNS,cAAcH;QAChB,GACA;YAAEX,aAAa;QAAM;QAEvBP,eAAed,KAAKoB,MAAM,CAACd,MAAMQ,aAAa,EAAE;YAC9CQ,cAAc;gBACZP,UAAUqB;gBACVG,MAAM;YACR;YACAlB,aAAa;QACf;QACAgB,SAASrC,KAAKoB,MAAM,CAACd,MAAM+B,OAAO,EAAE;YAClCf,cAAc;gBACZP;gBACAyB,MAAM;YACR;YACAnB,aAAa;QACf;QACAH,gBAAgBlB,KAAKoB,MAAM,CAACd,MAAMY,cAAc,EAAE;YAChDI,cAAc;gBACZ,cAAc;gBACdmB,UAAU;YACZ;YACApB,aAAa;QACf;QACAF,SAASnB,KAAKoB,MAAM,CAACd,MAAMa,OAAO,EAAE;YAClCG,cAAc;gBACZe,SAAS;gBACTK,cAAc;YAChB;YACArB,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as React from 'react';
|
|
1
3
|
export const useAvatarGroupPopoverContextValues_unstable = (state)=>{
|
|
2
|
-
const avatarGroup = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const avatarGroup = React.useMemo(()=>({
|
|
5
|
+
isOverflow: true,
|
|
6
|
+
size: 24
|
|
7
|
+
}), []);
|
|
6
8
|
return {
|
|
7
9
|
avatarGroup
|
|
8
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport type { AvatarGroupPopoverState } from './AvatarGroupPopover.types';\n\nexport const useAvatarGroupPopoverContextValues_unstable = (\n state: AvatarGroupPopoverState,\n): AvatarGroupContextValues => {\n const avatarGroup = React.useMemo<AvatarGroupContextValue>(\n () => ({\n isOverflow: true,\n size: 24,\n }),\n [],\n );\n\n return { avatarGroup };\n};\n"],"names":["React","useAvatarGroupPopoverContextValues_unstable","state","avatarGroup","useMemo","isOverflow","size"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,8CAA8C,CACzDC;IAEA,MAAMC,cAAcH,MAAMI,OAAO,CAC/B,IAAO,CAAA;YACLC,YAAY;YACZC,MAAM;QACR,CAAA,GACA,EAAE;IAGJ,OAAO;QAAEH;IAAY;AACvB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector
|
|
1
|
+
{"version":3,"sources":["../src/contexts/AvatarGroupContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AvatarGroupContextValue } from '../AvatarGroup';\n\n/**\n * AvatarGroupContext is provided by AvatarGroup and AvatarGroupPopover. It's consumed by AvatarGroupItem to determine\n * default values of some props.\n */\nexport const AvatarGroupContext: Context<AvatarGroupContextValue> = createContext<AvatarGroupContextValue | undefined>(\n undefined,\n) as Context<AvatarGroupContextValue>;\n\nconst avatarGroupContextDefaultValue: AvatarGroupContextValue = {};\n\nexport const AvatarGroupProvider = AvatarGroupContext.Provider;\n\nexport const useAvatarGroupContext_unstable = <T>(selector: ContextSelector<AvatarGroupContextValue, T>): T =>\n useContextSelector(AvatarGroupContext, (ctx = avatarGroupContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AvatarGroupContext","undefined","avatarGroupContextDefaultValue","AvatarGroupProvider","Provider","useAvatarGroupContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF;;;CAGC,GACD,OAAO,MAAMC,qBAAuDF,cAClEG,WACoC;AAEtC,MAAMC,iCAA0D,CAAC;AAEjE,OAAO,MAAMC,sBAAsBH,mBAAmBI,QAAQ,CAAC;AAE/D,OAAO,MAAMC,iCAAiC,CAAIC,WAChDP,mBAAmBC,oBAAoB,CAACO,MAAML,8BAA8B,GAAKI,SAASC,MAAM"}
|
package/lib/index.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
export { Avatar, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable } from './Avatar';
|
|
1
|
+
export { Avatar, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, useAvatarBase_unstable } from './Avatar';
|
|
2
2
|
export { getInitials, partitionAvatarGroupItems } from './utils/index';
|
|
3
|
-
export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable } from './AvatarGroup';
|
|
4
|
-
export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable } from './AvatarGroupItem';
|
|
5
|
-
export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopover_unstable, useAvatarGroupPopoverContextValues_unstable, useAvatarGroupPopoverStyles_unstable } from './AvatarGroupPopover';
|
|
3
|
+
export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvatarGroupContextValues, useAvatarGroupStyles_unstable, useAvatarGroup_unstable, useAvatarGroupBase_unstable } from './AvatarGroup';
|
|
4
|
+
export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable, useAvatarGroupItemBase_unstable } from './AvatarGroupItem';
|
|
5
|
+
export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopover_unstable, useAvatarGroupPopoverContextValues_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopoverBase_unstable } from './AvatarGroupPopover';
|
|
6
6
|
export { AvatarContextProvider, AvatarGroupProvider, useAvatarContext, useAvatarGroupContext_unstable } from './contexts/index';
|
|
7
|
-
// Experimental APIs, will be undocumented in experimental branch
|
|
8
|
-
// export { useAvatarBase_unstable } from './Avatar';
|
|
9
|
-
// export type { AvatarBaseProps, AvatarBaseState } from './Avatar';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Avatar,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n} from './Avatar';\nexport type {\n AvatarNamedColor,\n AvatarProps,\n AvatarSlots,\n AvatarState,\n AvatarShape,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n AvatarSizes,\n AvatarSize,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type {
|
|
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":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAalB,SAASC,WAAW,EAAEC,yBAAyB,QAAQ,gBAAgB;AAEvE,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,gBAAgB;AAUvB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,oBAAoB;AAQ3B,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,8BAA8B,EAC9BC,2CAA2C,EAC3CC,oCAAoC,EACpCC,kCAAkC,QAC7B,uBAAuB;AAQ9B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,8BAA8B,QACzB,mBAAmB"}
|
package/lib/utils/getInitials.js
CHANGED
|
@@ -6,8 +6,10 @@
|
|
|
6
6
|
*/ const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
|
|
7
7
|
/**
|
|
8
8
|
* Regular expression matching special ASCII characters except space, plus some unicode special characters.
|
|
9
|
-
* Applies after unwanted enclosures have been removed
|
|
10
|
-
|
|
9
|
+
* Applies after unwanted enclosures have been removed.
|
|
10
|
+
* Note: the range starts at \uE000 (not \uD800) to avoid matching surrogate code units, which would break
|
|
11
|
+
* supplementary Unicode characters (encoded as surrogate pairs in UTF-16) such as GB18030-2022 extension characters.
|
|
12
|
+
*/ const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uE000-\uFFFF]/g;
|
|
11
13
|
/**
|
|
12
14
|
* Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
|
|
13
15
|
* and number has been trimmed for whitespaces
|
|
@@ -18,24 +20,39 @@
|
|
|
18
20
|
* Arabic: Arabic, Arabic Supplement, Arabic Extended-A.
|
|
19
21
|
* Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
|
|
20
22
|
* Japanese: Hiragana, Katakana.
|
|
21
|
-
* CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs
|
|
22
|
-
*
|
|
23
|
-
|
|
23
|
+
* CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs.
|
|
24
|
+
* Note: Supplementary CJK characters (GB18030-2022 extension characters in Ext B-I) are intentionally not listed
|
|
25
|
+
* here so they can be rendered as initials.
|
|
26
|
+
*/ 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]/;
|
|
27
|
+
function getFirstCodePoint(value) {
|
|
28
|
+
if (!value) {
|
|
29
|
+
return '';
|
|
30
|
+
}
|
|
31
|
+
const codePoint = value.codePointAt(0);
|
|
32
|
+
return codePoint === undefined ? '' : String.fromCodePoint(codePoint);
|
|
33
|
+
}
|
|
24
34
|
function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
|
|
25
35
|
let initials = '';
|
|
26
36
|
const splits = displayName.split(' ');
|
|
27
37
|
if (splits.length !== 0) {
|
|
28
|
-
|
|
38
|
+
// Use code point-aware helper to correctly handle supplementary characters (e.g. GB18030-2022 extension chars)
|
|
39
|
+
// that are encoded as surrogate pairs; charAt(0) would only return half of such a character.
|
|
40
|
+
initials += getFirstCodePoint(splits[0]).toUpperCase();
|
|
29
41
|
}
|
|
30
42
|
if (!firstInitialOnly) {
|
|
31
43
|
if (splits.length === 2) {
|
|
32
|
-
initials += splits[1]
|
|
44
|
+
initials += getFirstCodePoint(splits[1]).toUpperCase();
|
|
33
45
|
} else if (splits.length === 3) {
|
|
34
|
-
initials += splits[2]
|
|
46
|
+
initials += getFirstCodePoint(splits[2]).toUpperCase();
|
|
35
47
|
}
|
|
36
48
|
}
|
|
37
|
-
if (isRtl &&
|
|
38
|
-
|
|
49
|
+
if (isRtl && [
|
|
50
|
+
...initials
|
|
51
|
+
].length > 1) {
|
|
52
|
+
const chars = [
|
|
53
|
+
...initials
|
|
54
|
+
];
|
|
55
|
+
return chars[1] + chars[0];
|
|
39
56
|
}
|
|
40
57
|
return initials;
|
|
41
58
|
}
|
|
@@ -62,8 +79,11 @@ function cleanupDisplayName(displayName) {
|
|
|
62
79
|
return '';
|
|
63
80
|
}
|
|
64
81
|
displayName = cleanupDisplayName(displayName);
|
|
65
|
-
//
|
|
66
|
-
|
|
82
|
+
// Check only the first code point against UNSUPPORTED_TEXT_REGEX so that names starting with a supported
|
|
83
|
+
// character (e.g. GB18030-2022 extension characters) produce an initial even when the rest of the string
|
|
84
|
+
// contains BMP CJK characters that would otherwise trigger the regex.
|
|
85
|
+
const firstCodePoint = getFirstCodePoint(displayName);
|
|
86
|
+
if (UNSUPPORTED_TEXT_REGEX.test(firstCodePoint) || !(options === null || options === void 0 ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName)) {
|
|
67
87
|
return '';
|
|
68
88
|
}
|
|
69
89
|
return getInitialsLatin(displayName, isRtl, options === null || options === void 0 ? void 0 : options.firstInitialOnly);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/getInitials.ts"],"sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n * so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\
|
|
1
|
+
{"version":3,"sources":["../src/utils/getInitials.ts"],"sourcesContent":["/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n * so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nconst UNWANTED_ENCLOSURES_REGEX: RegExp = /[\\(\\[\\{][^\\)\\]\\}]*[\\)\\]\\}]/g;\n\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed.\n * Note: the range starts at \\uE000 (not \\uD800) to avoid matching surrogate code units, which would break\n * supplementary Unicode characters (encoded as surrogate pairs in UTF-16) such as GB18030-2022 extension characters.\n */\nconst UNWANTED_CHARS_REGEX: RegExp = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uE000-\\uFFFF]/g;\n\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nconst PHONENUMBER_REGEX: RegExp = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n\n/** Regular expression matching one or more spaces. */\nconst MULTIPLE_WHITESPACES_REGEX: RegExp = /\\s+/g;\n\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic: Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs.\n * Note: Supplementary CJK characters (GB18030-2022 extension characters in Ext B-I) are intentionally not listed\n * here so they can be rendered as initials.\n */\nconst UNSUPPORTED_TEXT_REGEX: RegExp =\n /[\\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]/;\n\nfunction getFirstCodePoint(value: string): string {\n if (!value) {\n return '';\n }\n\n const codePoint = value.codePointAt(0);\n return codePoint === undefined ? '' : String.fromCodePoint(codePoint);\n}\n\nfunction getInitialsLatin(displayName: string, isRtl: boolean, firstInitialOnly?: boolean): string {\n let initials = '';\n\n const splits: string[] = displayName.split(' ');\n if (splits.length !== 0) {\n // Use code point-aware helper to correctly handle supplementary characters (e.g. GB18030-2022 extension chars)\n // that are encoded as surrogate pairs; charAt(0) would only return half of such a character.\n initials += getFirstCodePoint(splits[0]).toUpperCase();\n }\n\n if (!firstInitialOnly) {\n if (splits.length === 2) {\n initials += getFirstCodePoint(splits[1]).toUpperCase();\n } else if (splits.length === 3) {\n initials += getFirstCodePoint(splits[2]).toUpperCase();\n }\n }\n\n if (isRtl && [...initials].length > 1) {\n const chars = [...initials];\n return chars[1] + chars[0];\n }\n\n return initials;\n}\n\nfunction cleanupDisplayName(displayName: string): string {\n displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n displayName = displayName.trim();\n\n return displayName;\n}\n\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @param displayName - The full name of the person or entity\n * @param isRtl - Whether the display is in RTL\n * @param options - Extra options to control the behavior of getInitials\n *\n * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials\n * could be derived from the name.\n *\n * @internal\n */\nexport function getInitials(\n displayName: string | undefined | null,\n isRtl: boolean,\n options?: {\n /** Should initials be generated from phone numbers (default false) */\n allowPhoneInitials?: boolean;\n\n /** Returns only the first initial */\n firstInitialOnly?: boolean;\n },\n): string {\n if (!displayName) {\n return '';\n }\n\n displayName = cleanupDisplayName(displayName);\n\n // Check only the first code point against UNSUPPORTED_TEXT_REGEX so that names starting with a supported\n // character (e.g. GB18030-2022 extension characters) produce an initial even when the rest of the string\n // contains BMP CJK characters that would otherwise trigger the regex.\n const firstCodePoint = getFirstCodePoint(displayName);\n if (\n UNSUPPORTED_TEXT_REGEX.test(firstCodePoint) ||\n (!options?.allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))\n ) {\n return '';\n }\n\n return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);\n}\n"],"names":["UNWANTED_ENCLOSURES_REGEX","UNWANTED_CHARS_REGEX","PHONENUMBER_REGEX","MULTIPLE_WHITESPACES_REGEX","UNSUPPORTED_TEXT_REGEX","getFirstCodePoint","value","codePoint","codePointAt","undefined","String","fromCodePoint","getInitialsLatin","displayName","isRtl","firstInitialOnly","initials","splits","split","length","toUpperCase","chars","cleanupDisplayName","replace","trim","getInitials","options","firstCodePoint","test","allowPhoneInitials"],"mappings":"AAAA;;CAEC,GAED;;;CAGC,GACD,MAAMA,4BAAoC;AAE1C;;;;;CAKC,GACD,MAAMC,uBAA+B;AAErC;;;CAGC,GACD,MAAMC,oBAA4B;AAElC,oDAAoD,GACpD,MAAMC,6BAAqC;AAE3C;;;;;;;;CAQC,GACD,MAAMC,yBACJ;AAEF,SAASC,kBAAkBC,KAAa;IACtC,IAAI,CAACA,OAAO;QACV,OAAO;IACT;IAEA,MAAMC,YAAYD,MAAME,WAAW,CAAC;IACpC,OAAOD,cAAcE,YAAY,KAAKC,OAAOC,aAAa,CAACJ;AAC7D;AAEA,SAASK,iBAAiBC,WAAmB,EAAEC,KAAc,EAAEC,gBAA0B;IACvF,IAAIC,WAAW;IAEf,MAAMC,SAAmBJ,YAAYK,KAAK,CAAC;IAC3C,IAAID,OAAOE,MAAM,KAAK,GAAG;QACvB,+GAA+G;QAC/G,6FAA6F;QAC7FH,YAAYX,kBAAkBY,MAAM,CAAC,EAAE,EAAEG,WAAW;IACtD;IAEA,IAAI,CAACL,kBAAkB;QACrB,IAAIE,OAAOE,MAAM,KAAK,GAAG;YACvBH,YAAYX,kBAAkBY,MAAM,CAAC,EAAE,EAAEG,WAAW;QACtD,OAAO,IAAIH,OAAOE,MAAM,KAAK,GAAG;YAC9BH,YAAYX,kBAAkBY,MAAM,CAAC,EAAE,EAAEG,WAAW;QACtD;IACF;IAEA,IAAIN,SAAS;WAAIE;KAAS,CAACG,MAAM,GAAG,GAAG;QACrC,MAAME,QAAQ;eAAIL;SAAS;QAC3B,OAAOK,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,EAAE;IAC5B;IAEA,OAAOL;AACT;AAEA,SAASM,mBAAmBT,WAAmB;IAC7CA,cAAcA,YAAYU,OAAO,CAACvB,2BAA2B;IAC7Da,cAAcA,YAAYU,OAAO,CAACtB,sBAAsB;IACxDY,cAAcA,YAAYU,OAAO,CAACpB,4BAA4B;IAC9DU,cAAcA,YAAYW,IAAI;IAE9B,OAAOX;AACT;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASY,YACdZ,WAAsC,EACtCC,KAAc,EACdY,OAMC;IAED,IAAI,CAACb,aAAa;QAChB,OAAO;IACT;IAEAA,cAAcS,mBAAmBT;IAEjC,yGAAyG;IACzG,yGAAyG;IACzG,sEAAsE;IACtE,MAAMc,iBAAiBtB,kBAAkBQ;IACzC,IACET,uBAAuBwB,IAAI,CAACD,mBAC3B,EAACD,oBAAAA,8BAAAA,QAASG,kBAAkB,KAAI3B,kBAAkB0B,IAAI,CAACf,cACxD;QACA,OAAO;IACT;IAEA,OAAOD,iBAAiBC,aAAaC,OAAOY,oBAAAA,8BAAAA,QAASX,gBAAgB;AACvE"}
|
|
@@ -21,6 +21,9 @@ _export(exports, {
|
|
|
21
21
|
renderAvatarGroup_unstable: function() {
|
|
22
22
|
return _index.renderAvatarGroup_unstable;
|
|
23
23
|
},
|
|
24
|
+
useAvatarGroupBase_unstable: function() {
|
|
25
|
+
return _index.useAvatarGroupBase_unstable;
|
|
26
|
+
},
|
|
24
27
|
useAvatarGroupContextValues: function() {
|
|
25
28
|
return _index.useAvatarGroupContextValues;
|
|
26
29
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AvatarGroup.ts"],"sourcesContent":["export type {\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n} from './components/AvatarGroup/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n defaultAvatarGroupSize,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './components/AvatarGroup/index';\n"],"names":["AvatarGroup","avatarGroupClassNames","defaultAvatarGroupSize","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable"],"mappings":"
|
|
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"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderAvatarGroupItem_unstable: function() {
|
|
19
19
|
return _index.renderAvatarGroupItem_unstable;
|
|
20
20
|
},
|
|
21
|
+
useAvatarGroupItemBase_unstable: function() {
|
|
22
|
+
return _index.useAvatarGroupItemBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useAvatarGroupItemStyles_unstable: function() {
|
|
22
25
|
return _index.useAvatarGroupItemStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AvatarGroupItem.ts"],"sourcesContent":["export type {\n AvatarGroupItemProps,\n AvatarGroupItemSlots,\n AvatarGroupItemState,\n} from './components/AvatarGroupItem/index';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n useGroupChildClassName,\n} from './components/AvatarGroupItem/index';\n"],"names":["AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","useGroupChildClassName"],"mappings":";;;;;;;;;;;;
|
|
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"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderAvatarGroupPopover_unstable: function() {
|
|
19
19
|
return _index.renderAvatarGroupPopover_unstable;
|
|
20
20
|
},
|
|
21
|
+
useAvatarGroupPopoverBase_unstable: function() {
|
|
22
|
+
return _index.useAvatarGroupPopoverBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useAvatarGroupPopoverContextValues_unstable: function() {
|
|
22
25
|
return _index.useAvatarGroupPopoverContextValues_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AvatarGroupPopover.ts"],"sourcesContent":["export type {\n AvatarGroupPopoverProps,\n AvatarGroupPopoverSlots,\n AvatarGroupPopoverState,\n} from './components/AvatarGroupPopover/index';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopoverContextValues_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopover_unstable,\n} from './components/AvatarGroupPopover/index';\n"],"names":["AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","useAvatarGroupPopover_unstable"],"mappings":";;;;;;;;;;;;
|
|
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"}
|