@fluentui/react-persona 9.2.4 → 9.2.5
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +58 -1
- package/CHANGELOG.md +18 -2
- package/lib/Persona.js.map +1 -1
- package/lib/components/Persona/Persona.js.map +1 -1
- package/lib/components/Persona/Persona.types.js.map +1 -1
- package/lib/components/Persona/index.js.map +1 -1
- package/lib/components/Persona/renderPersona.js +2 -16
- package/lib/components/Persona/renderPersona.js.map +1 -1
- package/lib/components/Persona/usePersona.js +1 -0
- package/lib/components/Persona/usePersona.js.map +1 -1
- package/lib/components/Persona/usePersonaStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Persona.js +5 -4
- package/lib-commonjs/Persona.js.map +1 -1
- package/lib-commonjs/components/Persona/Persona.js +19 -21
- package/lib-commonjs/components/Persona/Persona.js.map +1 -1
- package/lib-commonjs/components/Persona/Persona.types.js +3 -2
- package/lib-commonjs/components/Persona/Persona.types.js.map +1 -1
- package/lib-commonjs/components/Persona/index.js +9 -8
- package/lib-commonjs/components/Persona/index.js.map +1 -1
- package/lib-commonjs/components/Persona/renderPersona.js +15 -35
- package/lib-commonjs/components/Persona/renderPersona.js.map +1 -1
- package/lib-commonjs/components/Persona/usePersona.js +80 -84
- package/lib-commonjs/components/Persona/usePersona.js.map +1 -1
- package/lib-commonjs/components/Persona/usePersonaStyles.js +252 -208
- package/lib-commonjs/components/Persona/usePersonaStyles.js.map +1 -1
- package/lib-commonjs/index.js +16 -33
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -9
- package/lib-amd/Persona.js +0 -6
- package/lib-amd/Persona.js.map +0 -1
- package/lib-amd/components/Persona/Persona.js +0 -18
- package/lib-amd/components/Persona/Persona.js.map +0 -1
- package/lib-amd/components/Persona/Persona.types.js +0 -5
- package/lib-amd/components/Persona/Persona.types.js.map +0 -1
- package/lib-amd/components/Persona/index.js +0 -10
- package/lib-amd/components/Persona/index.js.map +0 -1
- package/lib-amd/components/Persona/renderPersona.js +0 -24
- package/lib-amd/components/Persona/renderPersona.js.map +0 -1
- package/lib-amd/components/Persona/usePersona.js +0 -84
- package/lib-amd/components/Persona/usePersona.js.map +0 -1
- package/lib-amd/components/Persona/usePersonaStyles.js +0 -191
- package/lib-amd/components/Persona/usePersonaStyles.js.map +0 -1
- package/lib-amd/index.js +0 -11
- package/lib-amd/index.js.map +0 -1
package/.swcrc
ADDED
@@ -0,0 +1,30 @@
|
|
1
|
+
{
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
3
|
+
"exclude": [
|
4
|
+
"/testing",
|
5
|
+
"/**/*.cy.ts",
|
6
|
+
"/**/*.cy.tsx",
|
7
|
+
"/**/*.spec.ts",
|
8
|
+
"/**/*.spec.tsx",
|
9
|
+
"/**/*.test.ts",
|
10
|
+
"/**/*.test.tsx"
|
11
|
+
],
|
12
|
+
"jsc": {
|
13
|
+
"parser": {
|
14
|
+
"syntax": "typescript",
|
15
|
+
"tsx": true,
|
16
|
+
"decorators": false,
|
17
|
+
"dynamicImport": false
|
18
|
+
},
|
19
|
+
"externalHelpers": true,
|
20
|
+
"transform": {
|
21
|
+
"react": {
|
22
|
+
"runtime": "classic",
|
23
|
+
"useSpread": true
|
24
|
+
}
|
25
|
+
},
|
26
|
+
"target": "es2019"
|
27
|
+
},
|
28
|
+
"minify": false,
|
29
|
+
"sourceMaps": true
|
30
|
+
}
|
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,64 @@
|
|
2
2
|
"name": "@fluentui/react-persona",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Tue, 21 Mar 2023 21:18:54 GMT",
|
6
|
+
"tag": "@fluentui/react-persona_v9.2.5",
|
7
|
+
"version": "9.2.5",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
12
|
+
"package": "@fluentui/react-persona",
|
13
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
14
|
+
"comment": "fix: add node field to package.json exports map."
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "tristan.watanabe@gmail.com",
|
18
|
+
"package": "@fluentui/react-persona",
|
19
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
20
|
+
"comment": "chore: migrate to swc transpilation approach."
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-persona",
|
25
|
+
"comment": "Bump @fluentui/react-avatar to v9.4.5",
|
26
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-persona",
|
31
|
+
"comment": "Bump @fluentui/react-badge to v9.1.5",
|
32
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-persona",
|
37
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
|
38
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "beachball",
|
42
|
+
"package": "@fluentui/react-persona",
|
43
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
44
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "beachball",
|
48
|
+
"package": "@fluentui/react-persona",
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
50
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
51
|
+
},
|
52
|
+
{
|
53
|
+
"author": "beachball",
|
54
|
+
"package": "@fluentui/react-persona",
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
56
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
57
|
+
}
|
58
|
+
]
|
59
|
+
}
|
60
|
+
},
|
61
|
+
{
|
62
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
6
63
|
"tag": "@fluentui/react-persona_v9.2.4",
|
7
64
|
"version": "9.2.4",
|
8
65
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,28 @@
|
|
1
1
|
# Change Log - @fluentui/react-persona
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 21:18:54 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.5)
|
8
|
+
|
9
|
+
Tue, 21 Mar 2023 21:18:54 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.4..@fluentui/react-persona_v9.2.5)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
15
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
16
|
+
- Bump @fluentui/react-avatar to v9.4.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
17
|
+
- Bump @fluentui/react-badge to v9.1.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
19
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
20
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
22
|
+
|
7
23
|
## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.4)
|
8
24
|
|
9
|
-
Thu, 16 Mar 2023 14:
|
25
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
10
26
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.3..@fluentui/react-persona_v9.2.4)
|
11
27
|
|
12
28
|
### Patches
|
package/lib/Persona.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../src/Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"mappings":"AAAA,cAAc"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHooks_unstable","Persona","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["
|
1
|
+
{"version":3,"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHooks_unstable","Persona","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Persona/Persona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\n * or an Avatar with a PresenceBadge.\n */\nexport const Persona: ForwardRefComponent<PersonaProps> = React.forwardRef((props, ref) => {\n const state = usePersona_unstable(props, ref);\n\n usePersonaStyles_unstable(state);\n\n const { usePersonaStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,yBAAyB,QAAQ;AAG1C,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,OAAA,gBAA6CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQP,mBAAA,CAAoBK,KAAA,EAAOC,GAAA;EAEzCL,yBAAA,CAA0BM,KAAA;EAE1B,MAAM;IAAEN,yBAAA,EAA2BO;EAAe,CAAE,GAAGN,4BAAA;EACvDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,sBAAA,CAAuBQ,KAAA;AAChC;AAEAJ,OAAA,CAAQM,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Persona/Persona.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Avatar to display.\n *\n * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n */\n avatar?: Slot<typeof Avatar>;\n\n /**\n * PresenceBadge to display.\n *\n * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n */\n presence?: Slot<typeof PresenceBadge>;\n\n /**\n * The first line of text in the Persona, larger than the rest of the lines.\n *\n * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n * different than the `name` prop.\n */\n primaryText?: Slot<'span'>;\n\n /**\n * The second line of text in the Persona.\n */\n secondaryText?: Slot<'span'>;\n\n /**\n * The third line of text in the Persona.\n */\n tertiaryText?: Slot<'span'>;\n\n /**\n * The fourth line of text in the Persona.\n */\n quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n /**\n * The name of the person or entity represented by the Persona.\n *\n * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n */\n name?: string;\n\n /**\n * Whether to display only the presence.\n *\n * @default false\n */\n presenceOnly?: boolean;\n\n /**\n * The size of a Persona and its text.\n *\n * @default medium\n */\n size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n /**\n * The position of the text relative to the avatar/presence.\n *\n * @default after\n */\n textPosition?: 'after' | 'before' | 'below';\n\n /**\n * The vertical alignment of the text relative to the avatar/presence.\n *\n * @default start\n */\n textAlignment?: 'center' | 'start';\n};\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n /**\n * The number of text lines used.\n */\n numTextLines: number;\n };\n"],"mappings":"AAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Persona/index.ts"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
@@ -12,21 +12,7 @@ export const renderPersona_unstable = state => {
|
|
12
12
|
slots,
|
13
13
|
slotProps
|
14
14
|
} = getSlots(state);
|
15
|
-
const coin = presenceOnly ? slots.presence && /*#__PURE__*/React.createElement(slots.presence,
|
16
|
-
|
17
|
-
}) : slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, {
|
18
|
-
...slotProps.avatar
|
19
|
-
});
|
20
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
21
|
-
...slotProps.root
|
22
|
-
}, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/React.createElement(slots.primaryText, {
|
23
|
-
...slotProps.primaryText
|
24
|
-
}), slots.secondaryText && /*#__PURE__*/React.createElement(slots.secondaryText, {
|
25
|
-
...slotProps.secondaryText
|
26
|
-
}), slots.tertiaryText && /*#__PURE__*/React.createElement(slots.tertiaryText, {
|
27
|
-
...slotProps.tertiaryText
|
28
|
-
}), slots.quaternaryText && /*#__PURE__*/React.createElement(slots.quaternaryText, {
|
29
|
-
...slotProps.quaternaryText
|
30
|
-
}), textPosition === 'before' && coin);
|
15
|
+
const coin = presenceOnly ? slots.presence && /*#__PURE__*/React.createElement(slots.presence, slotProps.presence) : slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, slotProps.avatar);
|
16
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/React.createElement(slots.primaryText, slotProps.primaryText), slots.secondaryText && /*#__PURE__*/React.createElement(slots.secondaryText, slotProps.secondaryText), slots.tertiaryText && /*#__PURE__*/React.createElement(slots.tertiaryText, slotProps.tertiaryText), slots.quaternaryText && /*#__PURE__*/React.createElement(slots.quaternaryText, slotProps.quaternaryText), textPosition === 'before' && coin);
|
31
17
|
};
|
32
18
|
//# sourceMappingURL=renderPersona.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderPersona_unstable","state","presenceOnly","textPosition","slots","slotProps","coin","presence","createElement","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"sources":["
|
1
|
+
{"version":3,"names":["React","getSlots","renderPersona_unstable","state","presenceOnly","textPosition","slots","slotProps","coin","presence","createElement","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"sources":["../../../src/components/Persona/renderPersona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<PersonaSlots>(state);\n\n const coin = presenceOnly\n ? slots.presence && <slots.presence {...slotProps.presence} />\n : slots.avatar && <slots.avatar {...slotProps.avatar} />;\n\n return (\n <slots.root {...slotProps.root}>\n {(textPosition === 'after' || textPosition === 'below') && coin}\n {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}\n {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}\n {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}\n {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}\n {textPosition === 'before' && coin}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,sBAAA,GAA0BC,KAAA,IAAwB;EAC7D,MAAM;IAAEC,YAAA;IAAcC;EAAY,CAAE,GAAGF,KAAA;EACvC,MAAM;IAAEG,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAuBE,KAAA;EAEpD,MAAMK,IAAA,GAAOJ,YAAA,GACTE,KAAA,CAAMG,QAAQ,iBAAIT,KAAA,CAAAU,aAAA,CAACJ,KAAA,CAAMG,QAAQ,EAAKF,SAAA,CAAUE,QAAQ,IACxDH,KAAA,CAAMK,MAAM,iBAAIX,KAAA,CAAAU,aAAA,CAACJ,KAAA,CAAMK,MAAM,EAAKJ,SAAA,CAAUI,MAAM,CAAI;EAE1D,oBACEX,KAAA,CAAAU,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,EAC3B,CAACP,YAAA,KAAiB,WAAWA,YAAA,KAAiB,OAAM,KAAMG,IAAA,EAC1DF,KAAA,CAAMO,WAAW,iBAAIb,KAAA,CAAAU,aAAA,CAACJ,KAAA,CAAMO,WAAW,EAAKN,SAAA,CAAUM,WAAW,GACjEP,KAAA,CAAMQ,aAAa,iBAAId,KAAA,CAAAU,aAAA,CAACJ,KAAA,CAAMQ,aAAa,EAAKP,SAAA,CAAUO,aAAa,GACvER,KAAA,CAAMS,YAAY,iBAAIf,KAAA,CAAAU,aAAA,CAACJ,KAAA,CAAMS,YAAY,EAAKR,SAAA,CAAUQ,YAAY,GACpET,KAAA,CAAMU,cAAc,iBAAIhB,KAAA,CAAAU,aAAA,CAACJ,KAAA,CAAMU,cAAc,EAAKT,SAAA,CAAUS,cAAc,GAC1EX,YAAA,KAAiB,YAAYG,IAAA;AAGpC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Avatar","getNativeElementProps","resolveShorthand","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","required","defaultProps","children","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"sources":["
|
1
|
+
{"version":3,"names":["React","Avatar","getNativeElementProps","resolveShorthand","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","required","defaultProps","children","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"sources":["../../../src/components/Persona/usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps, resolveShorthand } 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 = resolveShorthand(props.primaryText, {\n required: true,\n defaultProps: {\n children: name,\n },\n });\n const secondaryText = resolveShorthand(props.secondaryText);\n const tertiaryText = resolveShorthand(props.tertiaryText);\n const quaternaryText = resolveShorthand(props.quaternaryText);\n\n const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n return {\n numTextLines,\n presenceOnly,\n size,\n textAlignment,\n textPosition,\n\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: getNativeElementProps(\n 'div',\n {\n ...props,\n ref,\n },\n /* excludedPropNames */ ['name'],\n ),\n avatar: !presenceOnly\n ? resolveShorthand(props.avatar, {\n required: true,\n defaultProps: {\n name,\n badge: props.presence,\n size: avatarSizes[size],\n },\n })\n : undefined,\n presence: presenceOnly\n ? resolveShorthand(props.presence, {\n defaultProps: {\n size: presenceSizes[size],\n },\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AACxD,SAASC,aAAa,QAAQ;AAG9B;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG,MAAM;IAAEC,IAAA;IAAMC,YAAA,GAAe,KAAK;IAAEC,IAAA,GAAO;IAAUC,aAAA,GAAgB;IAASC,YAAA,GAAe;EAAO,CAAE,GAAGN,KAAA;EAEzG,MAAMO,WAAA,GAAcV,gBAAA,CAAiBG,KAAA,CAAMO,WAAW,EAAE;IACtDC,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZC,QAAA,EAAUR;IACZ;EACF;EACA,MAAMS,aAAA,GAAgBd,gBAAA,CAAiBG,KAAA,CAAMW,aAAa;EAC1D,MAAMC,YAAA,GAAef,gBAAA,CAAiBG,KAAA,CAAMY,YAAY;EACxD,MAAMC,cAAA,GAAiBhB,gBAAA,CAAiBG,KAAA,CAAMa,cAAc;EAE5D,MAAMC,YAAA,GAAe,CAACP,WAAA,EAAaI,aAAA,EAAeC,YAAA,EAAcC,cAAA,CAAe,CAACE,MAAM,CAACC,OAAA,EAASC,MAAM;EAEtG,OAAO;IACLH,YAAA;IACAX,YAAA;IACAC,IAAA;IACAC,aAAA;IACAC,YAAA;IAEAY,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,MAAA,EAAQzB,MAAA;MACR0B,QAAA,EAAUvB,aAAA;MACVS,WAAA,EAAa;MACbI,aAAA,EAAe;MACfC,YAAA,EAAc;MACdC,cAAA,EAAgB;IAClB;IAEAM,IAAA,EAAMvB,qBAAA,CACJ,OACA;MACE,GAAGI,KAAK;MACRC;IACF,GACA,uBAAwB,CAAC,OAAO;IAElCmB,MAAA,EAAQ,CAACjB,YAAA,GACLN,gBAAA,CAAiBG,KAAA,CAAMoB,MAAM,EAAE;MAC7BZ,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZP,IAAA;QACAoB,KAAA,EAAOtB,KAAA,CAAMqB,QAAQ;QACrBjB,IAAA,EAAMmB,WAAW,CAACnB,IAAA;MACpB;IACF,KACAoB,SAAS;IACbH,QAAA,EAAUlB,YAAA,GACNN,gBAAA,CAAiBG,KAAA,CAAMqB,QAAQ,EAAE;MAC/BZ,YAAA,EAAc;QACZL,IAAA,EAAMqB,aAAa,CAACrB,IAAA;MACtB;IACF,KACAoB,SAAS;IACbjB,WAAA;IACAI,aAAA;IACAC,YAAA;IACAC;EACF;AACF;AAEA,MAAMY,aAAA,GAAgB;EACpB,eAAe;EACfC,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;EACP,eAAe;EACfC,IAAA,EAAM;AACR;AAEA,MAAMN,WAAA,GAAc;EAClB,eAAe;EACfG,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;EACP,eAAe;EACfC,IAAA,EAAM;AACR"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","useStyles","beforeAfterCenter","wkccdc","after","before","B7hvi0a","Budl1dq","below","Bxotwcr","media","Ijaq50","mediaBeforeAfterCenter","start","qb2dma","center","afterAlignToPrimary","Bw0ie65","beforeAlignToPrimary","Br312pm","secondLineSpacing","B6of3ja","primary","secondary","tertiary","quaternary","d","useAvatarSpacingStyles","Bs1gm4r","small","medium","large","huge","t21cq0","jrapky","Frg6f3","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","body1","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","caption1","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"sources":["../src/packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n },\n\n after: {\n // Intentionally empty\n },\n before: {\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n gridAutoFlow: 'unset',\n justifyItems: 'center',\n gridTemplateColumns: 'unset',\n },\n\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n\n secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n rootClassName,\n alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(\n optionalTextBaseClassName,\n !presenceOnly && size === 'huge' && textStyles.body1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"mappings":"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"}
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","useStyles","beforeAfterCenter","wkccdc","after","before","B7hvi0a","Budl1dq","below","Bxotwcr","media","Ijaq50","mediaBeforeAfterCenter","start","qb2dma","center","afterAlignToPrimary","Bw0ie65","beforeAlignToPrimary","Br312pm","secondLineSpacing","B6of3ja","primary","secondary","tertiary","quaternary","d","useAvatarSpacingStyles","Bs1gm4r","small","medium","large","huge","t21cq0","jrapky","Frg6f3","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","body1","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","caption1","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"sources":["../../../src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n },\n\n after: {\n // Intentionally empty\n },\n before: {\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n gridAutoFlow: 'unset',\n justifyItems: 'center',\n gridTemplateColumns: 'unset',\n },\n\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n\n secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n rootClassName,\n alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(\n optionalTextBaseClassName,\n !presenceOnly && size === 'huge' && textStyles.body1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"mappings":"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"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"sources":["../src/
|
1
|
+
{"version":3,"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n Persona,\n personaClassNames,\n renderPersona_unstable,\n usePersonaStyles_unstable,\n usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd"}
|
package/lib-commonjs/Persona.js
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./components/Persona/index"), exports);
|
7
|
+
//# sourceMappingURL=Persona.js.map
|
8
|
+
|
8
9
|
//# sourceMappingURL=Persona.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/Persona.js"],"sourcesContent":["export * from './components/Persona/index';\n//# sourceMappingURL=Persona.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,mCAAmC"}
|
@@ -1,26 +1,24 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "Persona", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>Persona
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
usePersonaStyles_1.usePersonaStyles_unstable(state);
|
19
|
-
const {
|
20
|
-
usePersonaStyles_unstable: useCustomStyles
|
21
|
-
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
22
|
-
useCustomStyles(state);
|
23
|
-
return renderPersona_1.renderPersona_unstable(state);
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _renderPersona = require("./renderPersona");
|
12
|
+
const _usePersona = require("./usePersona");
|
13
|
+
const _usePersonaStyles = require("./usePersonaStyles");
|
14
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
15
|
+
const Persona = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
16
|
+
const state = (0, _usePersona.usePersona_unstable)(props, ref);
|
17
|
+
(0, _usePersonaStyles.usePersonaStyles_unstable)(state);
|
18
|
+
const { usePersonaStyles_unstable: useCustomStyles } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
|
19
|
+
useCustomStyles(state);
|
20
|
+
return (0, _renderPersona.renderPersona_unstable)(state);
|
24
21
|
});
|
25
|
-
|
22
|
+
Persona.displayName = 'Persona'; //# sourceMappingURL=Persona.js.map
|
23
|
+
|
26
24
|
//# sourceMappingURL=Persona.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/Persona/Persona.js"],"sourcesContent":["import * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\n * or an Avatar with a PresenceBadge.\n */\nexport const Persona = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = usePersona_unstable(props, ref);\n usePersonaStyles_unstable(state);\n const {\n usePersonaStyles_unstable: useCustomStyles\n } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n return renderPersona_unstable(state);\n});\nPersona.displayName = 'Persona';\n//# sourceMappingURL=Persona.js.map"],"names":["Persona","React","forwardRef","props","ref","state","usePersona_unstable","usePersonaStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderPersona_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;+BACgB;4BACH;kCACM;qCACG;AAKtC,MAAMA,UAAU,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnE,MAAMC,QAAQC,IAAAA,+BAAmB,EAACH,OAAOC;IACzCG,IAAAA,2CAAyB,EAACF;IAC1B,MAAM,EACJE,2BAA2BC,gBAAe,EAC3C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,qCAAsB,EAACL;AAChC;AACAL,QAAQW,WAAW,GAAG,WACtB,mCAAmC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/Persona/Persona.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Persona.types.js.map"],"names":[],"mappings":";;;;CACA,yCAAyC"}
|
@@ -1,12 +1,13 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./Persona"), exports);
|
7
|
+
_exportStar(require("./Persona.types"), exports);
|
8
|
+
_exportStar(require("./renderPersona"), exports);
|
9
|
+
_exportStar(require("./usePersona"), exports);
|
10
|
+
_exportStar(require("./usePersonaStyles"), exports);
|
11
|
+
//# sourceMappingURL=index.js.map
|
12
|
+
|
12
13
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/Persona/index.js"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
@@ -1,39 +1,19 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "renderPersona_unstable", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>renderPersona_unstable
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
const
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
} = state;
|
17
|
-
const {
|
18
|
-
slots,
|
19
|
-
slotProps
|
20
|
-
} = react_utilities_1.getSlots(state);
|
21
|
-
const coin = presenceOnly ? slots.presence && React.createElement(slots.presence, {
|
22
|
-
...slotProps.presence
|
23
|
-
}) : slots.avatar && React.createElement(slots.avatar, {
|
24
|
-
...slotProps.avatar
|
25
|
-
});
|
26
|
-
return React.createElement(slots.root, {
|
27
|
-
...slotProps.root
|
28
|
-
}, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && React.createElement(slots.primaryText, {
|
29
|
-
...slotProps.primaryText
|
30
|
-
}), slots.secondaryText && React.createElement(slots.secondaryText, {
|
31
|
-
...slotProps.secondaryText
|
32
|
-
}), slots.tertiaryText && React.createElement(slots.tertiaryText, {
|
33
|
-
...slotProps.tertiaryText
|
34
|
-
}), slots.quaternaryText && React.createElement(slots.quaternaryText, {
|
35
|
-
...slotProps.quaternaryText
|
36
|
-
}), textPosition === 'before' && coin);
|
37
|
-
};
|
38
|
-
exports.renderPersona_unstable = renderPersona_unstable;
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
12
|
+
const renderPersona_unstable = (state)=>{
|
13
|
+
const { presenceOnly , textPosition } = state;
|
14
|
+
const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
|
15
|
+
const coin = presenceOnly ? slots.presence && /*#__PURE__*/ _react.createElement(slots.presence, slotProps.presence) : slots.avatar && /*#__PURE__*/ _react.createElement(slots.avatar, slotProps.avatar);
|
16
|
+
return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/ _react.createElement(slots.primaryText, slotProps.primaryText), slots.secondaryText && /*#__PURE__*/ _react.createElement(slots.secondaryText, slotProps.secondaryText), slots.tertiaryText && /*#__PURE__*/ _react.createElement(slots.tertiaryText, slotProps.tertiaryText), slots.quaternaryText && /*#__PURE__*/ _react.createElement(slots.quaternaryText, slotProps.quaternaryText), textPosition === 'before' && coin);
|
17
|
+
}; //# sourceMappingURL=renderPersona.js.map
|
18
|
+
|
39
19
|
//# sourceMappingURL=renderPersona.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/Persona/renderPersona.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = state => {\n const {\n presenceOnly,\n textPosition\n } = state;\n const {\n slots,\n slotProps\n } = getSlots(state);\n const coin = presenceOnly ? slots.presence && /*#__PURE__*/React.createElement(slots.presence, slotProps.presence) : slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, slotProps.avatar);\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/React.createElement(slots.primaryText, slotProps.primaryText), slots.secondaryText && /*#__PURE__*/React.createElement(slots.secondaryText, slotProps.secondaryText), slots.tertiaryText && /*#__PURE__*/React.createElement(slots.tertiaryText, slotProps.tertiaryText), slots.quaternaryText && /*#__PURE__*/React.createElement(slots.quaternaryText, slotProps.quaternaryText), textPosition === 'before' && coin);\n};\n//# sourceMappingURL=renderPersona.js.map"],"names":["renderPersona_unstable","state","presenceOnly","textPosition","slots","slotProps","getSlots","coin","presence","React","createElement","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,yBAAyBC,CAAAA,QAAS;IAC7C,MAAM,EACJC,aAAY,EACZC,aAAY,EACb,GAAGF;IACJ,MAAM,EACJG,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACL;IACb,MAAMM,OAAOL,eAAeE,MAAMI,QAAQ,IAAI,WAAW,GAAEC,OAAMC,aAAa,CAACN,MAAMI,QAAQ,EAAEH,UAAUG,QAAQ,IAAIJ,MAAMO,MAAM,IAAI,WAAW,GAAEF,OAAMC,aAAa,CAACN,MAAMO,MAAM,EAAEN,UAAUM,MAAM,CAAC;IACrM,OAAO,WAAW,GAAEF,OAAMC,aAAa,CAACN,MAAMQ,IAAI,EAAEP,UAAUO,IAAI,EAAE,AAACT,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAM,KAAMI,MAAMH,MAAMS,WAAW,IAAI,WAAW,GAAEJ,OAAMC,aAAa,CAACN,MAAMS,WAAW,EAAER,UAAUQ,WAAW,GAAGT,MAAMU,aAAa,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACN,MAAMU,aAAa,EAAET,UAAUS,aAAa,GAAGV,MAAMW,YAAY,IAAI,WAAW,GAAEN,OAAMC,aAAa,CAACN,MAAMW,YAAY,EAAEV,UAAUU,YAAY,GAAGX,MAAMY,cAAc,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACN,MAAMY,cAAc,EAAEX,UAAUW,cAAc,GAAGb,iBAAiB,YAAYI;AACzjB,GACA,yCAAyC"}
|