@fluentui/react-persona 0.0.0-nightly-20230807-0415.1 → 0.0.0-nightly-20230808-0415.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 +19 -19
- package/CHANGELOG.md +12 -12
- package/lib/components/Persona/renderPersona.js +4 -4
- package/lib/components/Persona/renderPersona.js.map +1 -1
- package/lib/components/Persona/usePersona.js +25 -14
- package/lib/components/Persona/usePersona.js.map +1 -1
- package/lib-commonjs/components/Persona/renderPersona.js +3 -3
- package/lib-commonjs/components/Persona/renderPersona.js.map +1 -1
- package/lib-commonjs/components/Persona/usePersona.js +24 -13
- package/lib-commonjs/components/Persona/usePersona.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-persona",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-persona_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 08 Aug 2023 04:22:23 GMT",
|
|
6
|
+
"tag": "@fluentui/react-persona_v0.0.0-nightly-20230808-0415.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230808-0415.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,50 +16,50 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-persona",
|
|
19
|
-
"comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230808-0415.1",
|
|
20
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-persona",
|
|
25
|
-
"comment": "Bump @fluentui/react-badge to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230808-0415.1",
|
|
26
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-persona",
|
|
31
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230808-0415.1",
|
|
32
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-persona",
|
|
37
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1",
|
|
38
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-persona",
|
|
43
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1",
|
|
44
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-persona",
|
|
49
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1",
|
|
50
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-persona",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1",
|
|
56
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"author": "beachball",
|
|
60
60
|
"package": "@fluentui/react-persona",
|
|
61
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
62
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1",
|
|
62
|
+
"commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
|
|
63
63
|
}
|
|
64
64
|
]
|
|
65
65
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-persona
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 08 Aug 2023 04:22:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230808-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230808-0415.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.27..@fluentui/react-persona_v0.0.0-nightly-
|
|
9
|
+
Tue, 08 Aug 2023 04:22:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.27..@fluentui/react-persona_v0.0.0-nightly-20230808-0415.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-avatar to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-badge to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-avatar to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
16
|
+
- Bump @fluentui/react-badge to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
20
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
|
|
23
23
|
|
|
24
24
|
## [9.2.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.27)
|
|
25
25
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Persona
|
|
5
5
|
*/ export const renderPersona_unstable = (state)=>{
|
|
6
6
|
const { presenceOnly , textPosition } = state;
|
|
7
|
-
|
|
8
|
-
const coin = presenceOnly ?
|
|
9
|
-
return /*#__PURE__*/ createElement(
|
|
7
|
+
assertSlots(state);
|
|
8
|
+
const coin = presenceOnly ? state.presence && /*#__PURE__*/ createElement(state.presence, null) : state.avatar && /*#__PURE__*/ createElement(state.avatar, null);
|
|
9
|
+
return /*#__PURE__*/ createElement(state.root, null, (textPosition === 'after' || textPosition === 'below') && coin, state.primaryText && /*#__PURE__*/ createElement(state.primaryText, null), state.secondaryText && /*#__PURE__*/ createElement(state.secondaryText, null), state.tertiaryText && /*#__PURE__*/ createElement(state.tertiaryText, null), state.quaternaryText && /*#__PURE__*/ createElement(state.quaternaryText, null), textPosition === 'before' && coin);
|
|
10
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport {
|
|
1
|
+
{"version":3,"sources":["renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n const { presenceOnly, textPosition } = state;\n assertSlots<PersonaSlots>(state);\n\n const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n return (\n <state.root>\n {(textPosition === 'after' || textPosition === 'below') && coin}\n {state.primaryText && <state.primaryText />}\n {state.secondaryText && <state.secondaryText />}\n {state.tertiaryText && <state.tertiaryText />}\n {state.quaternaryText && <state.quaternaryText />}\n {textPosition === 'before' && coin}\n </state.root>\n );\n};\n"],"names":["createElement","assertSlots","renderPersona_unstable","state","presenceOnly","textPosition","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,QAAwB;IAC7D,MAAM,EAAEC,aAAY,EAAEC,aAAY,EAAE,GAAGF;IACvCF,YAA0BE;IAE1B,MAAMG,OAAOF,eAAeD,MAAMI,QAAQ,kBAAI,AAdhD,cAciDJ,MAAMI,QAAQ,UAAMJ,MAAMK,MAAM,kBAAI,AAdrF,cAcsFL,MAAMK,MAAM,OAAG;IAEnG,qBACE,AAjBJ,cAiBKL,MAAMM,IAAI,QACR,AAACJ,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAM,KAAMC,MAC1DH,MAAMO,WAAW,kBAAI,AAnB5B,cAmB6BP,MAAMO,WAAW,SACvCP,MAAMQ,aAAa,kBAAI,AApB9B,cAoB+BR,MAAMQ,aAAa,SAC3CR,MAAMS,YAAY,kBAAI,AArB7B,cAqB8BT,MAAMS,YAAY,SACzCT,MAAMU,cAAc,kBAAI,AAtB/B,cAsBgCV,MAAMU,cAAc,SAC7CR,iBAAiB,YAAYC;AAGpC,EAAE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Avatar } from '@fluentui/react-avatar';
|
|
3
|
-
import { getNativeElementProps,
|
|
3
|
+
import { getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
4
4
|
import { PresenceBadge } from '@fluentui/react-badge';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render Persona.
|
|
@@ -12,15 +12,22 @@ import { PresenceBadge } from '@fluentui/react-badge';
|
|
|
12
12
|
* @param ref - reference to root HTMLElement of Persona
|
|
13
13
|
*/ export const usePersona_unstable = (props, ref)=>{
|
|
14
14
|
const { name , presenceOnly =false , size ='medium' , textAlignment ='start' , textPosition ='after' } = props;
|
|
15
|
-
const primaryText =
|
|
16
|
-
|
|
15
|
+
const primaryText = slot.optional(props.primaryText, {
|
|
16
|
+
renderByDefault: true,
|
|
17
17
|
defaultProps: {
|
|
18
18
|
children: name
|
|
19
|
-
}
|
|
19
|
+
},
|
|
20
|
+
elementType: 'span'
|
|
21
|
+
});
|
|
22
|
+
const secondaryText = slot.optional(props.secondaryText, {
|
|
23
|
+
elementType: 'span'
|
|
24
|
+
});
|
|
25
|
+
const tertiaryText = slot.optional(props.tertiaryText, {
|
|
26
|
+
elementType: 'span'
|
|
27
|
+
});
|
|
28
|
+
const quaternaryText = slot.optional(props.quaternaryText, {
|
|
29
|
+
elementType: 'span'
|
|
20
30
|
});
|
|
21
|
-
const secondaryText = resolveShorthand(props.secondaryText);
|
|
22
|
-
const tertiaryText = resolveShorthand(props.tertiaryText);
|
|
23
|
-
const quaternaryText = resolveShorthand(props.quaternaryText);
|
|
24
31
|
const numTextLines = [
|
|
25
32
|
primaryText,
|
|
26
33
|
secondaryText,
|
|
@@ -42,24 +49,28 @@ import { PresenceBadge } from '@fluentui/react-badge';
|
|
|
42
49
|
tertiaryText: 'span',
|
|
43
50
|
quaternaryText: 'span'
|
|
44
51
|
},
|
|
45
|
-
root: getNativeElementProps('div', {
|
|
52
|
+
root: slot.always(getNativeElementProps('div', {
|
|
46
53
|
...props,
|
|
47
54
|
ref
|
|
48
55
|
}, /* excludedPropNames */ [
|
|
49
56
|
'name'
|
|
50
|
-
]),
|
|
51
|
-
|
|
52
|
-
|
|
57
|
+
]), {
|
|
58
|
+
elementType: 'div'
|
|
59
|
+
}),
|
|
60
|
+
avatar: !presenceOnly ? slot.optional(props.avatar, {
|
|
61
|
+
renderByDefault: true,
|
|
53
62
|
defaultProps: {
|
|
54
63
|
name,
|
|
55
64
|
badge: props.presence,
|
|
56
65
|
size: avatarSizes[size]
|
|
57
|
-
}
|
|
66
|
+
},
|
|
67
|
+
elementType: Avatar
|
|
58
68
|
}) : undefined,
|
|
59
|
-
presence: presenceOnly ?
|
|
69
|
+
presence: presenceOnly ? slot.optional(props.presence, {
|
|
60
70
|
defaultProps: {
|
|
61
71
|
size: presenceSizes[size]
|
|
62
|
-
}
|
|
72
|
+
},
|
|
73
|
+
elementType: PresenceBadge
|
|
63
74
|
}) : undefined,
|
|
64
75
|
primaryText,
|
|
65
76
|
secondaryText,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps,
|
|
1
|
+
{"version":3,"sources":["usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n const primaryText = slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: name,\n },\n elementType: 'span',\n });\n const secondaryText = slot.optional(props.secondaryText, { elementType: 'span' });\n const tertiaryText = slot.optional(props.tertiaryText, { elementType: 'span' });\n const quaternaryText = slot.optional(props.quaternaryText, { elementType: 'span' });\n const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n return {\n numTextLines,\n presenceOnly,\n size,\n textAlignment,\n textPosition,\n components: {\n root: 'div',\n avatar: Avatar,\n presence: PresenceBadge,\n primaryText: 'span',\n secondaryText: 'span',\n tertiaryText: 'span',\n quaternaryText: 'span',\n },\n\n root: slot.always(\n getNativeElementProps(\n 'div',\n {\n ...props,\n ref,\n },\n /* excludedPropNames */ ['name'],\n ),\n { elementType: 'div' },\n ),\n avatar: !presenceOnly\n ? slot.optional(props.avatar, {\n renderByDefault: true,\n defaultProps: {\n name,\n badge: props.presence,\n size: avatarSizes[size],\n },\n elementType: Avatar,\n })\n : undefined,\n presence: presenceOnly\n ? slot.optional(props.presence, {\n defaultProps: {\n size: presenceSizes[size],\n },\n elementType: PresenceBadge,\n })\n : undefined,\n primaryText,\n secondaryText,\n tertiaryText,\n quaternaryText,\n };\n};\n\nconst presenceSizes = {\n 'extra-small': 'tiny',\n small: 'extra-small',\n medium: 'small',\n large: 'medium',\n 'extra-large': 'large',\n huge: 'large',\n} as const;\n\nconst avatarSizes = {\n 'extra-small': 20,\n small: 28,\n medium: 32,\n large: 36,\n 'extra-large': 40,\n huge: 56,\n} as const;\n"],"names":["React","Avatar","getNativeElementProps","slot","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","always","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,aAAa,QAAQ,wBAAwB;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC,MAA8C;IACrG,MAAM,EAAEC,KAAI,EAAEC,cAAe,KAAK,CAAA,EAAEC,MAAO,SAAQ,EAAEC,eAAgB,QAAO,EAAEC,cAAe,QAAO,EAAE,GAAGN;IAEzG,MAAMO,cAAcV,KAAKW,QAAQ,CAACR,MAAMO,WAAW,EAAE;QACnDE,iBAAiB,IAAI;QACrBC,cAAc;YACZC,UAAUT;QACZ;QACAU,aAAa;IACf;IACA,MAAMC,gBAAgBhB,KAAKW,QAAQ,CAACR,MAAMa,aAAa,EAAE;QAAED,aAAa;IAAO;IAC/E,MAAME,eAAejB,KAAKW,QAAQ,CAACR,MAAMc,YAAY,EAAE;QAAEF,aAAa;IAAO;IAC7E,MAAMG,iBAAiBlB,KAAKW,QAAQ,CAACR,MAAMe,cAAc,EAAE;QAAEH,aAAa;IAAO;IACjF,MAAMI,eAAe;QAACT;QAAaM;QAAeC;QAAcC;KAAe,CAACE,MAAM,CAACC,SAASC,MAAM;IACtG,OAAO;QACLH;QACAb;QACAC;QACAC;QACAC;QACAc,YAAY;YACVC,MAAM;YACNC,QAAQ3B;YACR4B,UAAUzB;YACVS,aAAa;YACbM,eAAe;YACfC,cAAc;YACdC,gBAAgB;QAClB;QAEAM,MAAMxB,KAAK2B,MAAM,CACf5B,sBACE,OACA;YACE,GAAGI,KAAK;YACRC;QACF,GACA,qBAAqB,GAAG;YAAC;SAAO,GAElC;YAAEW,aAAa;QAAM;QAEvBU,QAAQ,CAACnB,eACLN,KAAKW,QAAQ,CAACR,MAAMsB,MAAM,EAAE;YAC1Bb,iBAAiB,IAAI;YACrBC,cAAc;gBACZR;gBACAuB,OAAOzB,MAAMuB,QAAQ;gBACrBnB,MAAMsB,WAAW,CAACtB,KAAK;YACzB;YACAQ,aAAajB;QACf,KACAgC,SAAS;QACbJ,UAAUpB,eACNN,KAAKW,QAAQ,CAACR,MAAMuB,QAAQ,EAAE;YAC5Bb,cAAc;gBACZN,MAAMwB,aAAa,CAACxB,KAAK;YAC3B;YACAQ,aAAad;QACf,KACA6B,SAAS;QACbpB;QACAM;QACAC;QACAC;IACF;AACF,EAAE;AAEF,MAAMa,gBAAgB;IACpB,eAAe;IACfC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMN,cAAc;IAClB,eAAe;IACfG,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
|
|
@@ -10,7 +10,7 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
|
|
|
10
10
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
11
|
const renderPersona_unstable = (state)=>{
|
|
12
12
|
const { presenceOnly , textPosition } = state;
|
|
13
|
-
|
|
14
|
-
const coin = presenceOnly ?
|
|
15
|
-
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(
|
|
13
|
+
(0, _reactUtilities.assertSlots)(state);
|
|
14
|
+
const coin = presenceOnly ? state.presence && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.presence, null) : state.avatar && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.avatar, null);
|
|
15
|
+
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, (textPosition === 'after' || textPosition === 'below') && coin, state.primaryText && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.primaryText, null), state.secondaryText && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.secondaryText, null), state.tertiaryText && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.tertiaryText, null), state.quaternaryText && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.quaternaryText, null), textPosition === 'before' && coin);
|
|
16
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPersona.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport {
|
|
1
|
+
{"version":3,"sources":["renderPersona.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Persona\n */ export const renderPersona_unstable = (state)=>{\n const { presenceOnly , textPosition } = state;\n assertSlots(state);\n const coin = presenceOnly ? state.presence && /*#__PURE__*/ createElement(state.presence, null) : state.avatar && /*#__PURE__*/ createElement(state.avatar, null);\n return /*#__PURE__*/ createElement(state.root, null, (textPosition === 'after' || textPosition === 'below') && coin, state.primaryText && /*#__PURE__*/ createElement(state.primaryText, null), state.secondaryText && /*#__PURE__*/ createElement(state.secondaryText, null), state.tertiaryText && /*#__PURE__*/ createElement(state.tertiaryText, null), state.quaternaryText && /*#__PURE__*/ createElement(state.quaternaryText, null), textPosition === 'before' && coin);\n};\n"],"names":["renderPersona_unstable","state","presenceOnly","textPosition","assertSlots","coin","presence","createElement","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,yBAAyB,CAACC,QAAQ;IAC/C,MAAM,EAAEC,aAAY,EAAGC,aAAY,EAAG,GAAGF;IACzCG,IAAAA,2BAAW,EAACH;IACZ,MAAMI,OAAOH,eAAeD,MAAMK,QAAQ,IAAI,WAAW,GAAGC,IAAAA,8BAAa,EAACN,MAAMK,QAAQ,EAAE,IAAI,IAAIL,MAAMO,MAAM,IAAI,WAAW,GAAGD,IAAAA,8BAAa,EAACN,MAAMO,MAAM,EAAE,IAAI,CAAC;IACjK,OAAO,WAAW,GAAGD,IAAAA,8BAAa,EAACN,MAAMQ,IAAI,EAAE,IAAI,EAAE,AAACN,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAM,KAAME,MAAMJ,MAAMS,WAAW,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACN,MAAMS,WAAW,EAAE,IAAI,GAAGT,MAAMU,aAAa,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACN,MAAMU,aAAa,EAAE,IAAI,GAAGV,MAAMW,YAAY,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACN,MAAMW,YAAY,EAAE,IAAI,GAAGX,MAAMY,cAAc,IAAI,WAAW,GAAGN,IAAAA,8BAAa,EAACN,MAAMY,cAAc,EAAE,IAAI,GAAGV,iBAAiB,YAAYE;AAC9c"}
|
|
@@ -13,15 +13,22 @@ const _reactUtilities = require("@fluentui/react-utilities");
|
|
|
13
13
|
const _reactBadge = require("@fluentui/react-badge");
|
|
14
14
|
const usePersona_unstable = (props, ref)=>{
|
|
15
15
|
const { name , presenceOnly =false , size ='medium' , textAlignment ='start' , textPosition ='after' } = props;
|
|
16
|
-
const primaryText =
|
|
17
|
-
|
|
16
|
+
const primaryText = _reactUtilities.slot.optional(props.primaryText, {
|
|
17
|
+
renderByDefault: true,
|
|
18
18
|
defaultProps: {
|
|
19
19
|
children: name
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
elementType: 'span'
|
|
22
|
+
});
|
|
23
|
+
const secondaryText = _reactUtilities.slot.optional(props.secondaryText, {
|
|
24
|
+
elementType: 'span'
|
|
25
|
+
});
|
|
26
|
+
const tertiaryText = _reactUtilities.slot.optional(props.tertiaryText, {
|
|
27
|
+
elementType: 'span'
|
|
28
|
+
});
|
|
29
|
+
const quaternaryText = _reactUtilities.slot.optional(props.quaternaryText, {
|
|
30
|
+
elementType: 'span'
|
|
21
31
|
});
|
|
22
|
-
const secondaryText = (0, _reactUtilities.resolveShorthand)(props.secondaryText);
|
|
23
|
-
const tertiaryText = (0, _reactUtilities.resolveShorthand)(props.tertiaryText);
|
|
24
|
-
const quaternaryText = (0, _reactUtilities.resolveShorthand)(props.quaternaryText);
|
|
25
32
|
const numTextLines = [
|
|
26
33
|
primaryText,
|
|
27
34
|
secondaryText,
|
|
@@ -43,24 +50,28 @@ const usePersona_unstable = (props, ref)=>{
|
|
|
43
50
|
tertiaryText: 'span',
|
|
44
51
|
quaternaryText: 'span'
|
|
45
52
|
},
|
|
46
|
-
root: (0, _reactUtilities.getNativeElementProps)('div', {
|
|
53
|
+
root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
|
|
47
54
|
...props,
|
|
48
55
|
ref
|
|
49
56
|
}, /* excludedPropNames */ [
|
|
50
57
|
'name'
|
|
51
|
-
]),
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
]), {
|
|
59
|
+
elementType: 'div'
|
|
60
|
+
}),
|
|
61
|
+
avatar: !presenceOnly ? _reactUtilities.slot.optional(props.avatar, {
|
|
62
|
+
renderByDefault: true,
|
|
54
63
|
defaultProps: {
|
|
55
64
|
name,
|
|
56
65
|
badge: props.presence,
|
|
57
66
|
size: avatarSizes[size]
|
|
58
|
-
}
|
|
67
|
+
},
|
|
68
|
+
elementType: _reactAvatar.Avatar
|
|
59
69
|
}) : undefined,
|
|
60
|
-
presence: presenceOnly ?
|
|
70
|
+
presence: presenceOnly ? _reactUtilities.slot.optional(props.presence, {
|
|
61
71
|
defaultProps: {
|
|
62
72
|
size: presenceSizes[size]
|
|
63
|
-
}
|
|
73
|
+
},
|
|
74
|
+
elementType: _reactBadge.PresenceBadge
|
|
64
75
|
}) : undefined,
|
|
65
76
|
primaryText,
|
|
66
77
|
secondaryText,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePersona.js"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps,
|
|
1
|
+
{"version":3,"sources":["usePersona.js"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */ export const usePersona_unstable = (props, ref)=>{\n const { name , presenceOnly =false , size ='medium' , textAlignment ='start' , textPosition ='after' } = props;\n const primaryText = slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: name\n },\n elementType: 'span'\n });\n const secondaryText = slot.optional(props.secondaryText, {\n elementType: 'span'\n });\n const tertiaryText = slot.optional(props.tertiaryText, {\n elementType: 'span'\n });\n const quaternaryText = slot.optional(props.quaternaryText, {\n elementType: 'span'\n });\n const numTextLines = [\n primaryText,\n secondaryText,\n tertiaryText,\n quaternaryText\n ].filter(Boolean).length;\n return {\n numTextLines,\n presenceOnly,\n size,\n textAlignment,\n textPosition,\n components: {\n root: 'div',\n avatar: Avatar,\n presence: PresenceBadge,\n primaryText: 'span',\n secondaryText: 'span',\n tertiaryText: 'span',\n quaternaryText: 'span'\n },\n root: slot.always(getNativeElementProps('div', {\n ...props,\n ref\n }, /* excludedPropNames */ [\n 'name'\n ]), {\n elementType: 'div'\n }),\n avatar: !presenceOnly ? slot.optional(props.avatar, {\n renderByDefault: true,\n defaultProps: {\n name,\n badge: props.presence,\n size: avatarSizes[size]\n },\n elementType: Avatar\n }) : undefined,\n presence: presenceOnly ? slot.optional(props.presence, {\n defaultProps: {\n size: presenceSizes[size]\n },\n elementType: PresenceBadge\n }) : undefined,\n primaryText,\n secondaryText,\n tertiaryText,\n quaternaryText\n };\n};\nconst presenceSizes = {\n 'extra-small': 'tiny',\n small: 'extra-small',\n medium: 'small',\n large: 'medium',\n 'extra-large': 'large',\n huge: 'large'\n};\nconst avatarSizes = {\n 'extra-small': 20,\n small: 28,\n medium: 32,\n large: 36,\n 'extra-large': 40,\n huge: 56\n};\n"],"names":["usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","slot","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","Avatar","presence","PresenceBadge","always","getNativeElementProps","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;6BACA;gCACqB;4BACd;AASnB,MAAMA,sBAAsB,CAACC,OAAOC,MAAM;IACjD,MAAM,EAAEC,KAAI,EAAGC,cAAc,KAAK,CAAA,EAAGC,MAAM,SAAQ,EAAGC,eAAe,QAAO,EAAGC,cAAc,QAAO,EAAG,GAAGN;IAC1G,MAAMO,cAAcC,oBAAI,CAACC,QAAQ,CAACT,MAAMO,WAAW,EAAE;QACjDG,iBAAiB,IAAI;QACrBC,cAAc;YACVC,UAAUV;QACd;QACAW,aAAa;IACjB;IACA,MAAMC,gBAAgBN,oBAAI,CAACC,QAAQ,CAACT,MAAMc,aAAa,EAAE;QACrDD,aAAa;IACjB;IACA,MAAME,eAAeP,oBAAI,CAACC,QAAQ,CAACT,MAAMe,YAAY,EAAE;QACnDF,aAAa;IACjB;IACA,MAAMG,iBAAiBR,oBAAI,CAACC,QAAQ,CAACT,MAAMgB,cAAc,EAAE;QACvDH,aAAa;IACjB;IACA,MAAMI,eAAe;QACjBV;QACAO;QACAC;QACAC;KACH,CAACE,MAAM,CAACC,SAASC,MAAM;IACxB,OAAO;QACHH;QACAd;QACAC;QACAC;QACAC;QACAe,YAAY;YACRC,MAAM;YACNC,QAAQC,mBAAM;YACdC,UAAUC,yBAAa;YACvBnB,aAAa;YACbO,eAAe;YACfC,cAAc;YACdC,gBAAgB;QACpB;QACAM,MAAMd,oBAAI,CAACmB,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C,GAAG5B,KAAK;YACRC;QACJ,GAAG,qBAAqB,GAAG;YACvB;SACH,GAAG;YACAY,aAAa;QACjB;QACAU,QAAQ,CAACpB,eAAeK,oBAAI,CAACC,QAAQ,CAACT,MAAMuB,MAAM,EAAE;YAChDb,iBAAiB,IAAI;YACrBC,cAAc;gBACVT;gBACA2B,OAAO7B,MAAMyB,QAAQ;gBACrBrB,MAAM0B,WAAW,CAAC1B,KAAK;YAC3B;YACAS,aAAaW,mBAAM;QACvB,KAAKO,SAAS;QACdN,UAAUtB,eAAeK,oBAAI,CAACC,QAAQ,CAACT,MAAMyB,QAAQ,EAAE;YACnDd,cAAc;gBACVP,MAAM4B,aAAa,CAAC5B,KAAK;YAC7B;YACAS,aAAaa,yBAAa;QAC9B,KAAKK,SAAS;QACdxB;QACAO;QACAC;QACAC;IACJ;AACJ;AACA,MAAMgB,gBAAgB;IAClB,eAAe;IACfC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACV;AACA,MAAMN,cAAc;IAChB,eAAe;IACfG,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACV"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-persona",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230808-0415.1",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20230808-0415.1",
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230808-0415.1",
|
|
32
32
|
"@fluentui/scripts-api-extractor": "*",
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-avatar": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-badge": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-avatar": "0.0.0-nightly-20230808-0415.1",
|
|
37
|
+
"@fluentui/react-badge": "0.0.0-nightly-20230808-0415.1",
|
|
38
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230808-0415.1",
|
|
39
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230808-0415.1",
|
|
40
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230808-0415.1",
|
|
41
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230808-0415.1",
|
|
42
42
|
"@griffel/react": "^1.5.7",
|
|
43
43
|
"@swc/helpers": "^0.4.14"
|
|
44
44
|
},
|