@fluentui/react-persona 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.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.
Files changed (35) hide show
  1. package/CHANGELOG.json +15 -15
  2. package/CHANGELOG.md +10 -10
  3. package/lib/Persona.js +1 -1
  4. package/lib/Persona.js.map +1 -1
  5. package/lib/components/Persona/Persona.js +6 -6
  6. package/lib/components/Persona/Persona.js.map +1 -1
  7. package/lib/components/Persona/Persona.types.js.map +1 -1
  8. package/lib/components/Persona/index.js +5 -5
  9. package/lib/components/Persona/index.js.map +1 -1
  10. package/lib/components/Persona/renderPersona.js +18 -4
  11. package/lib/components/Persona/renderPersona.js.map +1 -1
  12. package/lib/components/Persona/usePersona.js +21 -22
  13. package/lib/components/Persona/usePersona.js.map +1 -1
  14. package/lib/components/Persona/usePersonaStyles.js +20 -20
  15. package/lib/components/Persona/usePersonaStyles.js.map +1 -1
  16. package/lib/index.js +1 -1
  17. package/lib/index.js.map +1 -1
  18. package/lib-commonjs/Persona.js +4 -5
  19. package/lib-commonjs/Persona.js.map +1 -1
  20. package/lib-commonjs/components/Persona/Persona.js +21 -19
  21. package/lib-commonjs/components/Persona/Persona.js.map +1 -1
  22. package/lib-commonjs/components/Persona/Persona.types.js +2 -3
  23. package/lib-commonjs/components/Persona/Persona.types.js.map +1 -1
  24. package/lib-commonjs/components/Persona/index.js +8 -9
  25. package/lib-commonjs/components/Persona/index.js.map +1 -1
  26. package/lib-commonjs/components/Persona/renderPersona.js +35 -15
  27. package/lib-commonjs/components/Persona/renderPersona.js.map +1 -1
  28. package/lib-commonjs/components/Persona/usePersona.js +84 -80
  29. package/lib-commonjs/components/Persona/usePersona.js.map +1 -1
  30. package/lib-commonjs/components/Persona/usePersonaStyles.js +208 -252
  31. package/lib-commonjs/components/Persona/usePersonaStyles.js.map +1 -1
  32. package/lib-commonjs/index.js +33 -16
  33. package/lib-commonjs/index.js.map +1 -1
  34. package/package.json +10 -9
  35. package/.swcrc +0 -39
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-persona",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 17 Mar 2023 15:00:00 GMT",
6
- "tag": "@fluentui/react-persona_v0.0.0-nightly-20230317-1454.1",
7
- "version": "0.0.0-nightly-20230317-1454.1",
5
+ "date": "Tue, 21 Mar 2023 04:50:00 GMT",
6
+ "tag": "@fluentui/react-persona_v0.0.0-nightly-20230321-0440.1",
7
+ "version": "0.0.0-nightly-20230321-0440.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,38 +16,38 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-persona",
19
- "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230317-1454.1",
20
- "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
19
+ "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230321-0440.1",
20
+ "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
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-20230317-1454.1",
26
- "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
25
+ "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230321-0440.1",
26
+ "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
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-20230317-1454.1",
32
- "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
31
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1",
32
+ "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
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-20230317-1454.1",
38
- "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
37
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1",
38
+ "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
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-20230317-1454.1",
44
- "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
43
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1",
44
+ "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
45
45
  },
46
46
  {
47
47
  "author": "beachball",
48
48
  "package": "@fluentui/react-persona",
49
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1",
50
- "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
49
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230321-0440.1",
50
+ "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
51
51
  }
52
52
  ]
53
53
  }
package/CHANGELOG.md CHANGED
@@ -1,23 +1,23 @@
1
1
  # Change Log - @fluentui/react-persona
2
2
 
3
- This log was last generated on Fri, 17 Mar 2023 15:00:00 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 21 Mar 2023 04:50:00 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230317-1454.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230317-1454.1)
7
+ ## [0.0.0-nightly-20230321-0440.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230321-0440.1)
8
8
 
9
- Fri, 17 Mar 2023 15:00:00 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.4..@fluentui/react-persona_v0.0.0-nightly-20230317-1454.1)
9
+ Tue, 21 Mar 2023 04:50:00 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.4..@fluentui/react-persona_v0.0.0-nightly-20230321-0440.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-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
16
- - Bump @fluentui/react-badge to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
17
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
18
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
19
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
15
+ - Bump @fluentui/react-avatar to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
16
+ - Bump @fluentui/react-badge to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
18
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
19
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
20
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
21
21
 
22
22
  ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.4)
23
23
 
package/lib/Persona.js CHANGED
@@ -1,2 +1,2 @@
1
- export * from "./components/Persona/index";
1
+ export * from './components/Persona/index';
2
2
  //# sourceMappingURL=Persona.js.map
package/lib/Persona.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../src/Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"mappings":"AAAA,cAAc"}
1
+ {"version":3,"file":"Persona.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-persona/src/Persona.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Persona/index';\n"]}
package/lib/components/Persona/Persona.js CHANGED
@@ -1,8 +1,8 @@
1
- import * as React from "react";
2
- import { renderPersona_unstable } from "./renderPersona";
3
- import { usePersona_unstable } from "./usePersona";
4
- import { usePersonaStyles_unstable } from "./usePersonaStyles";
5
- import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
1
+ import * as React from 'react';
2
+ import { renderPersona_unstable } from './renderPersona';
3
+ import { usePersona_unstable } from './usePersona';
4
+ import { usePersonaStyles_unstable } from './usePersonaStyles';
5
+ import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
6
6
  /**
7
7
  * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
8
8
  * or an Avatar with a PresenceBadge.
@@ -16,5 +16,5 @@ export const Persona = /*#__PURE__*/React.forwardRef((props, ref) => {
16
16
  useCustomStyles(state);
17
17
  return renderPersona_unstable(state);
18
18
  });
19
- Persona.displayName = "Persona";
19
+ Persona.displayName = 'Persona';
20
20
  //# sourceMappingURL=Persona.js.map
package/lib/components/Persona/Persona.js.map CHANGED
@@ -1 +1 @@
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
+ {"version":3,"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHooks_unstable","Persona","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-persona/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;;AAIA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGP,mBAAmB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE7CL,yBAAyB,CAACM,KAAK,CAAC;EAEhC,MAAM;IAAEN,yBAAyB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACrFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,sBAAsB,CAACQ,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,OAAO,CAACM,WAAW,GAAG,SAAS"}
package/lib/components/Persona/Persona.types.js.map CHANGED
@@ -1 +1 @@
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
+ {"version":3,"file":"Persona.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/Persona.types.ts"],"names":[],"mappings":"","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"]}
package/lib/components/Persona/index.js CHANGED
@@ -1,6 +1,6 @@
1
- export * from "./Persona";
2
- export * from "./Persona.types";
3
- export * from "./renderPersona";
4
- export * from "./usePersona";
5
- export * from "./usePersonaStyles";
1
+ export * from './Persona';
2
+ export * from './Persona.types';
3
+ export * from './renderPersona';
4
+ export * from './usePersona';
5
+ export * from './usePersonaStyles';
6
6
  //# sourceMappingURL=index.js.map
package/lib/components/Persona/index.js.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"]}
package/lib/components/Persona/renderPersona.js CHANGED
@@ -1,5 +1,5 @@
1
- import * as React from "react";
2
- import { getSlots } from "@fluentui/react-utilities";
1
+ import * as React from 'react';
2
+ import { getSlots } from '@fluentui/react-utilities';
3
3
  /**
4
4
  * Render the final JSX of Persona
5
5
  */
@@ -12,7 +12,21 @@ 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, 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);
15
+ const coin = presenceOnly ? slots.presence && /*#__PURE__*/React.createElement(slots.presence, {
16
+ ...slotProps.presence
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);
17
31
  };
18
32
  //# sourceMappingURL=renderPersona.js.map
package/lib/components/Persona/renderPersona.js.map CHANGED
@@ -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":["../../../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
+ {"version":3,"names":["React","getSlots","renderPersona_unstable","state","presenceOnly","textPosition","slots","slotProps","coin","presence","createElement","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"sources":["../../../../../../../../../packages/react-components/react-persona/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,YAAY;IAAEC;EAAY,CAAE,GAAGF,KAAK;EAC5C,MAAM;IAAEG,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeE,KAAK,CAAC;EAE1D,MAAMK,IAAI,GAAGJ,YAAY,GACrBE,KAAK,CAACG,QAAQ,iBAAIT,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACG,QAAQ;IAAA,GAAKF,SAAS,CAACE;EAAQ,EAAI,GAC5DH,KAAK,CAACK,MAAM,iBAAIX,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,EAAI;EAE1D,oBACEX,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,GAC3B,CAACP,YAAY,KAAK,OAAO,IAAIA,YAAY,KAAK,OAAO,KAAKG,IAAI,EAC9DF,KAAK,CAACO,WAAW,iBAAIb,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACO,WAAW;IAAA,GAAKN,SAAS,CAACM;EAAW,EAAI,EACrEP,KAAK,CAACQ,aAAa,iBAAId,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACQ,aAAa;IAAA,GAAKP,SAAS,CAACO;EAAa,EAAI,EAC3ER,KAAK,CAACS,YAAY,iBAAIf,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACS,YAAY;IAAA,GAAKR,SAAS,CAACQ;EAAY,EAAI,EACxET,KAAK,CAACU,cAAc,iBAAIhB,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACU,cAAc;IAAA,GAAKT,SAAS,CAACS;EAAc,EAAI,EAC9EX,YAAY,KAAK,QAAQ,IAAIG,IAAI,CACvB;AAEjB,CAAC"}
package/lib/components/Persona/usePersona.js CHANGED
@@ -1,7 +1,6 @@
1
- import * as React from "react";
2
- import { Avatar } from "@fluentui/react-avatar";
3
- import { getNativeElementProps, resolveShorthand } from "@fluentui/react-utilities";
4
- import { PresenceBadge } from "@fluentui/react-badge";
1
+ import { Avatar } from '@fluentui/react-avatar';
2
+ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
3
+ import { PresenceBadge } from '@fluentui/react-badge';
5
4
  /**
6
5
  * Create the state required to render Persona.
7
6
  *
@@ -15,9 +14,9 @@ export const usePersona_unstable = (props, ref) => {
15
14
  const {
16
15
  name,
17
16
  presenceOnly = false,
18
- size = "medium",
19
- textAlignment = "start",
20
- textPosition = "after"
17
+ size = 'medium',
18
+ textAlignment = 'start',
19
+ textPosition = 'after'
21
20
  } = props;
22
21
  const primaryText = resolveShorthand(props.primaryText, {
23
22
  required: true,
@@ -36,18 +35,18 @@ export const usePersona_unstable = (props, ref) => {
36
35
  textAlignment,
37
36
  textPosition,
38
37
  components: {
39
- root: "div",
38
+ root: 'div',
40
39
  avatar: Avatar,
41
40
  presence: PresenceBadge,
42
- primaryText: "span",
43
- secondaryText: "span",
44
- tertiaryText: "span",
45
- quaternaryText: "span"
41
+ primaryText: 'span',
42
+ secondaryText: 'span',
43
+ tertiaryText: 'span',
44
+ quaternaryText: 'span'
46
45
  },
47
- root: getNativeElementProps("div", {
46
+ root: getNativeElementProps('div', {
48
47
  ...props,
49
48
  ref
50
- }, /* excludedPropNames */["name"]),
49
+ }, /* excludedPropNames */['name']),
51
50
  avatar: !presenceOnly ? resolveShorthand(props.avatar, {
52
51
  required: true,
53
52
  defaultProps: {
@@ -68,19 +67,19 @@ export const usePersona_unstable = (props, ref) => {
68
67
  };
69
68
  };
70
69
  const presenceSizes = {
71
- "extra-small": "tiny",
72
- small: "extra-small",
73
- medium: "small",
74
- large: "medium",
75
- "extra-large": "large",
76
- huge: "large"
70
+ 'extra-small': 'tiny',
71
+ small: 'extra-small',
72
+ medium: 'small',
73
+ large: 'medium',
74
+ 'extra-large': 'large',
75
+ huge: 'large'
77
76
  };
78
77
  const avatarSizes = {
79
- "extra-small": 20,
78
+ 'extra-small': 20,
80
79
  small: 28,
81
80
  medium: 32,
82
81
  large: 36,
83
- "extra-large": 40,
82
+ 'extra-large': 40,
84
83
  huge: 56
85
84
  };
86
85
  //# sourceMappingURL=usePersona.js.map
package/lib/components/Persona/usePersona.js.map CHANGED
@@ -1 +1 @@
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
+ {"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":["../../../../../../../../../packages/react-components/react-persona/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":"AACA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnF,SAASC,aAAa,QAAQ,uBAAuB;AAGrD;;;;;;;;;AASA,OAAO,MAAMC,mBAAmB,GAAGA,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG,MAAM;IAAEC,IAAI;IAAEC,YAAY,GAAG,KAAK;IAAEC,IAAI,GAAG,QAAQ;IAAEC,aAAa,GAAG,OAAO;IAAEC,YAAY,GAAG;EAAO,CAAE,GAAGN,KAAK;EAE9G,MAAMO,WAAW,GAAGV,gBAAgB,CAACG,KAAK,CAACO,WAAW,EAAE;IACtDC,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZC,QAAQ,EAAER;;GAEb,CAAC;EACF,MAAMS,aAAa,GAAGd,gBAAgB,CAACG,KAAK,CAACW,aAAa,CAAC;EAC3D,MAAMC,YAAY,GAAGf,gBAAgB,CAACG,KAAK,CAACY,YAAY,CAAC;EACzD,MAAMC,cAAc,GAAGhB,gBAAgB,CAACG,KAAK,CAACa,cAAc,CAAC;EAE7D,MAAMC,YAAY,GAAG,CAACP,WAAW,EAAEI,aAAa,EAAEC,YAAY,EAAEC,cAAc,CAAC,CAACE,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM;EAEtG,OAAO;IACLH,YAAY;IACZX,YAAY;IACZC,IAAI;IACJC,aAAa;IACbC,YAAY;IAEZY,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,MAAM,EAAEzB,MAAM;MACd0B,QAAQ,EAAEvB,aAAa;MACvBS,WAAW,EAAE,MAAM;MACnBI,aAAa,EAAE,MAAM;MACrBC,YAAY,EAAE,MAAM;MACpBC,cAAc,EAAE;KACjB;IAEDM,IAAI,EAAEvB,qBAAqB,CACzB,KAAK,EACL;MACE,GAAGI,KAAK;MACRC;KACD,EACD,uBAAwB,CAAC,MAAM,CAAC,CACjC;IACDmB,MAAM,EAAE,CAACjB,YAAY,GACjBN,gBAAgB,CAACG,KAAK,CAACoB,MAAM,EAAE;MAC7BZ,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZP,IAAI;QACJoB,KAAK,EAAEtB,KAAK,CAACqB,QAAQ;QACrBjB,IAAI,EAAEmB,WAAW,CAACnB,IAAI;;KAEzB,CAAC,GACFoB,SAAS;IACbH,QAAQ,EAAElB,YAAY,GAClBN,gBAAgB,CAACG,KAAK,CAACqB,QAAQ,EAAE;MAC/BZ,YAAY,EAAE;QACZL,IAAI,EAAEqB,aAAa,CAACrB,IAAI;;KAE3B,CAAC,GACFoB,SAAS;IACbjB,WAAW;IACXI,aAAa;IACbC,YAAY;IACZC;GACD;AACH,CAAC;AAED,MAAMY,aAAa,GAAG;EACpB,aAAa,EAAE,MAAM;EACrBC,KAAK,EAAE,aAAa;EACpBC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE,QAAQ;EACf,aAAa,EAAE,OAAO;EACtBC,IAAI,EAAE;CACE;AAEV,MAAMN,WAAW,GAAG;EAClB,aAAa,EAAE,EAAE;EACjBG,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,EAAE;EACT,aAAa,EAAE,EAAE;EACjBC,IAAI,EAAE;CACE"}
package/lib/components/Persona/usePersonaStyles.js CHANGED
@@ -1,13 +1,13 @@
1
- import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
2
- import { tokens, typographyStyles } from "@fluentui/react-theme";
1
+ import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
3
  export const personaClassNames = {
4
- root: "fui-Persona",
5
- avatar: "fui-Persona__avatar",
6
- presence: "fui-Persona__presence",
7
- primaryText: "fui-Persona__primaryText",
8
- secondaryText: "fui-Persona__secondaryText",
9
- tertiaryText: "fui-Persona__tertiaryText",
10
- quaternaryText: "fui-Persona__quaternaryText"
4
+ root: 'fui-Persona',
5
+ avatar: 'fui-Persona__avatar',
6
+ presence: 'fui-Persona__presence',
7
+ primaryText: 'fui-Persona__primaryText',
8
+ secondaryText: 'fui-Persona__secondaryText',
9
+ tertiaryText: 'fui-Persona__tertiaryText',
10
+ quaternaryText: 'fui-Persona__quaternaryText'
11
11
  };
12
12
  const avatarSpacing = `--fui-Persona__avatar--spacing`;
13
13
  const useRootClassName = /*#__PURE__*/__resetStyles("rlroi9i", null, [".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"]);
@@ -116,8 +116,8 @@ export const usePersonaStyles_unstable = state => {
116
116
  textAlignment,
117
117
  textPosition
118
118
  } = state;
119
- const alignToPrimary = presenceOnly && textAlignment === "start" && size !== "extra-large" && size !== "huge";
120
- const alignBeforeAfterCenter = textPosition !== "below" && textAlignment === "center";
119
+ const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
120
+ const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
121
121
  const {
122
122
  primaryTextClassName,
123
123
  optionalTextClassName
@@ -131,10 +131,10 @@ export const usePersonaStyles_unstable = state => {
131
131
  };
132
132
  state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
133
133
  if (state.avatar) {
134
- state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== "below" && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
134
+ state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
135
135
  }
136
136
  if (state.presence) {
137
- state.presence.className = mergeClasses(personaClassNames.presence, textPosition !== "below" && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === "after" && alignToPrimary && styles.afterAlignToPrimary, textPosition === "before" && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
137
+ state.presence.className = mergeClasses(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
138
138
  }
139
139
  if (state.primaryText) {
140
140
  state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
@@ -192,28 +192,28 @@ const useTextClassNames = (state, alignToPrimary) => {
192
192
  let primaryTextSize;
193
193
  let alignToPrimaryClassName;
194
194
  if (presenceOnly) {
195
- if (size === "extra-small") {
195
+ if (size === 'extra-small') {
196
196
  primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
197
- } else if (size === "extra-large" || size === "huge") {
197
+ } else if (size === 'extra-large' || size === 'huge') {
198
198
  primaryTextSize = textStyles.subtitle2;
199
199
  }
200
200
  if (alignToPrimary) {
201
- if (textPosition === "before") {
201
+ if (textPosition === 'before') {
202
202
  alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
203
- } else if (textPosition === "after") {
203
+ } else if (textPosition === 'after') {
204
204
  alignToPrimaryClassName = textStyles.afterAlignToPrimary;
205
205
  }
206
206
  }
207
207
  } else {
208
- if (size === "huge") {
208
+ if (size === 'huge') {
209
209
  primaryTextSize = textStyles.subtitle2;
210
- } else if (size === "extra-large") {
210
+ } else if (size === 'extra-large') {
211
211
  primaryTextSize = textStyles.subtitle2;
212
212
  }
213
213
  }
214
214
  return {
215
215
  primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
216
- optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === "huge" && textStyles.body1, alignToPrimaryClassName)
216
+ optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
217
217
  };
218
218
  };
219
219
  //# sourceMappingURL=usePersonaStyles.js.map
package/lib/components/Persona/usePersonaStyles.js.map CHANGED
@@ -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/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":["../../../../../../../../../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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"}
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable } from "./Persona";
1
+ export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable } from './Persona';
2
2
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"sources":["../../../../../../../packages/react-components/react-persona/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,WAAW"}
package/lib-commonjs/Persona.js CHANGED
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
+
2
3
  Object.defineProperty(exports, "__esModule", {
3
- value: true
4
+ value: true
4
5
  });
5
- const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
- _exportStar(require("./components/Persona/index"), exports);
7
- //# sourceMappingURL=Persona.js.map
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
7
+ tslib_1.__exportStar(require("./components/Persona/index"), exports);
9
8
  //# sourceMappingURL=Persona.js.map
package/lib-commonjs/Persona.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/Persona.js"],"sourcesContent":["export * from \"./components/Persona/index\";\n//# sourceMappingURL=Persona.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,mCAAmC"}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-persona/src/Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gCAAAC,OAAA"}
package/lib-commonjs/components/Persona/Persona.js CHANGED
@@ -1,24 +1,26 @@
1
1
  "use strict";
2
+
2
3
  Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "Persona", {
6
- enumerable: true,
7
- get: ()=>Persona
4
+ value: true
8
5
  });
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);
6
+ exports.Persona = void 0;
7
+ const React = /*#__PURE__*/require("react");
8
+ const renderPersona_1 = /*#__PURE__*/require("./renderPersona");
9
+ const usePersona_1 = /*#__PURE__*/require("./usePersona");
10
+ const usePersonaStyles_1 = /*#__PURE__*/require("./usePersonaStyles");
11
+ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
12
+ /**
13
+ * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
14
+ * or an Avatar with a PresenceBadge.
15
+ */
16
+ exports.Persona = /*#__PURE__*/React.forwardRef((props, ref) => {
17
+ const state = usePersona_1.usePersona_unstable(props, ref);
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);
21
24
  });
22
- Persona.displayName = "Persona"; //# sourceMappingURL=Persona.js.map
23
-
25
+ exports.Persona.displayName = 'Persona';
24
26
  //# sourceMappingURL=Persona.js.map