@fluentui/react-persona 9.2.100 → 9.2.101
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 +17 -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.js +1 -2
- 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 +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -22
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,27 @@
|
|
1
1
|
# Change Log - @fluentui/react-persona
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 11 Nov 2024 09:55:14 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.2.101](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.101)
|
8
|
+
|
9
|
+
Mon, 11 Nov 2024 09:55:14 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.100..@fluentui/react-persona_v9.2.101)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
|
15
|
+
- Bump @fluentui/react-avatar to v9.6.42 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
16
|
+
- Bump @fluentui/react-badge to v9.2.45 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
18
|
+
- Bump @fluentui/react-theme to v9.1.22 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
19
|
+
- Bump @fluentui/react-utilities to v9.18.17 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
20
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
21
|
+
|
7
22
|
## [9.2.100](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.100)
|
8
23
|
|
9
|
-
Tue, 15 Oct 2024 17:
|
24
|
+
Tue, 15 Oct 2024 17:17:53 GMT
|
10
25
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.99..@fluentui/react-persona_v9.2.100)
|
11
26
|
|
12
27
|
### Patches
|
package/lib/Persona.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6BAA6B"}
|
1
|
+
{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6BAA6B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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"],"rangeMappings":";;;;;;;;;;;;;;","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
|
+
{"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"],"rangeMappings":";;;;;;;;;;;;;;","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":["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":[],"rangeMappings":";;","mappings":"AAqFA;;CAEC,GACD,WAMI"}
|
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":[],"rangeMappings":";;","mappings":"AAqFA;;CAEC,GACD,WAMI"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,4BAA4B"}
|
1
|
+
{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,4BAA4B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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"],"rangeMappings":";;;;;;;;;;;;;;;;;;","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
|
+
{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;","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":["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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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
|
+
{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}
|
@@ -217,5 +217,4 @@ const useTextClassNames = (state, alignToPrimary) => {
|
|
217
217
|
primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
|
218
218
|
optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
|
219
219
|
};
|
220
|
-
};
|
221
|
-
//# sourceMappingURL=usePersonaStyles.styles.js.map
|
220
|
+
};
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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"],"rangeMappings":"","mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
|
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"],"rangeMappings":"","mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
1
|
+
{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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":["Persona","React","forwardRef","props","ref","state","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","renderPersona_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;+BACgB;4BACH;wCACM;qCAGE;AAMrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAE1BG,IAAAA,gDAAAA,EAA4B,6BAA6BH;IAEzD,OAAOI,IAAAA,qCAAAA,EAAuBJ;AAChC;AAEAL,QAAQU,WAAW,GAAG"}
|
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":["Persona","React","forwardRef","props","ref","state","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","renderPersona_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;+BACgB;4BACH;wCACM;qCAGE;AAMrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAE1BG,IAAAA,gDAAAA,EAA4B,6BAA6BH;IAEzD,OAAOI,IAAAA,qCAAAA,EAAuBJ;AAChC;AAEAL,QAAQU,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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":[],"rangeMappings":";;","mappings":"AAqFA;;CAEC"}
|
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":[],"rangeMappings":";;","mappings":"AAqFA;;CAEC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
1
|
+
{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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","assertSlots","coin","presence","_jsx","avatar","_jsxs","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,yBAAyB,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;IACvCG,IAAAA,2BAAAA,EAA0BH;IAE1B,MAAMI,OAAOH,eAAeD,MAAMK,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,QAAQ,EAAA,CAAA,KAAML,MAAMO,MAAM,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACN,MAAMO,MAAM,EAAA,CAAA;IAEhG,OAAA,WAAA,GACEC,IAAAA,gBAAA,EAACR,MAAMS,IAAI,EAAA;;YACPP,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAA,KAAYE;YAC1DJ,MAAMU,WAAW,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACN,MAAMU,WAAW,EAAA,CAAA;YACvCV,MAAMW,aAAa,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACN,MAAMW,aAAa,EAAA,CAAA;YAC3CX,MAAMY,YAAY,IAAA,WAAA,GAAIN,IAAAA,eAAA,EAACN,MAAMY,YAAY,EAAA,CAAA;YACzCZ,MAAMa,cAAc,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACN,MAAMa,cAAc,EAAA,CAAA;YAC7CX,iBAAiB,YAAYE;;;AAGpC"}
|
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","assertSlots","coin","presence","_jsx","avatar","_jsxs","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,yBAAyB,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;IACvCG,IAAAA,2BAAAA,EAA0BH;IAE1B,MAAMI,OAAOH,eAAeD,MAAMK,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,QAAQ,EAAA,CAAA,KAAML,MAAMO,MAAM,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACN,MAAMO,MAAM,EAAA,CAAA;IAEhG,OAAA,WAAA,GACEC,IAAAA,gBAAA,EAACR,MAAMS,IAAI,EAAA;;YACPP,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAA,KAAYE;YAC1DJ,MAAMU,WAAW,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACN,MAAMU,WAAW,EAAA,CAAA;YACvCV,MAAMW,aAAa,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACN,MAAMW,aAAa,EAAA,CAAA;YAC3CX,MAAMY,YAAY,IAAA,WAAA,GAAIN,IAAAA,eAAA,EAACN,MAAMY,YAAY,EAAA,CAAA;YACzCZ,MAAMa,cAAc,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACN,MAAMa,cAAc,EAAA,CAAA;YAC7CX,iBAAiB,YAAYE;;;AAGpC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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","slot","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","Avatar","presence","PresenceBadge","always","getIntrinsicElementProps","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;6BACA;gCACwB;4BACjB;AAYvB,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,IAAI,EAAEC,eAAe,KAAK,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,eAAe,OAAO,EAAE,GAAGN;IAEzG,MAAMO,cAAcC,oBAAAA,CAAKC,QAAQ,CAACT,MAAMO,WAAW,EAAE;QACnDG,iBAAiB;QACjBC,cAAc;YACZC,UAAUV;QACZ;QACAW,aAAa;IACf;IACA,MAAMC,gBAAgBN,oBAAAA,CAAKC,QAAQ,CAACT,MAAMc,aAAa,EAAE;QAAED,aAAa;IAAO;IAC/E,MAAME,eAAeP,oBAAAA,CAAKC,QAAQ,CAACT,MAAMe,YAAY,EAAE;QAAEF,aAAa;IAAO;IAC7E,MAAMG,iBAAiBR,oBAAAA,CAAKC,QAAQ,CAACT,MAAMgB,cAAc,EAAE;QAAEH,aAAa;IAAO;IACjF,MAAMI,eAAe;QAACV;QAAaO;QAAeC;QAAcC;KAAe,CAACE,MAAM,CAACC,SAASC,MAAM;IACtG,OAAO;QACLH;QACAd;QACAC;QACAC;QACAC;QACAe,YAAY;YACVC,MAAM;YACNC,QAAQC,mBAAAA;YACRC,UAAUC,yBAAAA;YACVnB,aAAa;YACbO,eAAe;YACfC,cAAc;YACdC,gBAAgB;QAClB;QAEAM,MAAMd,oBAAAA,CAAKmB,MAAM,CACfC,IAAAA,wCAAAA,EACE,OACA;YACE,GAAG5B,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,GACA,qBAAqB,GAAG;YAAC;SAAO,GAElC;YAAEY,aAAa;QAAM;QAEvBU,QAAQ,CAACpB,eACLK,oBAAAA,CAAKC,QAAQ,CAACT,MAAMuB,MAAM,EAAE;YAC1Bb,iBAAiB;YACjBC,cAAc;gBACZT;gBACA2B,OAAO7B,MAAMyB,QAAQ;gBACrBrB,MAAM0B,WAAW,CAAC1B,KAAK;YACzB;YACAS,aAAaW,mBAAAA;QACf,KACAO;QACJN,UAAUtB,eACNK,oBAAAA,CAAKC,QAAQ,CAACT,MAAMyB,QAAQ,EAAE;YAC5Bd,cAAc;gBACZP,MAAM4B,aAAa,CAAC5B,KAAK;YAC3B;YACAS,aAAaa,yBAAAA;QACf,KACAK;QACJxB;QACAO;QACAC;QACAC;IACF;AACF;AAEA,MAAMgB,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
|
+
{"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","slot","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","Avatar","presence","PresenceBadge","always","getIntrinsicElementProps","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;6BACA;gCACwB;4BACjB;AAYvB,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,IAAI,EAAEC,eAAe,KAAK,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,eAAe,OAAO,EAAE,GAAGN;IAEzG,MAAMO,cAAcC,oBAAAA,CAAKC,QAAQ,CAACT,MAAMO,WAAW,EAAE;QACnDG,iBAAiB;QACjBC,cAAc;YACZC,UAAUV;QACZ;QACAW,aAAa;IACf;IACA,MAAMC,gBAAgBN,oBAAAA,CAAKC,QAAQ,CAACT,MAAMc,aAAa,EAAE;QAAED,aAAa;IAAO;IAC/E,MAAME,eAAeP,oBAAAA,CAAKC,QAAQ,CAACT,MAAMe,YAAY,EAAE;QAAEF,aAAa;IAAO;IAC7E,MAAMG,iBAAiBR,oBAAAA,CAAKC,QAAQ,CAACT,MAAMgB,cAAc,EAAE;QAAEH,aAAa;IAAO;IACjF,MAAMI,eAAe;QAACV;QAAaO;QAAeC;QAAcC;KAAe,CAACE,MAAM,CAACC,SAASC,MAAM;IACtG,OAAO;QACLH;QACAd;QACAC;QACAC;QACAC;QACAe,YAAY;YACVC,MAAM;YACNC,QAAQC,mBAAAA;YACRC,UAAUC,yBAAAA;YACVnB,aAAa;YACbO,eAAe;YACfC,cAAc;YACdC,gBAAgB;QAClB;QAEAM,MAAMd,oBAAAA,CAAKmB,MAAM,CACfC,IAAAA,wCAAAA,EACE,OACA;YACE,GAAG5B,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,GACA,qBAAqB,GAAG;YAAC;SAAO,GAElC;YAAEY,aAAa;QAAM;QAEvBU,QAAQ,CAACpB,eACLK,oBAAAA,CAAKC,QAAQ,CAACT,MAAMuB,MAAM,EAAE;YAC1Bb,iBAAiB;YACjBC,cAAc;gBACZT;gBACA2B,OAAO7B,MAAMyB,QAAQ;gBACrBrB,MAAM0B,WAAW,CAAC1B,KAAK;YACzB;YACAS,aAAaW,mBAAAA;QACf,KACAO;QACJN,UAAUtB,eACNK,oBAAAA,CAAKC,QAAQ,CAACT,MAAMyB,QAAQ,EAAE;YAC5Bd,cAAc;gBACZP,MAAM4B,aAAa,CAAC5B,KAAK;YAC3B;YACAS,aAAaa,yBAAAA;QACf,KACAK;QACJxB;QACAO;QACAC;QACAC;IACF;AACF;AAEA,MAAMgB,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"}
|
@@ -270,4 +270,4 @@ const useTextClassNames = (state, alignToPrimary)=>{
|
|
270
270
|
primaryTextClassName: (0, _react.mergeClasses)(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
|
271
271
|
optionalTextClassName: (0, _react.mergeClasses)(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
|
272
272
|
};
|
273
|
-
};
|
273
|
+
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,OAAO;eAAPA,gBAAO;;IACPC,iBAAiB;eAAjBA,0BAAiB;;IACjBC,sBAAsB;eAAtBA,+BAAsB;;IACtBC,yBAAyB;eAAzBA,kCAAyB;;IACzBC,mBAAmB;eAAnBA,4BAAmB;;;yBACd"}
|
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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,OAAO;eAAPA,gBAAO;;IACPC,iBAAiB;eAAjBA,0BAAiB;;IACjBC,sBAAsB;eAAtBA,+BAAsB;;IACtBC,yBAAyB;eAAzBA,kCAAyB;;IACzBC,mBAAmB;eAAnBA,4BAAmB;;;yBACd"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-persona",
|
3
|
-
"version": "9.2.
|
3
|
+
"version": "9.2.101",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -11,33 +11,19 @@
|
|
11
11
|
"url": "https://github.com/microsoft/fluentui"
|
12
12
|
},
|
13
13
|
"license": "MIT",
|
14
|
-
"scripts": {
|
15
|
-
"build": "just-scripts build",
|
16
|
-
"bundle-size": "monosize measure",
|
17
|
-
"clean": "just-scripts clean",
|
18
|
-
"code-style": "just-scripts code-style",
|
19
|
-
"just": "just-scripts",
|
20
|
-
"lint": "just-scripts lint",
|
21
|
-
"test": "jest --passWithNoTests",
|
22
|
-
"type-check": "just-scripts type-check",
|
23
|
-
"storybook": "yarn --cwd ../stories storybook",
|
24
|
-
"start": "yarn storybook",
|
25
|
-
"generate-api": "just-scripts generate-api"
|
26
|
-
},
|
27
14
|
"devDependencies": {
|
28
15
|
"@fluentui/eslint-plugin": "*",
|
29
16
|
"@fluentui/react-conformance": "*",
|
30
17
|
"@fluentui/react-conformance-griffel": "*",
|
31
|
-
"@fluentui/scripts-api-extractor": "*"
|
32
|
-
"@fluentui/scripts-tasks": "*"
|
18
|
+
"@fluentui/scripts-api-extractor": "*"
|
33
19
|
},
|
34
20
|
"dependencies": {
|
35
|
-
"@fluentui/react-avatar": "^9.6.
|
36
|
-
"@fluentui/react-badge": "^9.2.
|
37
|
-
"@fluentui/react-shared-contexts": "^9.
|
38
|
-
"@fluentui/react-theme": "^9.1.
|
39
|
-
"@fluentui/react-utilities": "^9.18.
|
40
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
21
|
+
"@fluentui/react-avatar": "^9.6.42",
|
22
|
+
"@fluentui/react-badge": "^9.2.45",
|
23
|
+
"@fluentui/react-shared-contexts": "^9.21.0",
|
24
|
+
"@fluentui/react-theme": "^9.1.22",
|
25
|
+
"@fluentui/react-utilities": "^9.18.17",
|
26
|
+
"@fluentui/react-jsx-runtime": "^9.0.46",
|
41
27
|
"@griffel/react": "^1.5.22",
|
42
28
|
"@swc/helpers": "^0.5.1"
|
43
29
|
},
|