@fluentui/react-persona 9.5.13 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
+This log was last generated on Thu, 12 Feb 2026 10:42:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.6.0)
+
+Thu, 12 Feb 2026 10:42:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.5.14..@fluentui/react-persona_v9.6.0)
+
+### Minor changes
+
+- feat: add base hook for Persona component ([PR #35697](https://github.com/microsoft/fluentui/pull/35697) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-avatar to v9.10.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-badge to v9.4.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+
+## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.5.14)
+
+Thu, 22 Jan 2026 17:06:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.5.13..@fluentui/react-persona_v9.5.14)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.9.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-badge to v9.4.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+
 ## [9.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.5.13)
 
-Wed, 17 Dec 2025 18:06:04 GMT 
+Wed, 17 Dec 2025 18:10:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.5.12..@fluentui/react-persona_v9.5.13)
 
 ### Patches

package/lib/Persona.js

@@ -1 +1 @@
-export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable } from './components/Persona/index';
+export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable, usePersonaBase_unstable } from './components/Persona/index';

package/lib/Persona.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type { PersonaProps, PersonaSlots, PersonaState } from './components/Persona/index';\nexport {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
+{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type {\n  PersonaBaseProps,\n  PersonaProps,\n  PersonaSlots,\n  PersonaBaseState,\n  PersonaState,\n} from './components/Persona/index';\nexport {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n  usePersonaBase_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable","usePersonaBase_unstable"],"mappings":"AAOA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,6BAA6B"}

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

@@ -1,3 +1 @@
-/**
- * State used in rendering Persona
- */ export { };
+export { };

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\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n  Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n    /**\n     * The number of text lines used.\n     */\n    numTextLines: number;\n  };\n"],"names":[],"mappings":"AAqFA;;CAEC,GACD,WAMI"}
+{"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"}

package/lib/components/Persona/index.js

@@ -1,4 +1,4 @@
 export { Persona } from './Persona';
 export { renderPersona_unstable } from './renderPersona';
-export { usePersona_unstable } from './usePersona';
+export { usePersona_unstable, usePersonaBase_unstable } from './usePersona';
 export { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaBaseProps, PersonaProps, PersonaSlots, PersonaBaseState, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable, usePersonaBase_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","usePersonaBase_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,eAAe;AAC5E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

package/lib/components/Persona/usePersona.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { Avatar } from '@fluentui/react-avatar';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';
 /**
  * Create the state required to render Persona.
@@ -11,21 +12,55 @@ import { PresenceBadge } from '@fluentui/react-badge';
  * @param props - props from this instance of Persona
  * @param ref - reference to root HTMLElement of Persona
  */ export const usePersona_unstable = (props, ref)=>{
-    const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;
-    const primaryText = slot.optional(props.primaryText, {
+    const { avatar, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after', presence, ...baseProps } = props;
+    const state = usePersonaBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        presenceOnly,
+        size,
+        textAlignment,
+        textPosition,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            avatar: Avatar,
+            presence: PresenceBadge
+        },
+        avatar: !presenceOnly ? slot.optional(avatar, {
+            renderByDefault: true,
+            defaultProps: {
+                name: props.name,
+                badge: presence,
+                size: avatarSizes[size]
+            },
+            elementType: Avatar
+        }) : undefined,
+        presence: presenceOnly ? slot.optional(presence, {
+            defaultProps: {
+                size: presenceSizes[size]
+            },
+            elementType: PresenceBadge
+        }) : undefined
+    };
+};
+/**
+ * Base hook for Persona component, manages state and structure common to all variants of Persona
+ */ export const usePersonaBase_unstable = (props, ref)=>{
+    const { name, primaryText: primaryTextProp, secondaryText: secondaryTextProp, tertiaryText: tertiaryTextProp, quaternaryText: quaternaryTextProp, ...rest } = props;
+    const primaryText = slot.optional(primaryTextProp, {
         renderByDefault: true,
         defaultProps: {
             children: name
         },
         elementType: 'span'
     });
-    const secondaryText = slot.optional(props.secondaryText, {
+    const secondaryText = slot.optional(secondaryTextProp, {
         elementType: 'span'
     });
-    const tertiaryText = slot.optional(props.tertiaryText, {
+    const tertiaryText = slot.optional(tertiaryTextProp, {
         elementType: 'span'
     });
-    const quaternaryText = slot.optional(props.quaternaryText, {
+    const quaternaryText = slot.optional(quaternaryTextProp, {
         elementType: 'span'
     });
     const numTextLines = [
@@ -36,45 +71,19 @@ import { PresenceBadge } from '@fluentui/react-badge';
     ].filter(Boolean).length;
     return {
         numTextLines,
-        presenceOnly,
-        size,
-        textAlignment,
-        textPosition,
         components: {
             root: 'div',
-            avatar: Avatar,
-            presence: PresenceBadge,
             primaryText: 'span',
             secondaryText: 'span',
             tertiaryText: 'span',
             quaternaryText: 'span'
         },
-        root: slot.always(getIntrinsicElementProps('div', {
-            ...props,
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: ref
-        }, /* excludedPropNames */ [
-            'name'
-        ]), {
+        root: slot.always({
+            ref: ref,
+            ...rest
+        }, {
             elementType: 'div'
         }),
-        avatar: !presenceOnly ? slot.optional(props.avatar, {
-            renderByDefault: true,
-            defaultProps: {
-                name,
-                badge: props.presence,
-                size: avatarSizes[size]
-            },
-            elementType: Avatar
-        }) : undefined,
-        presence: presenceOnly ? slot.optional(props.presence, {
-            defaultProps: {
-                size: presenceSizes[size]
-            },
-            elementType: PresenceBadge
-        }) : undefined,
         primaryText,
         secondaryText,
         tertiaryText,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n  const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n  const primaryText = slot.optional(props.primaryText, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(props.secondaryText, { elementType: 'span' });\n  const tertiaryText = slot.optional(props.tertiaryText, { elementType: 'span' });\n  const quaternaryText = slot.optional(props.quaternaryText, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n  return {\n    numTextLines,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      presence: PresenceBadge,\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\n          ...props,\n          // FIXME:\n          // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n          // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n          ref: ref as React.Ref<HTMLDivElement>,\n        },\n        /* excludedPropNames */ ['name'],\n      ),\n      { elementType: 'div' },\n    ),\n    avatar: !presenceOnly\n      ? slot.optional(props.avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name,\n            badge: props.presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(props.presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n\nconst presenceSizes = {\n  'extra-small': 'tiny',\n  small: 'extra-small',\n  medium: 'small',\n  large: 'medium',\n  'extra-large': 'large',\n  huge: 'large',\n} as const;\n\nconst avatarSizes = {\n  'extra-small': 20,\n  small: 28,\n  medium: 32,\n  large: 36,\n  'extra-large': 40,\n  huge: 56,\n} as const;\n"],"names":["React","Avatar","getIntrinsicElementProps","slot","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","always","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,aAAa,QAAQ,wBAAwB;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,IAAI,EAAEC,eAAe,KAAK,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,eAAe,OAAO,EAAE,GAAGN;IAEzG,MAAMO,cAAcV,KAAKW,QAAQ,CAACR,MAAMO,WAAW,EAAE;QACnDE,iBAAiB;QACjBC,cAAc;YACZC,UAAUT;QACZ;QACAU,aAAa;IACf;IACA,MAAMC,gBAAgBhB,KAAKW,QAAQ,CAACR,MAAMa,aAAa,EAAE;QAAED,aAAa;IAAO;IAC/E,MAAME,eAAejB,KAAKW,QAAQ,CAACR,MAAMc,YAAY,EAAE;QAAEF,aAAa;IAAO;IAC7E,MAAMG,iBAAiBlB,KAAKW,QAAQ,CAACR,MAAMe,cAAc,EAAE;QAAEH,aAAa;IAAO;IACjF,MAAMI,eAAe;QAACT;QAAaM;QAAeC;QAAcC;KAAe,CAACE,MAAM,CAACC,SAASC,MAAM;IACtG,OAAO;QACLH;QACAb;QACAC;QACAC;QACAC;QACAc,YAAY;YACVC,MAAM;YACNC,QAAQ3B;YACR4B,UAAUzB;YACVS,aAAa;YACbM,eAAe;YACfC,cAAc;YACdC,gBAAgB;QAClB;QAEAM,MAAMxB,KAAK2B,MAAM,CACf5B,yBACE,OACA;YACE,GAAGI,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,GACA,qBAAqB,GAAG;YAAC;SAAO,GAElC;YAAEW,aAAa;QAAM;QAEvBU,QAAQ,CAACnB,eACLN,KAAKW,QAAQ,CAACR,MAAMsB,MAAM,EAAE;YAC1Bb,iBAAiB;YACjBC,cAAc;gBACZR;gBACAuB,OAAOzB,MAAMuB,QAAQ;gBACrBnB,MAAMsB,WAAW,CAACtB,KAAK;YACzB;YACAQ,aAAajB;QACf,KACAgC;QACJJ,UAAUpB,eACNN,KAAKW,QAAQ,CAACR,MAAMuB,QAAQ,EAAE;YAC5Bb,cAAc;gBACZN,MAAMwB,aAAa,CAACxB,KAAK;YAC3B;YACAQ,aAAad;QACf,KACA6B;QACJpB;QACAM;QACAC;QACAC;IACF;AACF,EAAE;AAEF,MAAMa,gBAAgB;IACpB,eAAe;IACfC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMN,cAAc;IAClB,eAAe;IACfG,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
+{"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"}

package/lib/index.js

@@ -1 +1,4 @@
 export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable } from './Persona';
+ // Experimental APIs - will be uncommented in experimental branch
+ // export { usePersonaBase_unstable } from './components/Persona/usePersona';
+ // export type { PersonaBaseProps, PersonaBaseState } from './components/Persona/Persona.types';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n\n// Experimental APIs - will be uncommented in experimental branch\n// export { usePersonaBase_unstable } from './components/Persona/usePersona';\n// export type { PersonaBaseProps, PersonaBaseState } from './components/Persona/Persona.types';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;CAGnB,iEAAiE;CACjE,6EAA6E;CAC7E,gGAAgG"}

package/lib-commonjs/Persona.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderPersona_unstable: function() {
         return _index.renderPersona_unstable;
     },
+    usePersonaBase_unstable: function() {
+        return _index.usePersonaBase_unstable;
+    },
     usePersonaStyles_unstable: function() {
         return _index.usePersonaStyles_unstable;
     },

package/lib-commonjs/Persona.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type { PersonaProps, PersonaSlots, PersonaState } from './components/Persona/index';\nexport {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eACtBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,6BAA6B"}
+{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type {\n  PersonaBaseProps,\n  PersonaProps,\n  PersonaSlots,\n  PersonaBaseState,\n  PersonaState,\n} from './components/Persona/index';\nexport {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n  usePersonaBase_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable","usePersonaBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eAGtBG,8BAAuB;;;eAFvBF,gCAAyB;;;eACzBC,0BAAmB;;;uBAEd,6BAA6B"}

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

@@ -1,6 +1,4 @@
-/**
- * State used in rendering Persona
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n  Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n    /**\n     * The number of text lines used.\n     */\n    numTextLines: number;\n  };\n"],"names":[],"mappings":"AAqFA;;CAEC,GACD,WAMI"}
+{"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":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderPersona_unstable: function() {
         return _renderPersona.renderPersona_unstable;
     },
+    usePersonaBase_unstable: function() {
+        return _usePersona.usePersonaBase_unstable;
+    },
     usePersonaStyles_unstable: function() {
         return _usePersonaStylesstyles.usePersonaStyles_unstable;
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPG,yCAAiB;;;eAFjBF,qCAAsB;;;eAEHG,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}
+{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaBaseProps, PersonaProps, PersonaSlots, PersonaBaseState, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable, usePersonaBase_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","usePersonaBase_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPI,yCAAiB;;;eAFjBH,qCAAsB;;;eACDE,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACI,eAAe;wCACf,4BAA4B"}

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

@@ -1,10 +1,19 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "usePersona_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    usePersonaBase_unstable: function() {
+        return usePersonaBase_unstable;
+    },
+    usePersona_unstable: function() {
         return usePersona_unstable;
     }
 });
@@ -14,21 +23,53 @@ const _reactavatar = require("@fluentui/react-avatar");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactbadge = require("@fluentui/react-badge");
 const usePersona_unstable = (props, ref)=>{
-    const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;
-    const primaryText = _reactutilities.slot.optional(props.primaryText, {
+    const { avatar, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after', presence, ...baseProps } = props;
+    const state = usePersonaBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        presenceOnly,
+        size,
+        textAlignment,
+        textPosition,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            avatar: _reactavatar.Avatar,
+            presence: _reactbadge.PresenceBadge
+        },
+        avatar: !presenceOnly ? _reactutilities.slot.optional(avatar, {
+            renderByDefault: true,
+            defaultProps: {
+                name: props.name,
+                badge: presence,
+                size: avatarSizes[size]
+            },
+            elementType: _reactavatar.Avatar
+        }) : undefined,
+        presence: presenceOnly ? _reactutilities.slot.optional(presence, {
+            defaultProps: {
+                size: presenceSizes[size]
+            },
+            elementType: _reactbadge.PresenceBadge
+        }) : undefined
+    };
+};
+const usePersonaBase_unstable = (props, ref)=>{
+    const { name, primaryText: primaryTextProp, secondaryText: secondaryTextProp, tertiaryText: tertiaryTextProp, quaternaryText: quaternaryTextProp, ...rest } = props;
+    const primaryText = _reactutilities.slot.optional(primaryTextProp, {
         renderByDefault: true,
         defaultProps: {
             children: name
         },
         elementType: 'span'
     });
-    const secondaryText = _reactutilities.slot.optional(props.secondaryText, {
+    const secondaryText = _reactutilities.slot.optional(secondaryTextProp, {
         elementType: 'span'
     });
-    const tertiaryText = _reactutilities.slot.optional(props.tertiaryText, {
+    const tertiaryText = _reactutilities.slot.optional(tertiaryTextProp, {
         elementType: 'span'
     });
-    const quaternaryText = _reactutilities.slot.optional(props.quaternaryText, {
+    const quaternaryText = _reactutilities.slot.optional(quaternaryTextProp, {
         elementType: 'span'
     });
     const numTextLines = [
@@ -39,45 +80,19 @@ const usePersona_unstable = (props, ref)=>{
     ].filter(Boolean).length;
     return {
         numTextLines,
-        presenceOnly,
-        size,
-        textAlignment,
-        textPosition,
         components: {
             root: 'div',
-            avatar: _reactavatar.Avatar,
-            presence: _reactbadge.PresenceBadge,
             primaryText: 'span',
             secondaryText: 'span',
             tertiaryText: 'span',
             quaternaryText: 'span'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ...props,
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: ref
-        }, /* excludedPropNames */ [
-            'name'
-        ]), {
+        root: _reactutilities.slot.always({
+            ref: ref,
+            ...rest
+        }, {
             elementType: 'div'
         }),
-        avatar: !presenceOnly ? _reactutilities.slot.optional(props.avatar, {
-            renderByDefault: true,
-            defaultProps: {
-                name,
-                badge: props.presence,
-                size: avatarSizes[size]
-            },
-            elementType: _reactavatar.Avatar
-        }) : undefined,
-        presence: presenceOnly ? _reactutilities.slot.optional(props.presence, {
-            defaultProps: {
-                size: presenceSizes[size]
-            },
-            elementType: _reactbadge.PresenceBadge
-        }) : undefined,
         primaryText,
         secondaryText,
         tertiaryText,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Persona/usePersona.ts"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n  const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n  const primaryText = slot.optional(props.primaryText, {\n    renderByDefault: true,\n    defaultProps: {\n      children: name,\n    },\n    elementType: 'span',\n  });\n  const secondaryText = slot.optional(props.secondaryText, { elementType: 'span' });\n  const tertiaryText = slot.optional(props.tertiaryText, { elementType: 'span' });\n  const quaternaryText = slot.optional(props.quaternaryText, { elementType: 'span' });\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n  return {\n    numTextLines,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      presence: PresenceBadge,\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\n          ...props,\n          // FIXME:\n          // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n          // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n          ref: ref as React.Ref<HTMLDivElement>,\n        },\n        /* excludedPropNames */ ['name'],\n      ),\n      { elementType: 'div' },\n    ),\n    avatar: !presenceOnly\n      ? slot.optional(props.avatar, {\n          renderByDefault: true,\n          defaultProps: {\n            name,\n            badge: props.presence,\n            size: avatarSizes[size],\n          },\n          elementType: Avatar,\n        })\n      : undefined,\n    presence: presenceOnly\n      ? slot.optional(props.presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n          elementType: PresenceBadge,\n        })\n      : undefined,\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n\nconst presenceSizes = {\n  'extra-small': 'tiny',\n  small: 'extra-small',\n  medium: 'small',\n  large: 'medium',\n  'extra-large': 'large',\n  huge: 'large',\n} as const;\n\nconst avatarSizes = {\n  'extra-small': 20,\n  small: 28,\n  medium: 32,\n  large: 36,\n  'extra-large': 40,\n  huge: 56,\n} as const;\n"],"names":["React","Avatar","getIntrinsicElementProps","slot","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","optional","renderByDefault","defaultProps","children","elementType","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","always","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"mappings":";;;;+BAeaK;;;;;;;iEAfU,QAAQ;6BACR,yBAAyB;gCACD,4BAA4B;4BAC7C,wBAAwB;AAY/C,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EAAEC,IAAI,EAAEC,eAAe,KAAK,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,eAAe,OAAO,EAAE,GAAGN;IAEzG,MAAMO,cAAcV,oBAAAA,CAAKW,QAAQ,CAACR,MAAMO,WAAW,EAAE;QACnDE,iBAAiB;QACjBC,cAAc;YACZC,UAAUT;QACZ;QACAU,aAAa;IACf;IACA,MAAMC,gBAAgBhB,oBAAAA,CAAKW,QAAQ,CAACR,MAAMa,aAAa,EAAE;QAAED,aAAa;IAAO;IAC/E,MAAME,eAAejB,oBAAAA,CAAKW,QAAQ,CAACR,MAAMc,YAAY,EAAE;QAAEF,aAAa;IAAO;IAC7E,MAAMG,iBAAiBlB,oBAAAA,CAAKW,QAAQ,CAACR,MAAMe,cAAc,EAAE;QAAEH,aAAa;IAAO;IACjF,MAAMI,eAAe;QAACT;QAAaM;QAAeC;QAAcC;KAAe,CAACE,MAAM,CAACC,SAASC,MAAM;IACtG,OAAO;QACLH;QACAb;QACAC;QACAC;QACAC;QACAc,YAAY;YACVC,MAAM;YACNC,QAAQ3B,mBAAAA;YACR4B,UAAUzB,yBAAAA;YACVS,aAAa;YACbM,eAAe;YACfC,cAAc;YACdC,gBAAgB;QAClB;QAEAM,MAAMxB,oBAAAA,CAAK2B,MAAM,KACf5B,wCAAAA,EACE,OACA;YACE,GAAGI,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,GACA,qBAAqB,GAAG;YAAC;SAAO,GAElC;YAAEW,aAAa;QAAM;QAEvBU,QAAQ,CAACnB,eACLN,oBAAAA,CAAKW,QAAQ,CAACR,MAAMsB,MAAM,EAAE;YAC1Bb,iBAAiB;YACjBC,cAAc;gBACZR;gBACAuB,OAAOzB,MAAMuB,QAAQ;gBACrBnB,MAAMsB,WAAW,CAACtB,KAAK;YACzB;YACAQ,aAAajB,mBAAAA;QACf,KACAgC;QACJJ,UAAUpB,eACNN,oBAAAA,CAAKW,QAAQ,CAACR,MAAMuB,QAAQ,EAAE;YAC5Bb,cAAc;gBACZN,MAAMwB,aAAa,CAACxB,KAAK;YAC3B;YACAQ,aAAad,yBAAAA;QACf,KACA6B;QACJpB;QACAM;QACAC;QACAC;IACF;AACF,EAAE;AAEF,MAAMa,gBAAgB;IACpB,eAAe;IACfC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR;AAEA,MAAMN,cAAc;IAClB,eAAe;IACfG,OAAO;IACPC,QAAQ;IACRC,OAAO;IACP,eAAe;IACfC,MAAM;AACR"}
+{"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"}

package/lib-commonjs/index.js

@@ -26,3 +26,6 @@ _export(exports, {
     }
 });
 const _Persona = require("./Persona");
+ // Experimental APIs - will be uncommented in experimental branch
+ // export { usePersonaBase_unstable } from './components/Persona/usePersona';
+ // export type { PersonaBaseProps, PersonaBaseState } from './components/Persona/Persona.types';

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":";;;;;;;;;;;;eACEA,gBAAO;;;eACPC,0BAAiB;;;eACjBC,+BAAsB;;;eACtBC,kCAAyB;;;eACzBC,4BAAmB;;;yBACd,YAAY"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n\n// Experimental APIs - will be uncommented in experimental branch\n// export { usePersonaBase_unstable } from './components/Persona/usePersona';\n// export type { PersonaBaseProps, PersonaBaseState } from './components/Persona/Persona.types';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"mappings":";;;;;;;;;;;;eACEA,gBAAO;;;eACPC,0BAAiB;;;eACjBC,+BAAsB;;;eACtBC,kCAAyB;;;eACzBC,4BAAmB;;;yBACd,YAAY;CAGnB,iEAAiE;CACjE,6EAA6E;CAC7E,gGAAgG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.5.13",
+  "version": "9.6.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -11,19 +11,13 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.9.13",
-    "@fluentui/react-badge": "^9.4.12",
-    "@fluentui/react-shared-contexts": "^9.26.0",
-    "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.26.0",
-    "@fluentui/react-jsx-runtime": "^9.3.4",
+    "@fluentui/react-avatar": "^9.10.0",
+    "@fluentui/react-badge": "^9.4.14",
+    "@fluentui/react-shared-contexts": "^9.26.1",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.1",
+    "@fluentui/react-jsx-runtime": "^9.4.0",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },