@fluentui/react-persona 9.5.0 → 9.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -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.map +1 -1
- package/lib/components/Persona/usePersona.js.map +1 -1
- package/lib/components/Persona/usePersonaStyles.styles.raw.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Persona.js.map +1 -1
- package/lib-commonjs/components/Persona/Persona.js.map +1 -1
- package/lib-commonjs/components/Persona/Persona.types.js.map +1 -1
- package/lib-commonjs/components/Persona/index.js.map +1 -1
- package/lib-commonjs/components/Persona/renderPersona.js.map +1 -1
- package/lib-commonjs/components/Persona/usePersona.js.map +1 -1
- package/lib-commonjs/components/Persona/usePersonaStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Persona/usePersonaStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,24 @@
|
|
1
1
|
# Change Log - @fluentui/react-persona
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.5.1)
|
8
|
+
|
9
|
+
Mon, 28 Jul 2025 18:44:12 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.5.0..@fluentui/react-persona_v9.5.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-avatar to v9.9.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
15
|
+
- Bump @fluentui/react-badge to v9.4.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
16
|
+
- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
18
|
+
|
7
19
|
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.5.0)
|
8
20
|
|
9
|
-
Thu, 17 Jul 2025 13:
|
21
|
+
Thu, 17 Jul 2025 13:49:43 GMT
|
10
22
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.4.7..@fluentui/react-persona_v9.5.0)
|
11
23
|
|
12
24
|
### Minor changes
|
package/lib/Persona.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type { PersonaProps, PersonaSlots, PersonaState } from './components/Persona/index';\nexport {\n Persona,\n personaClassNames,\n renderPersona_unstable,\n usePersonaStyles_unstable,\n usePersona_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type { PersonaProps, PersonaSlots, PersonaState } from './components/Persona/index';\nexport {\n Persona,\n personaClassNames,\n renderPersona_unstable,\n usePersonaStyles_unstable,\n usePersona_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"
|
1
|
+
{"version":3,"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.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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"],"names":[],"
|
1
|
+
{"version":3,"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"],"names":[],"mappings":"AAqFA;;CAEC,GACD,WAMI"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","personaClassNames","usePersonaStyles_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n const { presenceOnly, textPosition } = state;\n assertSlots<PersonaSlots>(state);\n\n const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n return (\n <state.root>\n {(textPosition === 'after' || textPosition === 'below') && coin}\n {state.primaryText && <state.primaryText />}\n {state.secondaryText && <state.secondaryText />}\n {state.tertiaryText && <state.tertiaryText />}\n {state.quaternaryText && <state.quaternaryText />}\n {textPosition === 'before' && coin}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderPersona_unstable","state","presenceOnly","textPosition","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"
|
1
|
+
{"version":3,"sources":["../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n const { presenceOnly, textPosition } = state;\n assertSlots<PersonaSlots>(state);\n\n const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n return (\n <state.root>\n {(textPosition === 'after' || textPosition === 'below') && coin}\n {state.primaryText && <state.primaryText />}\n {state.secondaryText && <state.secondaryText />}\n {state.tertiaryText && <state.tertiaryText />}\n {state.quaternaryText && <state.quaternaryText />}\n {textPosition === 'before' && coin}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderPersona_unstable","state","presenceOnly","textPosition","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;IACvCF,YAA0BE;IAE1B,MAAMG,OAAOF,eAAeD,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ,QAAMJ,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;IAEhG,qBACE,MAACL,MAAMM,IAAI;;YACPJ,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAM,KAAMC;YAC1DH,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;YAC3CR,MAAMS,YAAY,kBAAI,KAACT,MAAMS,YAAY;YACzCT,MAAMU,cAAc,kBAAI,KAACV,MAAMU,cAAc;YAC7CR,iBAAiB,YAAYC;;;AAGpC,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n const primaryText = slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: name,\n },\n elementType: 'span',\n });\n const secondaryText = slot.optional(props.secondaryText, { elementType: 'span' });\n const tertiaryText = slot.optional(props.tertiaryText, { elementType: 'span' });\n const quaternaryText = slot.optional(props.quaternaryText, { elementType: 'span' });\n const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n return {\n numTextLines,\n presenceOnly,\n size,\n textAlignment,\n textPosition,\n components: {\n root: 'div',\n avatar: Avatar,\n presence: PresenceBadge,\n primaryText: 'span',\n secondaryText: 'span',\n tertiaryText: 'span',\n quaternaryText: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n },\n /* excludedPropNames */ ['name'],\n ),\n { elementType: 'div' },\n ),\n avatar: !presenceOnly\n ? slot.optional(props.avatar, {\n renderByDefault: true,\n defaultProps: {\n name,\n badge: props.presence,\n size: avatarSizes[size],\n },\n elementType: Avatar,\n })\n : undefined,\n presence: presenceOnly\n ? slot.optional(props.presence, {\n defaultProps: {\n size: presenceSizes[size],\n },\n elementType: PresenceBadge,\n })\n : undefined,\n primaryText,\n secondaryText,\n tertiaryText,\n quaternaryText,\n };\n};\n\nconst presenceSizes = {\n 'extra-small': 'tiny',\n small: 'extra-small',\n medium: 'small',\n large: 'medium',\n 'extra-large': 'large',\n huge: 'large',\n} as const;\n\nconst avatarSizes = {\n 'extra-small': 20,\n small: 28,\n medium: 32,\n large: 36,\n 'extra-large': 40,\n huge: 56,\n} as const;\n"],"names":["React","Avatar","getIntrinsicElementProps","slot","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","always","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"
|
1
|
+
{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n const primaryText = slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: name,\n },\n elementType: 'span',\n });\n const secondaryText = slot.optional(props.secondaryText, { elementType: 'span' });\n const tertiaryText = slot.optional(props.tertiaryText, { elementType: 'span' });\n const quaternaryText = slot.optional(props.quaternaryText, { elementType: 'span' });\n const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n return {\n numTextLines,\n presenceOnly,\n size,\n textAlignment,\n textPosition,\n components: {\n root: 'div',\n avatar: Avatar,\n presence: PresenceBadge,\n primaryText: 'span',\n secondaryText: 'span',\n tertiaryText: 'span',\n quaternaryText: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n },\n /* excludedPropNames */ ['name'],\n ),\n { elementType: 'div' },\n ),\n avatar: !presenceOnly\n ? slot.optional(props.avatar, {\n renderByDefault: true,\n defaultProps: {\n name,\n badge: props.presence,\n size: avatarSizes[size],\n },\n elementType: Avatar,\n })\n : undefined,\n presence: presenceOnly\n ? slot.optional(props.presence, {\n defaultProps: {\n size: presenceSizes[size],\n },\n elementType: PresenceBadge,\n })\n : undefined,\n primaryText,\n secondaryText,\n tertiaryText,\n quaternaryText,\n };\n};\n\nconst presenceSizes = {\n 'extra-small': 'tiny',\n small: 'extra-small',\n medium: 'small',\n large: 'medium',\n 'extra-large': 'large',\n huge: 'large',\n} as const;\n\nconst avatarSizes = {\n 'extra-small': 20,\n small: 28,\n medium: 32,\n large: 36,\n 'extra-large': 40,\n huge: 56,\n} as const;\n"],"names":["React","Avatar","getIntrinsicElementProps","slot","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","always","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,aAAa,QAAQ,wBAAwB;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,IAAI,EAAEC,eAAe,KAAK,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,eAAe,OAAO,EAAE,GAAGN;IAEzG,MAAMO,cAAcV,KAAKW,QAAQ,CAACR,MAAMO,WAAW,EAAE;QACnDE,iBAAiB;QACjBC,cAAc;YACZC,UAAUT;QACZ;QACAU,aAAa;IACf;IACA,MAAMC,gBAAgBhB,KAAKW,QAAQ,CAACR,MAAMa,aAAa,EAAE;QAAED,aAAa;IAAO;IAC/E,MAAME,eAAejB,KAAKW,QAAQ,CAACR,MAAMc,YAAY,EAAE;QAAEF,aAAa;IAAO;IAC7E,MAAMG,iBAAiBlB,KAAKW,QAAQ,CAACR,MAAMe,cAAc,EAAE;QAAEH,aAAa;IAAO;IACjF,MAAMI,eAAe;QAACT;QAAaM;QAAeC;QAAcC;KAAe,CAACE,MAAM,CAACC,SAASC,MAAM;IACtG,OAAO;QACLH;QACAb;QACAC;QACAC;QACAC;QACAc,YAAY;YACVC,MAAM;YACNC,QAAQ3B;YACR4B,UAAUzB;YACVS,aAAa;YACbM,eAAe;YACfC,cAAc;YACdC,gBAAgB;QAClB;QAEAM,MAAMxB,KAAK2B,MAAM,CACf5B,yBACE,OACA;YACE,GAAGI,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,GACA,qBAAqB,GAAG;YAAC;SAAO,GAElC;YAAEW,aAAa;QAAM;QAEvBU,QAAQ,CAACnB,eACLN,KAAKW,QAAQ,CAACR,MAAMsB,MAAM,EAAE;YAC1Bb,iBAAiB;YACjBC,cAAc;gBACZR;gBACAuB,OAAOzB,MAAMuB,QAAQ;gBACrBnB,MAAMsB,WAAW,CAACtB,KAAK;YACzB;YACAQ,aAAajB;QACf,KACAgC;QACJJ,UAAUpB,eACNN,KAAKW,QAAQ,CAACR,MAAMuB,QAAQ,EAAE;YAC5Bb,cAAc;gBACZN,MAAMwB,aAAa,CAACxB,KAAK;YAC3B;YACAQ,aAAad;QACf,KACA6B;QACJpB;QACAM;QACAC;QACAC;IACF;AACF,EAAE;AAEF,MAAMa,gBAAgB;IACpB,eAAe;IACfC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMN,cAAc;IAClB,eAAe;IACfG,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.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 'use no memo';\n\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"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","color","colorNeutralForeground1","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
1
|
+
{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.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 'use no memo';\n\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"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","color","colorNeutralForeground1","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"mappings":"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"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"
|
1
|
+
{"version":3,"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"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type { PersonaProps, PersonaSlots, PersonaState } from './components/Persona/index';\nexport {\n Persona,\n personaClassNames,\n renderPersona_unstable,\n usePersonaStyles_unstable,\n usePersona_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"
|
1
|
+
{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type { PersonaProps, PersonaSlots, PersonaState } from './components/Persona/index';\nexport {\n Persona,\n personaClassNames,\n renderPersona_unstable,\n usePersonaStyles_unstable,\n usePersona_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eACtBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,6BAA6B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["
|
1
|
+
{"version":3,"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.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_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 useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;+BACQ,kBAAkB;4BACrB,eAAe;wCACT,4BAA4B;qCAG1B,kCAAkC;AAMvE,gBAAMA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,mCAAAA,EAAoBK,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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"],"names":[],"
|
1
|
+
{"version":3,"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"],"names":[],"mappings":"AAqFA;;CAEC,GACD,WAMI"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","
|
1
|
+
{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPG,yCAAiB;;;eAFjBF,qCAAsB;;;eAEHG,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n const { presenceOnly, textPosition } = state;\n assertSlots<PersonaSlots>(state);\n\n const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n return (\n <state.root>\n {(textPosition === 'after' || textPosition === 'below') && coin}\n {state.primaryText && <state.primaryText />}\n {state.secondaryText && <state.secondaryText />}\n {state.tertiaryText && <state.tertiaryText />}\n {state.quaternaryText && <state.quaternaryText />}\n {textPosition === 'before' && coin}\n </state.root>\n );\n};\n"],"names":["renderPersona_unstable","state","presenceOnly","textPosition","
|
1
|
+
{"version":3,"sources":["../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n const { presenceOnly, textPosition } = state;\n assertSlots<PersonaSlots>(state);\n\n const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n return (\n <state.root>\n {(textPosition === 'after' || textPosition === 'below') && coin}\n {state.primaryText && <state.primaryText />}\n {state.secondaryText && <state.secondaryText />}\n {state.tertiaryText && <state.tertiaryText />}\n {state.quaternaryText && <state.quaternaryText />}\n {textPosition === 'before' && coin}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderPersona_unstable","state","presenceOnly","textPosition","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,+BAA+B,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;QACvCF,2BAAAA,EAA0BE;IAE1B,MAAMG,OAAOF,eAAeD,MAAMI,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,QAAQ,EAAA,CAAA,KAAMJ,MAAMK,MAAM,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,MAAM,EAAA,CAAA;IAEhG,OAAA,WAAA,OACE,gBAAA,EAACL,MAAMM,IAAI,EAAA;;aACPJ,iBAAiB,WAAWA,iBAAiB,OAAA,CAAM,IAAMC;YAC1DH,MAAMO,WAAW,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,aAAa,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,aAAa,EAAA,CAAA;YAC3CR,MAAMS,YAAY,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,YAAY,EAAA,CAAA;YACzCT,MAAMU,cAAc,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,cAAc,EAAA,CAAA;YAC7CR,iBAAiB,YAAYC;;;AAGpC,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n const primaryText = slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: name,\n },\n elementType: 'span',\n });\n const secondaryText = slot.optional(props.secondaryText, { elementType: 'span' });\n const tertiaryText = slot.optional(props.tertiaryText, { elementType: 'span' });\n const quaternaryText = slot.optional(props.quaternaryText, { elementType: 'span' });\n const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n return {\n numTextLines,\n presenceOnly,\n size,\n textAlignment,\n textPosition,\n components: {\n root: 'div',\n avatar: Avatar,\n presence: PresenceBadge,\n primaryText: 'span',\n secondaryText: 'span',\n tertiaryText: 'span',\n quaternaryText: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n },\n /* excludedPropNames */ ['name'],\n ),\n { elementType: 'div' },\n ),\n avatar: !presenceOnly\n ? slot.optional(props.avatar, {\n renderByDefault: true,\n defaultProps: {\n name,\n badge: props.presence,\n size: avatarSizes[size],\n },\n elementType: Avatar,\n })\n : undefined,\n presence: presenceOnly\n ? slot.optional(props.presence, {\n defaultProps: {\n size: presenceSizes[size],\n },\n elementType: PresenceBadge,\n })\n : undefined,\n primaryText,\n secondaryText,\n tertiaryText,\n quaternaryText,\n };\n};\n\nconst presenceSizes = {\n 'extra-small': 'tiny',\n small: 'extra-small',\n medium: 'small',\n large: 'medium',\n 'extra-large': 'large',\n huge: 'large',\n} as const;\n\nconst avatarSizes = {\n 'extra-small': 20,\n small: 28,\n medium: 32,\n large: 36,\n 'extra-large': 40,\n huge: 56,\n} as const;\n"],"names":["usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","
|
1
|
+
{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n const primaryText = slot.optional(props.primaryText, {\n renderByDefault: true,\n defaultProps: {\n children: name,\n },\n elementType: 'span',\n });\n const secondaryText = slot.optional(props.secondaryText, { elementType: 'span' });\n const tertiaryText = slot.optional(props.tertiaryText, { elementType: 'span' });\n const quaternaryText = slot.optional(props.quaternaryText, { elementType: 'span' });\n const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n return {\n numTextLines,\n presenceOnly,\n size,\n textAlignment,\n textPosition,\n components: {\n root: 'div',\n avatar: Avatar,\n presence: PresenceBadge,\n primaryText: 'span',\n secondaryText: 'span',\n tertiaryText: 'span',\n quaternaryText: 'span',\n },\n\n root: slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n },\n /* excludedPropNames */ ['name'],\n ),\n { elementType: 'div' },\n ),\n avatar: !presenceOnly\n ? slot.optional(props.avatar, {\n renderByDefault: true,\n defaultProps: {\n name,\n badge: props.presence,\n size: avatarSizes[size],\n },\n elementType: Avatar,\n })\n : undefined,\n presence: presenceOnly\n ? slot.optional(props.presence, {\n defaultProps: {\n size: presenceSizes[size],\n },\n elementType: PresenceBadge,\n })\n : undefined,\n primaryText,\n secondaryText,\n tertiaryText,\n quaternaryText,\n };\n};\n\nconst presenceSizes = {\n 'extra-small': 'tiny',\n small: 'extra-small',\n medium: 'small',\n large: 'medium',\n 'extra-large': 'large',\n huge: 'large',\n} as const;\n\nconst avatarSizes = {\n 'extra-small': 20,\n small: 28,\n medium: 32,\n large: 36,\n 'extra-large': 40,\n huge: 56,\n} as const;\n"],"names":["React","Avatar","getIntrinsicElementProps","slot","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","always","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"mappings":";;;;+BAeaK;;;;;;;iEAfU,QAAQ;6BACR,yBAAyB;gCACD,4BAA4B;4BAC7C,wBAAwB;AAY/C,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EAAEC,IAAI,EAAEC,eAAe,KAAK,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,eAAe,OAAO,EAAE,GAAGN;IAEzG,MAAMO,cAAcV,oBAAAA,CAAKW,QAAQ,CAACR,MAAMO,WAAW,EAAE;QACnDE,iBAAiB;QACjBC,cAAc;YACZC,UAAUT;QACZ;QACAU,aAAa;IACf;IACA,MAAMC,gBAAgBhB,oBAAAA,CAAKW,QAAQ,CAACR,MAAMa,aAAa,EAAE;QAAED,aAAa;IAAO;IAC/E,MAAME,eAAejB,oBAAAA,CAAKW,QAAQ,CAACR,MAAMc,YAAY,EAAE;QAAEF,aAAa;IAAO;IAC7E,MAAMG,iBAAiBlB,oBAAAA,CAAKW,QAAQ,CAACR,MAAMe,cAAc,EAAE;QAAEH,aAAa;IAAO;IACjF,MAAMI,eAAe;QAACT;QAAaM;QAAeC;QAAcC;KAAe,CAACE,MAAM,CAACC,SAASC,MAAM;IACtG,OAAO;QACLH;QACAb;QACAC;QACAC;QACAC;QACAc,YAAY;YACVC,MAAM;YACNC,QAAQ3B,mBAAAA;YACR4B,UAAUzB,yBAAAA;YACVS,aAAa;YACbM,eAAe;YACfC,cAAc;YACdC,gBAAgB;QAClB;QAEAM,MAAMxB,oBAAAA,CAAK2B,MAAM,KACf5B,wCAAAA,EACE,OACA;YACE,GAAGI,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,GACA,qBAAqB,GAAG;YAAC;SAAO,GAElC;YAAEW,aAAa;QAAM;QAEvBU,QAAQ,CAACnB,eACLN,oBAAAA,CAAKW,QAAQ,CAACR,MAAMsB,MAAM,EAAE;YAC1Bb,iBAAiB;YACjBC,cAAc;gBACZR;gBACAuB,OAAOzB,MAAMuB,QAAQ;gBACrBnB,MAAMsB,WAAW,CAACtB,KAAK;YACzB;YACAQ,aAAajB,mBAAAA;QACf,KACAgC;QACJJ,UAAUpB,eACNN,oBAAAA,CAAKW,QAAQ,CAACR,MAAMuB,QAAQ,EAAE;YAC5Bb,cAAc;gBACZN,MAAMwB,aAAa,CAACxB,KAAK;YAC3B;YACAQ,aAAad,yBAAAA;QACf,KACA6B;QACJpB;QACAM;QACAC;QACAC;IACF;AACF,EAAE;AAEF,MAAMa,gBAAgB;IACpB,eAAe;IACfC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMN,cAAc;IAClB,eAAe;IACfG,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["usePersonaStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const personaClassNames = {\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};\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\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 * Styles for the root slot\n */ const 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: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr'\n },\n after: {\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 media: {\n gridRowStart: 'span 5'\n },\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6'\n },\n start: {\n alignSelf: 'start'\n },\n center: {\n alignSelf: 'center'\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 secondLineSpacing: {\n marginTop: '-2px'\n },\n primary: {\n gridRowStart: 'primary'\n },\n secondary: {\n gridRowStart: 'secondary'\n },\n tertiary: {\n gridRowStart: 'tertiary'\n },\n quaternary: {\n 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});\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge\n }\n});\n/**\n * Apply styling to the Persona slots based on the state\n */ export const usePersonaStyles_unstable = (state)=>{\n 'use no memo';\n const { presenceOnly, size, textAlignment, textPosition } = state;\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 const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = {\n ...avatarSpacingStyles,\n ...usePresenceSpacingStyles()\n };\n state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);\n if (state.avatar) {\n state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);\n }\n if (state.presence) {\n 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);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);\n }\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);\n }\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);\n }\n return state;\n};\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1\n});\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1\n});\nconst useTextStyles = makeStyles({\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle'\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle'\n },\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2\n});\nconst useTextClassNames = (state, alignToPrimary)=>{\n const { presenceOnly, size, textPosition } = state;\n const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\n const textStyles = useTextStyles();\n let primaryTextSize;\n let alignToPrimaryClassName;\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 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 return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)\n };\n};\n"],"names":["personaClassNames","usePersonaStyles_unstable","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","__resetStyles","useStyles","__styles","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","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","mergeClasses","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","body1","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","caption1","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
1
|
+
{"version":3,"sources":["usePersonaStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const personaClassNames = {\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};\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\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 * Styles for the root slot\n */ const 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: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr'\n },\n after: {\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 media: {\n gridRowStart: 'span 5'\n },\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6'\n },\n start: {\n alignSelf: 'start'\n },\n center: {\n alignSelf: 'center'\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 secondLineSpacing: {\n marginTop: '-2px'\n },\n primary: {\n gridRowStart: 'primary'\n },\n secondary: {\n gridRowStart: 'secondary'\n },\n tertiary: {\n gridRowStart: 'tertiary'\n },\n quaternary: {\n 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});\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge\n }\n});\n/**\n * Apply styling to the Persona slots based on the state\n */ export const usePersonaStyles_unstable = (state)=>{\n 'use no memo';\n const { presenceOnly, size, textAlignment, textPosition } = state;\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 const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = {\n ...avatarSpacingStyles,\n ...usePresenceSpacingStyles()\n };\n state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);\n if (state.avatar) {\n state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);\n }\n if (state.presence) {\n 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);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);\n }\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);\n }\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);\n }\n return state;\n};\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1\n});\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1\n});\nconst useTextStyles = makeStyles({\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle'\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle'\n },\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2\n});\nconst useTextClassNames = (state, alignToPrimary)=>{\n const { presenceOnly, size, textPosition } = state;\n const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\n const textStyles = useTextStyles();\n let primaryTextSize;\n let alignToPrimaryClassName;\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 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 return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)\n };\n};\n"],"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"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.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 'use no memo';\n\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"],"names":["personaClassNames","usePersonaStyles_unstable","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","makeResetStyles","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","makeStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","tokens","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","mergeClasses","usePrimaryTextBaseClassName","color","colorNeutralForeground1","typographyStyles","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
1
|
+
{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.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 'use no memo';\n\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"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","color","colorNeutralForeground1","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"
|
1
|
+
{"version":3,"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"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":";;;;;;;;;;;;eACEA,gBAAO;;;eACPC,0BAAiB;;;eACjBC,+BAAsB;;;eACtBC,kCAAyB;;;eACzBC,4BAAmB;;;yBACd,YAAY"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-persona",
|
3
|
-
"version": "9.5.
|
3
|
+
"version": "9.5.1",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -18,12 +18,12 @@
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
19
19
|
},
|
20
20
|
"dependencies": {
|
21
|
-
"@fluentui/react-avatar": "^9.9.
|
22
|
-
"@fluentui/react-badge": "^9.4.
|
21
|
+
"@fluentui/react-avatar": "^9.9.1",
|
22
|
+
"@fluentui/react-badge": "^9.4.1",
|
23
23
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
24
24
|
"@fluentui/react-theme": "^9.1.24",
|
25
|
-
"@fluentui/react-utilities": "^9.
|
26
|
-
"@fluentui/react-jsx-runtime": "^9.1.
|
25
|
+
"@fluentui/react-utilities": "^9.23.0",
|
26
|
+
"@fluentui/react-jsx-runtime": "^9.1.3",
|
27
27
|
"@griffel/react": "^1.5.22",
|
28
28
|
"@swc/helpers": "^0.5.1"
|
29
29
|
},
|