@fluentui/react-persona 0.0.0-nightly-20230804-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 +64 -19
- package/CHANGELOG.md +26 -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,95 @@
|
|
|
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
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"date": "Fri, 04 Aug 2023 08:52:58 GMT",
|
|
69
|
+
"tag": "@fluentui/react-persona_v9.2.27",
|
|
70
|
+
"version": "9.2.27",
|
|
71
|
+
"comments": {
|
|
72
|
+
"patch": [
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-persona",
|
|
76
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.17",
|
|
77
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-persona",
|
|
82
|
+
"comment": "Bump @fluentui/react-badge to v9.1.24",
|
|
83
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-persona",
|
|
88
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
|
|
89
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-persona",
|
|
94
|
+
"comment": "Bump @fluentui/react-theme to v9.1.10",
|
|
95
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-persona",
|
|
100
|
+
"comment": "Bump @fluentui/react-utilities to v9.11.0",
|
|
101
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-persona",
|
|
106
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
|
|
107
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
|
63
108
|
}
|
|
64
109
|
]
|
|
65
110
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,25 +1,39 @@
|
|
|
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.
|
|
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
|
+
|
|
24
|
+
## [9.2.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.27)
|
|
25
|
+
|
|
26
|
+
Fri, 04 Aug 2023 08:52:58 GMT
|
|
27
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.26..@fluentui/react-persona_v9.2.27)
|
|
28
|
+
|
|
29
|
+
### Patches
|
|
30
|
+
|
|
31
|
+
- Bump @fluentui/react-avatar to v9.5.17 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
32
|
+
- Bump @fluentui/react-badge to v9.1.24 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
33
|
+
- Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
34
|
+
- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
36
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
|
23
37
|
|
|
24
38
|
## [9.2.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.26)
|
|
25
39
|
|
|
@@ -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
|
},
|