@fluentui/react-persona 9.7.2 → 9.7.4

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.7.4)
+
+Tue, 26 May 2026 09:33:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.7.3..@fluentui/react-persona_v9.7.4)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.11.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-badge to v9.5.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.7.3)
+
+Thu, 23 Apr 2026 14:21:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.7.2..@fluentui/react-persona_v9.7.3)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.11.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-badge to v9.5.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.7.2)
 
-Wed, 01 Apr 2026 15:50:23 GMT 
+Wed, 01 Apr 2026 15:52:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.7.1..@fluentui/react-persona_v9.7.2)
 
 ### Patches

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { Avatar } from '@fluentui/react-avatar';
+import type { Avatar } from '@fluentui/react-avatar';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import { PresenceBadge } from '@fluentui/react-badge';
-import * as React_2 from 'react';
+import type { PresenceBadge } from '@fluentui/react-badge';
+import type * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 

package/lib/components/Persona/Persona.types.js.map

@@ -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\nexport type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;\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\nexport type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> &\n  Pick<PersonaState, 'numTextLines'>;\n"],"names":[],"mappings":"AAkGA,WACqC"}
+{"version":3,"sources":["../src/components/Persona/Persona.types.ts"],"sourcesContent":["import type { Avatar } from '@fluentui/react-avatar';\nimport type { 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\nexport type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;\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\nexport type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> &\n  Pick<PersonaState, 'numTextLines'>;\n"],"names":[],"mappings":"AAkGA,WACqC"}

package/lib/components/Persona/usePersona.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { Avatar } from '@fluentui/react-avatar';
 import { slot } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';

package/lib/components/Persona/usePersona.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaBaseProps, PersonaBaseState, 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 {\n    avatar,\n    presenceOnly = false,\n    size = 'medium',\n    textAlignment = 'start',\n    textPosition = 'after',\n    presence,\n    ...baseProps\n  } = props;\n\n  const state = usePersonaBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n      presence: PresenceBadge,\n    },\n    avatar: !presenceOnly\n      ? slot.optional(avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name: props.name,\n            badge: presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n  };\n};\n\n/**\n * Base hook for Persona component, manages state and structure common to all variants of Persona\n */\nexport const usePersonaBase_unstable = (props: PersonaBaseProps, ref?: React.Ref<HTMLElement>): PersonaBaseState => {\n  const {\n    name,\n    primaryText: primaryTextProp,\n    secondaryText: secondaryTextProp,\n    tertiaryText: tertiaryTextProp,\n    quaternaryText: quaternaryTextProp,\n    ...rest\n  } = props;\n\n  const primaryText = slot.optional(primaryTextProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(secondaryTextProp, { elementType: 'span' });\n  const tertiaryText = slot.optional(tertiaryTextProp, { elementType: 'span' });\n  const quaternaryText = slot.optional(quaternaryTextProp, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  return {\n    numTextLines,\n    components: {\n      root: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\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","slot","PresenceBadge","usePersona_unstable","props","ref","avatar","presenceOnly","size","textAlignment","textPosition","presence","baseProps","state","usePersonaBase_unstable","components","optional","renderByDefault","defaultProps","name","badge","avatarSizes","elementType","undefined","presenceSizes","primaryText","primaryTextProp","secondaryText","secondaryTextProp","tertiaryText","tertiaryTextProp","quaternaryText","quaternaryTextProp","rest","children","numTextLines","filter","Boolean","length","root","always","small","medium","large","huge"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,aAAa,QAAQ,wBAAwB;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,MAAM,EACNC,eAAe,KAAK,EACpBC,OAAO,QAAQ,EACfC,gBAAgB,OAAO,EACvBC,eAAe,OAAO,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,QAAQC,wBAAwBF,WAAWP;IAEjD,OAAO;QACL,GAAGQ,KAAK;QACRN;QACAC;QACAC;QACAC;QACAK,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBT,QAAQN;YACRW,UAAUT;QACZ;QACAI,QAAQ,CAACC,eACLN,KAAKe,QAAQ,CAACV,QAAQ;YACpBW,iBAAiB;YACjBC,cAAc;gBACZC,MAAMf,MAAMe,IAAI;gBAChBC,OAAOT;gBACPH,MAAMa,WAAW,CAACb,KAAK;YACzB;YACAc,aAAatB;QACf,KACAuB;QACJZ,UAAUJ,eACNN,KAAKe,QAAQ,CAACL,UAAU;YACtBO,cAAc;gBACZV,MAAMgB,aAAa,CAAChB,KAAK;YAC3B;YACAc,aAAapB;QACf,KACAqB;IACN;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMT,0BAA0B,CAACV,OAAyBC;IAC/D,MAAM,EACJc,IAAI,EACJM,aAAaC,eAAe,EAC5BC,eAAeC,iBAAiB,EAChCC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,MACJ,GAAG7B;IAEJ,MAAMqB,cAAcxB,KAAKe,QAAQ,CAACU,iBAAiB;QACjDT,iBAAiB;QACjBC,cAAc;YACZgB,UAAUf;QACZ;QACAG,aAAa;IACf;IACA,MAAMK,gBAAgB1B,KAAKe,QAAQ,CAACY,mBAAmB;QAAEN,aAAa;IAAO;IAC7E,MAAMO,eAAe5B,KAAKe,QAAQ,CAACc,kBAAkB;QAAER,aAAa;IAAO;IAC3E,MAAMS,iBAAiB9B,KAAKe,QAAQ,CAACgB,oBAAoB;QAAEV,aAAa;IAAO;IAC/E,MAAMa,eAAe;QAACV;QAAaE;QAAeE;QAAcE;KAAe,CAACK,MAAM,CAACC,SAASC,MAAM;IAEtG,OAAO;QACLH;QACApB,YAAY;YACVwB,MAAM;YACNd,aAAa;YACbE,eAAe;YACfE,cAAc;YACdE,gBAAgB;QAClB;QACAQ,MAAMtC,KAAKuC,MAAM,CACf;YACEnC,KAAKA;YACL,GAAG4B,IAAI;QACT,GACA;YAAEX,aAAa;QAAM;QAEvBG;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAEF,MAAMP,gBAAgB;IACpB,eAAe;IACfiB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMvB,cAAc;IAClB,eAAe;IACfoB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
+{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaBaseProps, PersonaBaseState, 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 {\n    avatar,\n    presenceOnly = false,\n    size = 'medium',\n    textAlignment = 'start',\n    textPosition = 'after',\n    presence,\n    ...baseProps\n  } = props;\n\n  const state = usePersonaBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n      presence: PresenceBadge,\n    },\n    avatar: !presenceOnly\n      ? slot.optional(avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name: props.name,\n            badge: presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n  };\n};\n\n/**\n * Base hook for Persona component, manages state and structure common to all variants of Persona\n */\nexport const usePersonaBase_unstable = (props: PersonaBaseProps, ref?: React.Ref<HTMLElement>): PersonaBaseState => {\n  const {\n    name,\n    primaryText: primaryTextProp,\n    secondaryText: secondaryTextProp,\n    tertiaryText: tertiaryTextProp,\n    quaternaryText: quaternaryTextProp,\n    ...rest\n  } = props;\n\n  const primaryText = slot.optional(primaryTextProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(secondaryTextProp, { elementType: 'span' });\n  const tertiaryText = slot.optional(tertiaryTextProp, { elementType: 'span' });\n  const quaternaryText = slot.optional(quaternaryTextProp, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  return {\n    numTextLines,\n    components: {\n      root: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\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":["Avatar","slot","PresenceBadge","usePersona_unstable","props","ref","avatar","presenceOnly","size","textAlignment","textPosition","presence","baseProps","state","usePersonaBase_unstable","components","optional","renderByDefault","defaultProps","name","badge","avatarSizes","elementType","undefined","presenceSizes","primaryText","primaryTextProp","secondaryText","secondaryTextProp","tertiaryText","tertiaryTextProp","quaternaryText","quaternaryTextProp","rest","children","numTextLines","filter","Boolean","length","root","always","small","medium","large","huge"],"mappings":"AAAA;AAGA,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,aAAa,QAAQ,wBAAwB;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EACJC,MAAM,EACNC,eAAe,KAAK,EACpBC,OAAO,QAAQ,EACfC,gBAAgB,OAAO,EACvBC,eAAe,OAAO,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,QAAQC,wBAAwBF,WAAWP;IAEjD,OAAO;QACL,GAAGQ,KAAK;QACRN;QACAC;QACAC;QACAC;QACAK,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBT,QAAQN;YACRW,UAAUT;QACZ;QACAI,QAAQ,CAACC,eACLN,KAAKe,QAAQ,CAACV,QAAQ;YACpBW,iBAAiB;YACjBC,cAAc;gBACZC,MAAMf,MAAMe,IAAI;gBAChBC,OAAOT;gBACPH,MAAMa,WAAW,CAACb,KAAK;YACzB;YACAc,aAAatB;QACf,KACAuB;QACJZ,UAAUJ,eACNN,KAAKe,QAAQ,CAACL,UAAU;YACtBO,cAAc;gBACZV,MAAMgB,aAAa,CAAChB,KAAK;YAC3B;YACAc,aAAapB;QACf,KACAqB;IACN;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMT,0BAA0B,CAACV,OAAyBC;IAC/D,MAAM,EACJc,IAAI,EACJM,aAAaC,eAAe,EAC5BC,eAAeC,iBAAiB,EAChCC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,MACJ,GAAG7B;IAEJ,MAAMqB,cAAcxB,KAAKe,QAAQ,CAACU,iBAAiB;QACjDT,iBAAiB;QACjBC,cAAc;YACZgB,UAAUf;QACZ;QACAG,aAAa;IACf;IACA,MAAMK,gBAAgB1B,KAAKe,QAAQ,CAACY,mBAAmB;QAAEN,aAAa;IAAO;IAC7E,MAAMO,eAAe5B,KAAKe,QAAQ,CAACc,kBAAkB;QAAER,aAAa;IAAO;IAC3E,MAAMS,iBAAiB9B,KAAKe,QAAQ,CAACgB,oBAAoB;QAAEV,aAAa;IAAO;IAC/E,MAAMa,eAAe;QAACV;QAAaE;QAAeE;QAAcE;KAAe,CAACK,MAAM,CAACC,SAASC,MAAM;IAEtG,OAAO;QACLH;QACApB,YAAY;YACVwB,MAAM;YACNd,aAAa;YACbE,eAAe;YACfE,cAAc;YACdE,gBAAgB;QAClB;QACAQ,MAAMtC,KAAKuC,MAAM,CACf;YACEnC,KAAKA;YACL,GAAG4B,IAAI;QACT,GACA;YAAEX,aAAa;QAAM;QAEvBG;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAEF,MAAMP,gBAAgB;IACpB,eAAe;IACfiB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMvB,cAAc;IAClB,eAAe;IACfoB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}

package/lib/components/Persona/usePersonaStyles.styles.js

@@ -133,23 +133,30 @@ export const usePersonaStyles_unstable = state => {
     ...avatarSpacingStyles,
     ...usePresenceSpacingStyles()
   };
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
   if (state.avatar) {
+    // eslint-disable-next-line react-hooks/immutability
     state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
   }
   if (state.presence) {
+    // eslint-disable-next-line react-hooks/immutability
     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);
   }
   if (state.primaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
   }
   if (state.secondaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
   }
   if (state.tertiaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
   }
   if (state.quaternaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
   }
   return state;

package/lib/components/Persona/usePersonaStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","useStyles","beforeAfterCenter","wkccdc","after","before","B7hvi0a","Budl1dq","below","Bxotwcr","media","Ijaq50","mediaBeforeAfterCenter","start","qb2dma","center","afterAlignToPrimary","Bw0ie65","beforeAlignToPrimary","Br312pm","secondLineSpacing","B6of3ja","primary","secondary","tertiary","quaternary","d","useAvatarSpacingStyles","Bs1gm4r","small","medium","large","huge","t21cq0","jrapky","Frg6f3","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","body1","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","caption1","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"sources":["usePersonaStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","useStyles","beforeAfterCenter","wkccdc","after","before","B7hvi0a","Budl1dq","below","Bxotwcr","media","Ijaq50","mediaBeforeAfterCenter","start","qb2dma","center","afterAlignToPrimary","Bw0ie65","beforeAlignToPrimary","Br312pm","secondLineSpacing","B6of3ja","primary","secondary","tertiary","quaternary","d","useAvatarSpacingStyles","Bs1gm4r","small","medium","large","huge","t21cq0","jrapky","Frg6f3","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","body1","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","caption1","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"sources":["usePersonaStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);\n    if (state.avatar) {\n        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);\n    }\n    if (state.tertiaryText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);\n    }\n    if (state.quaternaryText) {\n        // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"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","ignoreList":[]}

package/lib/components/Persona/usePersonaStyles.styles.raw.js

@@ -123,23 +123,30 @@ const usePresenceSpacingStyles = makeStyles({
         ...avatarSpacingStyles,
         ...usePresenceSpacingStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
     if (state.avatar) {
+        // eslint-disable-next-line react-hooks/immutability
         state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
     }
     if (state.presence) {
+        // eslint-disable-next-line react-hooks/immutability
         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);
     }
     if (state.primaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
     }
     if (state.secondaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
     }
     if (state.tertiaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
     }
     if (state.quaternaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
     }
     return state;

package/lib/components/Persona/usePersonaStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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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"}
+{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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-commonjs/components/Persona/Persona.types.js.map

@@ -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\nexport type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;\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\nexport type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> &\n  Pick<PersonaState, 'numTextLines'>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/Persona/Persona.types.ts"],"sourcesContent":["import type { Avatar } from '@fluentui/react-avatar';\nimport type { 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\nexport type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;\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\nexport type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> &\n  Pick<PersonaState, 'numTextLines'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/Persona/usePersona.js

@@ -17,8 +17,6 @@ _export(exports, {
         return usePersona_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactavatar = require("@fluentui/react-avatar");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactbadge = require("@fluentui/react-badge");

package/lib-commonjs/components/Persona/usePersona.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaBaseProps, PersonaBaseState, 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 {\n    avatar,\n    presenceOnly = false,\n    size = 'medium',\n    textAlignment = 'start',\n    textPosition = 'after',\n    presence,\n    ...baseProps\n  } = props;\n\n  const state = usePersonaBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n      presence: PresenceBadge,\n    },\n    avatar: !presenceOnly\n      ? slot.optional(avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name: props.name,\n            badge: presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n  };\n};\n\n/**\n * Base hook for Persona component, manages state and structure common to all variants of Persona\n */\nexport const usePersonaBase_unstable = (props: PersonaBaseProps, ref?: React.Ref<HTMLElement>): PersonaBaseState => {\n  const {\n    name,\n    primaryText: primaryTextProp,\n    secondaryText: secondaryTextProp,\n    tertiaryText: tertiaryTextProp,\n    quaternaryText: quaternaryTextProp,\n    ...rest\n  } = props;\n\n  const primaryText = slot.optional(primaryTextProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(secondaryTextProp, { elementType: 'span' });\n  const tertiaryText = slot.optional(tertiaryTextProp, { elementType: 'span' });\n  const quaternaryText = slot.optional(quaternaryTextProp, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  return {\n    numTextLines,\n    components: {\n      root: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\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","slot","PresenceBadge","usePersona_unstable","props","ref","avatar","presenceOnly","size","textAlignment","textPosition","presence","baseProps","state","usePersonaBase_unstable","components","optional","renderByDefault","defaultProps","name","badge","avatarSizes","elementType","undefined","presenceSizes","primaryText","primaryTextProp","secondaryText","secondaryTextProp","tertiaryText","tertiaryTextProp","quaternaryText","quaternaryTextProp","rest","children","numTextLines","filter","Boolean","length","root","always","small","medium","large","huge"],"mappings":"AAAA;;;;;;;;;;;;2BAmEae;eAAAA;;IAlDAX,mBAAAA;;;;;iEAfU,QAAQ;6BACR,yBAAyB;gCAC3B,4BAA4B;4BACnB,wBAAwB;AAY/C,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EACJC,MAAM,EACNC,eAAe,KAAK,EACpBC,OAAO,QAAQ,EACfC,gBAAgB,OAAO,EACvBC,eAAe,OAAO,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,QAAQC,wBAAwBF,WAAWP;IAEjD,OAAO;QACL,GAAGQ,KAAK;QACRN;QACAC;QACAC;QACAC;QACAK,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBT,QAAQN,mBAAAA;YACRW,UAAUT,yBAAAA;QACZ;QACAI,QAAQ,CAACC,eACLN,oBAAAA,CAAKe,QAAQ,CAACV,QAAQ;YACpBW,iBAAiB;YACjBC,cAAc;gBACZC,MAAMf,MAAMe,IAAI;gBAChBC,OAAOT;gBACPH,MAAMa,WAAW,CAACb,KAAK;YACzB;YACAc,aAAatB,mBAAAA;QACf,KACAuB;QACJZ,UAAUJ,eACNN,oBAAAA,CAAKe,QAAQ,CAACL,UAAU;YACtBO,cAAc;gBACZV,MAAMgB,aAAa,CAAChB,KAAK;YAC3B;YACAc,aAAapB,yBAAAA;QACf,KACAqB;IACN;AACF,EAAE;AAKK,gCAAgC,CAACnB,OAAyBC;IAC/D,MAAM,EACJc,IAAI,EACJM,aAAaC,eAAe,EAC5BC,eAAeC,iBAAiB,EAChCC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,MACJ,GAAG7B;IAEJ,MAAMqB,cAAcxB,oBAAAA,CAAKe,QAAQ,CAACU,iBAAiB;QACjDT,iBAAiB;QACjBC,cAAc;YACZgB,UAAUf;QACZ;QACAG,aAAa;IACf;IACA,MAAMK,gBAAgB1B,oBAAAA,CAAKe,QAAQ,CAACY,mBAAmB;QAAEN,aAAa;IAAO;IAC7E,MAAMO,eAAe5B,oBAAAA,CAAKe,QAAQ,CAACc,kBAAkB;QAAER,aAAa;IAAO;IAC3E,MAAMS,iBAAiB9B,oBAAAA,CAAKe,QAAQ,CAACgB,oBAAoB;QAAEV,aAAa;IAAO;IAC/E,MAAMa,eAAe;QAACV;QAAaE;QAAeE;QAAcE;KAAe,CAACK,MAAM,CAACC,SAASC,MAAM;IAEtG,OAAO;QACLH;QACApB,YAAY;YACVwB,MAAM;YACNd,aAAa;YACbE,eAAe;YACfE,cAAc;YACdE,gBAAgB;QAClB;QACAQ,MAAMtC,oBAAAA,CAAKuC,MAAM,CACf;YACEnC,KAAKA;YACL,GAAG4B,IAAI;QACT,GACA;YAAEX,aAAa;QAAM;QAEvBG;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAEF,MAAMP,gBAAgB;IACpB,eAAe;IACfiB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMvB,cAAc;IAClB,eAAe;IACfoB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
+{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaBaseProps, PersonaBaseState, 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 {\n    avatar,\n    presenceOnly = false,\n    size = 'medium',\n    textAlignment = 'start',\n    textPosition = 'after',\n    presence,\n    ...baseProps\n  } = props;\n\n  const state = usePersonaBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      avatar: Avatar,\n      presence: PresenceBadge,\n    },\n    avatar: !presenceOnly\n      ? slot.optional(avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name: props.name,\n            badge: presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n  };\n};\n\n/**\n * Base hook for Persona component, manages state and structure common to all variants of Persona\n */\nexport const usePersonaBase_unstable = (props: PersonaBaseProps, ref?: React.Ref<HTMLElement>): PersonaBaseState => {\n  const {\n    name,\n    primaryText: primaryTextProp,\n    secondaryText: secondaryTextProp,\n    tertiaryText: tertiaryTextProp,\n    quaternaryText: quaternaryTextProp,\n    ...rest\n  } = props;\n\n  const primaryText = slot.optional(primaryTextProp, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(secondaryTextProp, { elementType: 'span' });\n  const tertiaryText = slot.optional(tertiaryTextProp, { elementType: 'span' });\n  const quaternaryText = slot.optional(quaternaryTextProp, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  return {\n    numTextLines,\n    components: {\n      root: 'div',\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n    root: slot.always(\n      {\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\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":["Avatar","slot","PresenceBadge","usePersona_unstable","props","ref","avatar","presenceOnly","size","textAlignment","textPosition","presence","baseProps","state","usePersonaBase_unstable","components","optional","renderByDefault","defaultProps","name","badge","avatarSizes","elementType","undefined","presenceSizes","primaryText","primaryTextProp","secondaryText","secondaryTextProp","tertiaryText","tertiaryTextProp","quaternaryText","quaternaryTextProp","rest","children","numTextLines","filter","Boolean","length","root","always","small","medium","large","huge"],"mappings":"AAAA;;;;;;;;;;;;2BAmEac;eAAAA;;IAlDAX,mBAAAA;;;;6BAdU,yBAAyB;gCAC3B,4BAA4B;4BACnB,wBAAwB;AAY/C,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EACJC,MAAM,EACNC,eAAe,KAAK,EACpBC,OAAO,QAAQ,EACfC,gBAAgB,OAAO,EACvBC,eAAe,OAAO,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,QAAQC,wBAAwBF,WAAWP;IAEjD,OAAO;QACL,GAAGQ,KAAK;QACRN;QACAC;QACAC;QACAC;QACAK,YAAY;YACV,4DAA4D;YAC5D,GAAGF,MAAME,UAAU;YACnBT,QAAQN,mBAAAA;YACRW,UAAUT,yBAAAA;QACZ;QACAI,QAAQ,CAACC,eACLN,oBAAAA,CAAKe,QAAQ,CAACV,QAAQ;YACpBW,iBAAiB;YACjBC,cAAc;gBACZC,MAAMf,MAAMe,IAAI;gBAChBC,OAAOT;gBACPH,MAAMa,WAAW,CAACb,KAAK;YACzB;YACAc,aAAatB,mBAAAA;QACf,KACAuB;QACJZ,UAAUJ,eACNN,oBAAAA,CAAKe,QAAQ,CAACL,UAAU;YACtBO,cAAc;gBACZV,MAAMgB,aAAa,CAAChB,KAAK;YAC3B;YACAc,aAAapB,yBAAAA;QACf,KACAqB;IACN;AACF,EAAE;AAKK,gCAAgC,CAACnB,OAAyBC;IAC/D,MAAM,EACJc,IAAI,EACJM,aAAaC,eAAe,EAC5BC,eAAeC,iBAAiB,EAChCC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,MACJ,GAAG7B;IAEJ,MAAMqB,cAAcxB,oBAAAA,CAAKe,QAAQ,CAACU,iBAAiB;QACjDT,iBAAiB;QACjBC,cAAc;YACZgB,UAAUf;QACZ;QACAG,aAAa;IACf;IACA,MAAMK,gBAAgB1B,oBAAAA,CAAKe,QAAQ,CAACY,mBAAmB;QAAEN,aAAa;IAAO;IAC7E,MAAMO,eAAe5B,oBAAAA,CAAKe,QAAQ,CAACc,kBAAkB;QAAER,aAAa;IAAO;IAC3E,MAAMS,iBAAiB9B,oBAAAA,CAAKe,QAAQ,CAACgB,oBAAoB;QAAEV,aAAa;IAAO;IAC/E,MAAMa,eAAe;QAACV;QAAaE;QAAeE;QAAcE;KAAe,CAACK,MAAM,CAACC,SAASC,MAAM;IAEtG,OAAO;QACLH;QACApB,YAAY;YACVwB,MAAM;YACNd,aAAa;YACbE,eAAe;YACfE,cAAc;YACdE,gBAAgB;QAClB;QACAQ,MAAMtC,oBAAAA,CAAKuC,MAAM,CACf;YACEnC,KAAKA;YACL,GAAG4B,IAAI;QACT,GACA;YAAEX,aAAa;QAAM;QAEvBG;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAEF,MAAMP,gBAAgB;IACpB,eAAe;IACfiB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMvB,cAAc;IAClB,eAAe;IACfoB,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}

package/lib-commonjs/components/Persona/usePersonaStyles.styles.js

@@ -173,23 +173,30 @@ const usePersonaStyles_unstable = (state)=>{
         ...avatarSpacingStyles,
         ...usePresenceSpacingStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
     if (state.avatar) {
+        // eslint-disable-next-line react-hooks/immutability
         state.avatar.className = (0, _react.mergeClasses)(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
     }
     if (state.presence) {
+        // eslint-disable-next-line react-hooks/immutability
         state.presence.className = (0, _react.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);
     }
     if (state.primaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryText.className = (0, _react.mergeClasses)(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
     }
     if (state.secondaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryText.className = (0, _react.mergeClasses)(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
     }
     if (state.tertiaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.tertiaryText.className = (0, _react.mergeClasses)(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
     }
     if (state.quaternaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.quaternaryText.className = (0, _react.mergeClasses)(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
     }
     return state;

package/lib-commonjs/components/Persona/usePersonaStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePersonaStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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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"}
+{"version":3,"sources":["usePersonaStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);\n    if (state.avatar) {\n        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);\n    }\n    if (state.tertiaryText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);\n    }\n    if (state.quaternaryText) {\n        // eslint-disable-next-line react-hooks/immutability\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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"}

package/lib-commonjs/components/Persona/usePersonaStyles.styles.raw.js

@@ -138,23 +138,30 @@ const usePersonaStyles_unstable = (state)=>{
         ...avatarSpacingStyles,
         ...usePresenceSpacingStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
     if (state.avatar) {
+        // eslint-disable-next-line react-hooks/immutability
         state.avatar.className = (0, _react.mergeClasses)(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
     }
     if (state.presence) {
+        // eslint-disable-next-line react-hooks/immutability
         state.presence.className = (0, _react.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);
     }
     if (state.primaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryText.className = (0, _react.mergeClasses)(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
     }
     if (state.secondaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryText.className = (0, _react.mergeClasses)(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
     }
     if (state.tertiaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.tertiaryText.className = (0, _react.mergeClasses)(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
     }
     if (state.quaternaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.quaternaryText.className = (0, _react.mergeClasses)(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
     }
     return state;

package/lib-commonjs/components/Persona/usePersonaStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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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"}
+{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.7.2",
+  "version": "9.7.4",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,12 +12,12 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-avatar": "^9.11.0",
-    "@fluentui/react-badge": "^9.5.1",
+    "@fluentui/react-avatar": "^9.11.2",
+    "@fluentui/react-badge": "^9.5.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-utilities": "^9.26.4",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },