@fluentui/react-persona 9.1.0-beta.3 → 9.1.0-beta.5

package/CHANGELOG.json

@@ -2,7 +2,93 @@
   "name": "@fluentui/react-persona",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:56 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:24 GMT",
+      "tag": "@fluentui/react-persona_v9.1.0-beta.5",
+      "version": "9.1.0-beta.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "df99a7d82e3ca707300a079e0050db218d6cfcce",
+            "comment": "chore: Updating Persona's docs to match implementation."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "fafaced9e47597c8ae38d68518887926082986cb",
+            "comment": "chore: Migrate to new package structure."
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "7f4466d1f16a45c6268d540ccd6c088e0c79dfbb",
+            "comment": "fix: Make Persona's text wrap when overflowing its container."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.2.8",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.14",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:42 GMT",
+      "tag": "@fluentui/react-persona_v9.1.0-beta.4",
+      "version": "9.1.0-beta.4",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "9066dc6a278db9df1fe3a277e66c94c201107d14",
+            "comment": "feat: Adding size and textAlignment props and updating styles."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.2.7",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.13",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-persona",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:58:09 GMT",
       "tag": "@fluentui/react-persona_v9.1.0-beta.3",
       "version": "9.1.0-beta.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Fri, 11 Nov 2022 14:53:56 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.5)
+
+Mon, 05 Dec 2022 18:25:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.4..@fluentui/react-persona_v9.1.0-beta.5)
+
+### Changes
+
+- chore: Updating Persona's docs to match implementation. ([PR #25770](https://github.com/microsoft/fluentui/pull/25770) by esteban.230@hotmail.com)
+- chore: Migrate to new package structure. ([PR #25737](https://github.com/microsoft/fluentui/pull/25737) by tristan.watanabe@gmail.com)
+- fix: Make Persona's text wrap when overflowing its container. ([PR #25880](https://github.com/microsoft/fluentui/pull/25880) by esteban.230@hotmail.com)
+- Bump @fluentui/react-avatar to v9.2.8 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-badge to v9.0.14 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
+## [9.1.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.4)
+
+Thu, 17 Nov 2022 23:05:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.3..@fluentui/react-persona_v9.1.0-beta.4)
+
+### Changes
+
+- feat: Adding size and textAlignment props and updating styles. ([PR #25626](https://github.com/microsoft/fluentui/pull/25626) by esteban.230@hotmail.com)
+- Bump @fluentui/react-avatar to v9.2.7 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-badge to v9.0.13 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
 ## [9.1.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.3)
 
-Fri, 11 Nov 2022 14:53:56 GMT 
+Fri, 11 Nov 2022 14:58:09 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.2..@fluentui/react-persona_v9.1.0-beta.3)
 
 ### Changes

package/dist/index.d.ts

@@ -33,12 +33,24 @@ export declare type PersonaProps = ComponentProps<PersonaSlots> & {
      * @default false
      */
     presenceOnly?: boolean;
+    /**
+     * The size of a Persona and its text.
+     *
+     * @default medium
+     */
+    size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
     /**
      * The position of the text relative to the avatar/presence.
      *
      * @default after
      */
-    textPosition?: 'before' | 'after' | 'below';
+    textPosition?: 'after' | 'before' | 'below';
+    /**
+     * The vertical alignment of the text relative to the avatar/presence.
+     *
+     * @default start
+     */
+    textAlignment?: 'center' | 'start';
 };
 
 export declare type PersonaSlots = {
@@ -58,8 +70,8 @@ export declare type PersonaSlots = {
     /**
      * The first line of text in the Persona, larger than the rest of the lines.
      *
-     * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from
-     * from the `name` prop.
+     * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is
+     *  different than the `name` prop.
      */
     primaryText?: Slot<'span'>;
     /**
@@ -79,11 +91,7 @@ export declare type PersonaSlots = {
 /**
  * State used in rendering Persona
  */
-export declare type PersonaState = ComponentState<PersonaSlots> & Required<Pick<PersonaProps, 'textPosition' | 'presenceOnly'>> & {
-    /**
-     * Whether the sizing type is fixed or not.
-     */
-    fixed: boolean;
+export declare type PersonaState = ComponentState<PersonaSlots> & Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {
     /**
      * The number of text lines used.
      */

package/lib/Persona.js.map

@@ -1 +1 @@
-{"version":3,"file":"Persona.js","sourceRoot":"../src/","sources":["Persona.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Persona/index';\n"]}
+{"version":3,"file":"Persona.js","sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/Persona.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Persona/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Persona/Persona.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;;AAGG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\n\n/**\n * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\n * or an Avatar with a PresenceBadge.\n */\nexport const Persona: ForwardRefComponent<PersonaProps> = React.forwardRef((props, ref) => {\n  const state = usePersona_unstable(props, ref);\n\n  usePersonaStyles_unstable(state);\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/Persona.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;;AAGG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\n\n/**\n * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\n * or an Avatar with a PresenceBadge.\n */\nexport const Persona: ForwardRefComponent<PersonaProps> = React.forwardRef((props, ref) => {\n  const state = usePersona_unstable(props, ref);\n\n  usePersonaStyles_unstable(state);\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Persona.types.js","sourceRoot":"../src/","sources":["components/Persona/Persona.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Avatar to display.\n   *\n   * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n   */\n  avatar?: Slot<typeof Avatar>;\n\n  /**\n   * PresenceBadge to display.\n   *\n   * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n   */\n  presence?: Slot<typeof PresenceBadge>;\n\n  /**\n   * The first line of text in the Persona, larger than the rest of the lines.\n   *\n   * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from\n   * from 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 position of the text relative to the avatar/presence.\n   *\n   * @default after\n   */\n  textPosition?: 'before' | 'after' | 'below';\n};\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n  Required<Pick<PersonaProps, 'textPosition' | 'presenceOnly'>> & {\n    /**\n     * Whether the sizing type is fixed or not.\n     */\n    fixed: boolean;\n    /**\n     * The number of text lines used.\n     */\n    numTextLines: number;\n  };\n"]}
+{"version":3,"file":"Persona.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/Persona.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Avatar to display.\n   *\n   * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n   */\n  avatar?: Slot<typeof Avatar>;\n\n  /**\n   * PresenceBadge to display.\n   *\n   * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n   */\n  presence?: Slot<typeof PresenceBadge>;\n\n  /**\n   * The first line of text in the Persona, larger than the rest of the lines.\n   *\n   * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n   *  different than the `name` prop.\n   */\n  primaryText?: Slot<'span'>;\n\n  /**\n   * The second line of text in the Persona.\n   */\n  secondaryText?: Slot<'span'>;\n\n  /**\n   * The third line of text in the Persona.\n   */\n  tertiaryText?: Slot<'span'>;\n\n  /**\n   * The fourth line of text in the Persona.\n   */\n  quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n  /**\n   * The name of the person or entity represented by the Persona.\n   *\n   * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n   */\n  name?: string;\n\n  /**\n   * Whether to display only the presence.\n   *\n   * @default false\n   */\n  presenceOnly?: boolean;\n\n  /**\n   * The size of a Persona and its text.\n   *\n   * @default medium\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n  /**\n   * The position of the text relative to the avatar/presence.\n   *\n   * @default after\n   */\n  textPosition?: 'after' | 'before' | 'below';\n\n  /**\n   * The vertical alignment of the text relative to the avatar/presence.\n   *\n   * @default start\n   */\n  textAlignment?: 'center' | 'start';\n};\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n  Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n    /**\n     * The number of text lines used.\n     */\n    numTextLines: number;\n  };\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Persona/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Persona/renderPersona.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,YAAF;IAAgB;EAAhB,IAAiC,KAAvC;EACA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,MAAM,IAAI,GAAG,YAAY,GACrB,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADG,GAErB,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFpB;EAIA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,CAAC,YAAY,KAAK,OAAjB,IAA4B,YAAY,KAAK,OAA9C,KAA0D,IAD7D,EAEG,KAAK,CAAC,WAAN,iBAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFxB,EAGG,KAAK,CAAC,aAAN,iBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAH1B,EAIG,KAAK,CAAC,YAAN,iBAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAJzB,EAKG,KAAK,CAAC,cAAN,iBAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAL3B,EAMG,YAAY,KAAK,QAAjB,IAA6B,IANhC,CADF;AAUD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n  const { presenceOnly, textPosition } = state;\n  const { slots, slotProps } = getSlots<PersonaSlots>(state);\n\n  const coin = presenceOnly\n    ? slots.presence && <slots.presence {...slotProps.presence} />\n    : slots.avatar && <slots.avatar {...slotProps.avatar} />;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {(textPosition === 'after' || textPosition === 'below') && coin}\n      {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}\n      {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}\n      {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}\n      {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}\n      {textPosition === 'before' && coin}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/renderPersona.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,YAAF;IAAgB;EAAhB,IAAiC,KAAvC;EACA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,MAAM,IAAI,GAAG,YAAY,GACrB,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADG,GAErB,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFpB;EAIA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,CAAC,YAAY,KAAK,OAAjB,IAA4B,YAAY,KAAK,OAA9C,KAA0D,IAD7D,EAEG,KAAK,CAAC,WAAN,iBAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFxB,EAGG,KAAK,CAAC,aAAN,iBAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAH1B,EAIG,KAAK,CAAC,YAAN,iBAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAJzB,EAKG,KAAK,CAAC,cAAN,iBAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAL3B,EAMG,YAAY,KAAK,QAAjB,IAA6B,IANhC,CADF;AAUD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState) => {\n  const { presenceOnly, textPosition } = state;\n  const { slots, slotProps } = getSlots<PersonaSlots>(state);\n\n  const coin = presenceOnly\n    ? slots.presence && <slots.presence {...slotProps.presence} />\n    : slots.avatar && <slots.avatar {...slotProps.avatar} />;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {(textPosition === 'after' || textPosition === 'below') && coin}\n      {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}\n      {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}\n      {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}\n      {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}\n      {textPosition === 'before' && coin}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Persona/usePersona.js

@@ -13,9 +13,11 @@ import { PresenceBadge } from '@fluentui/react-badge';
 
 export const usePersona_unstable = (props, ref) => {
   const {
+    name,
     presenceOnly = false,
-    textPosition = 'after',
-    name
+    size = 'medium',
+    textAlignment = 'start',
+    textPosition = 'after'
   } = props;
   const primaryText = resolveShorthand(props.primaryText, {
     required: true,
@@ -27,54 +29,11 @@ export const usePersona_unstable = (props, ref) => {
   const tertiaryText = resolveShorthand(props.tertiaryText);
   const quaternaryText = resolveShorthand(props.quaternaryText);
   const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;
-  let fixed = false;
-
-  if (!presenceOnly && props.avatar) {
-    fixed = !!props.avatar.size;
-  } else if (props.presence && props.presence) {
-    fixed = !!props.presence.size;
-  }
-
-  let avatarSize = undefined;
-  let presenceSize = undefined;
-
-  if (presenceOnly && !fixed) {
-    if (numTextLines === 1) {
-      presenceSize = 'small';
-    } else if (numTextLines === 2) {
-      presenceSize = 'large';
-    } else {
-      presenceSize = 'extra-large';
-    }
-  } else if (!fixed) {
-    if (numTextLines === 1) {
-      avatarSize = 16;
-    } else if (numTextLines === 2) {
-      avatarSize = 32;
-    } else if (numTextLines === 3) {
-      avatarSize = 56;
-    } else {
-      avatarSize = 72;
-    }
-  }
-
-  const avatar = !presenceOnly ? resolveShorthand(props.avatar, {
-    required: true,
-    defaultProps: {
-      name,
-      badge: props.presence,
-      size: avatarSize
-    }
-  }) : undefined;
-  const presence = presenceOnly ? resolveShorthand(props.presence, {
-    defaultProps: {
-      size: presenceSize
-    }
-  }) : undefined;
   return {
-    fixed,
     numTextLines,
     presenceOnly,
+    size,
+    textAlignment,
     textPosition,
     components: {
       root: 'div',
@@ -90,12 +49,39 @@ export const usePersona_unstable = (props, ref) => {
     },
     /* excludedPropNames */
     ['name']),
-    avatar,
-    presence,
+    avatar: !presenceOnly ? resolveShorthand(props.avatar, {
+      required: true,
+      defaultProps: {
+        name,
+        badge: props.presence,
+        size: avatarSizes[size]
+      }
+    }) : undefined,
+    presence: presenceOnly ? resolveShorthand(props.presence, {
+      defaultProps: {
+        size: presenceSizes[size]
+      }
+    }) : undefined,
     primaryText,
     secondaryText,
     tertiaryText,
     quaternaryText
   };
 };
+const presenceSizes = {
+  'extra-small': 'tiny',
+  small: 'extra-small',
+  medium: 'small',
+  large: 'medium',
+  'extra-large': 'large',
+  huge: 'large'
+};
+const avatarSizes = {
+  'extra-small': 20,
+  small: 28,
+  medium: 32,
+  large: 36,
+  'extra-large': 40,
+  huge: 56
+};
 //# sourceMappingURL=usePersona.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Persona/usePersona.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { AvatarProps } from '@fluentui/react-avatar';\nimport type { PersonaProps, PersonaState } from './Persona.types';\nimport type { PresenceBadgeProps } from '@fluentui/react-badge';\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 { presenceOnly = false, textPosition = 'after', name } = props;\n\n  const primaryText = resolveShorthand(props.primaryText, {\n    required: true,\n    defaultProps: {\n      children: name,\n    },\n  });\n  const secondaryText = resolveShorthand(props.secondaryText);\n  const tertiaryText = resolveShorthand(props.tertiaryText);\n  const quaternaryText = resolveShorthand(props.quaternaryText);\n\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  let fixed = false;\n  if (!presenceOnly && props.avatar) {\n    fixed = !!(props.avatar as AvatarProps).size;\n  } else if (props.presence && props.presence) {\n    fixed = !!(props.presence as PresenceBadgeProps).size;\n  }\n\n  let avatarSize: AvatarProps['size'] = undefined;\n  let presenceSize: PresenceBadgeProps['size'] = undefined;\n  if (presenceOnly && !fixed) {\n    if (numTextLines === 1) {\n      presenceSize = 'small';\n    } else if (numTextLines === 2) {\n      presenceSize = 'large';\n    } else {\n      presenceSize = 'extra-large';\n    }\n  } else if (!fixed) {\n    if (numTextLines === 1) {\n      avatarSize = 16;\n    } else if (numTextLines === 2) {\n      avatarSize = 32;\n    } else if (numTextLines === 3) {\n      avatarSize = 56;\n    } else {\n      avatarSize = 72;\n    }\n  }\n\n  const avatar: PersonaState['avatar'] = !presenceOnly\n    ? resolveShorthand(props.avatar, {\n        required: true,\n        defaultProps: {\n          name,\n          badge: props.presence,\n          size: avatarSize,\n        },\n      })\n    : undefined;\n\n  const presence: PersonaState['presence'] = presenceOnly\n    ? resolveShorthand(props.presence, {\n        defaultProps: {\n          size: presenceSize,\n        },\n      })\n    : undefined;\n\n  return {\n    fixed,\n    numTextLines,\n    presenceOnly,\n    textPosition,\n\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      presence: PresenceBadge,\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n\n    root: getNativeElementProps(\n      'div',\n      {\n        ...props,\n        ref,\n      },\n      /* excludedPropNames */ ['name'],\n    ),\n    avatar,\n    presence,\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/usePersona.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,aAAT,QAA8B,uBAA9B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAF;IAAQ,YAAY,GAAG,KAAvB;IAA8B,IAAI,GAAG,QAArC;IAA+C,aAAa,GAAG,OAA/D;IAAwE,YAAY,GAAG;EAAvF,IAAmG,KAAzG;EAEA,MAAM,WAAW,GAAG,gBAAgB,CAAC,KAAK,CAAC,WAAP,EAAoB;IACtD,QAAQ,EAAE,IAD4C;IAEtD,YAAY,EAAE;MACZ,QAAQ,EAAE;IADE;EAFwC,CAApB,CAApC;EAMA,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,aAAP,CAAtC;EACA,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,CAAC,YAAP,CAArC;EACA,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,cAAP,CAAvC;EAEA,MAAM,YAAY,GAAG,CAAC,WAAD,EAAc,aAAd,EAA6B,YAA7B,EAA2C,cAA3C,EAA2D,MAA3D,CAAkE,OAAlE,EAA2E,MAAhG;EAEA,OAAO;IACL,YADK;IAEL,YAFK;IAGL,IAHK;IAIL,aAJK;IAKL,YALK;IAOL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE,MAFE;MAGV,QAAQ,EAAE,aAHA;MAIV,WAAW,EAAE,MAJH;MAKV,aAAa,EAAE,MALL;MAMV,YAAY,EAAE,MANJ;MAOV,cAAc,EAAE;IAPN,CAPP;IAiBL,IAAI,EAAE,qBAAqB,CACzB,KADyB,EAEzB,EACE,GAAG,KADL;MAEE;IAFF,CAFyB;IAMzB;IAAwB,CAAC,MAAD,CANC,CAjBtB;IAyBL,MAAM,EAAE,CAAC,YAAD,GACJ,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;MAC7B,QAAQ,EAAE,IADmB;MAE7B,YAAY,EAAE;QACZ,IADY;QAEZ,KAAK,EAAE,KAAK,CAAC,QAFD;QAGZ,IAAI,EAAE,WAAW,CAAC,IAAD;MAHL;IAFe,CAAf,CADZ,GASJ,SAlCC;IAmCL,QAAQ,EAAE,YAAY,GAClB,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;MAC/B,YAAY,EAAE;QACZ,IAAI,EAAE,aAAa,CAAC,IAAD;MADP;IADiB,CAAjB,CADE,GAMlB,SAzCC;IA0CL,WA1CK;IA2CL,aA3CK;IA4CL,YA5CK;IA6CL;EA7CK,CAAP;AA+CD,CA9DM;AAgEP,MAAM,aAAa,GAAG;EACpB,eAAe,MADK;EAEpB,KAAK,EAAE,aAFa;EAGpB,MAAM,EAAE,OAHY;EAIpB,KAAK,EAAE,QAJa;EAKpB,eAAe,OALK;EAMpB,IAAI,EAAE;AANc,CAAtB;AASA,MAAM,WAAW,GAAG;EAClB,eAAe,EADG;EAElB,KAAK,EAAE,EAFW;EAGlB,MAAM,EAAE,EAHU;EAIlB,KAAK,EAAE,EAJW;EAKlB,eAAe,EALG;EAMlB,IAAI,EAAE;AANY,CAApB","sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { PersonaProps, PersonaState } from './Persona.types';\n\n/**\n * Create the state required to render Persona.\n *\n * The returned state can be modified with hooks such as usePersonaStyles_unstable,\n * before being passed to renderPersona_unstable.\n *\n * @param props - props from this instance of Persona\n * @param ref - reference to root HTMLElement of Persona\n */\nexport const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElement>): PersonaState => {\n  const { name, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after' } = props;\n\n  const primaryText = resolveShorthand(props.primaryText, {\n    required: true,\n    defaultProps: {\n      children: name,\n    },\n  });\n  const secondaryText = resolveShorthand(props.secondaryText);\n  const tertiaryText = resolveShorthand(props.tertiaryText);\n  const quaternaryText = resolveShorthand(props.quaternaryText);\n\n  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;\n\n  return {\n    numTextLines,\n    presenceOnly,\n    size,\n    textAlignment,\n    textPosition,\n\n    components: {\n      root: 'div',\n      avatar: Avatar,\n      presence: PresenceBadge,\n      primaryText: 'span',\n      secondaryText: 'span',\n      tertiaryText: 'span',\n      quaternaryText: 'span',\n    },\n\n    root: getNativeElementProps(\n      'div',\n      {\n        ...props,\n        ref,\n      },\n      /* excludedPropNames */ ['name'],\n    ),\n    avatar: !presenceOnly\n      ? resolveShorthand(props.avatar, {\n          required: true,\n          defaultProps: {\n            name,\n            badge: props.presence,\n            size: avatarSizes[size],\n          },\n        })\n      : undefined,\n    presence: presenceOnly\n      ? resolveShorthand(props.presence, {\n          defaultProps: {\n            size: presenceSizes[size],\n          },\n        })\n      : undefined,\n    primaryText,\n    secondaryText,\n    tertiaryText,\n    quaternaryText,\n  };\n};\n\nconst presenceSizes = {\n  'extra-small': 'tiny',\n  small: 'extra-small',\n  medium: 'small',\n  large: 'medium',\n  'extra-large': 'large',\n  huge: 'large',\n} as const;\n\nconst avatarSizes = {\n  'extra-small': 20,\n  small: 28,\n  medium: 32,\n  large: 36,\n  'extra-large': 40,\n  huge: 56,\n} as const;\n"],"sourceRoot":"../src/"}