@fluentui/react-persona 9.1.0-beta.6 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,93 @@
   "name": "@fluentui/react-persona",
   "entries": [
     {
-      "date": "Tue, 20 Dec 2022 14:55:58 GMT",
+      "date": "Wed, 04 Jan 2023 01:35:36 GMT",
+      "tag": "@fluentui/react-persona_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-persona",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-persona",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-persona",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          }
+        ],
+        "minor": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "3e322d15529451be153e97298873253e21af4082",
+            "comment": "feat: Moving Persona to stable."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.2.11",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.17",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:33 GMT",
+      "tag": "@fluentui/react-persona_v9.1.0-beta.7",
+      "version": "9.1.0-beta.7",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.2.10",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.16",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-theme to v9.1.5",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Dec 2022 14:59:34 GMT",
       "tag": "@fluentui/react-persona_v9.1.0-beta.6",
       "version": "9.1.0-beta.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Tue, 20 Dec 2022 14:55:58 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Jan 2023 01:35:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0)
+
+Wed, 04 Jan 2023 01:35:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.7..@fluentui/react-persona_v9.1.0)
+
+### Minor changes
+
+- feat: Moving Persona to stable. ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by esteban.230@hotmail.com)
+- Bump @fluentui/react-avatar to v9.2.11 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-badge to v9.0.17 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
+## [9.1.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.7)
+
+Wed, 21 Dec 2022 10:20:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.6..@fluentui/react-persona_v9.1.0-beta.7)
+
+### Changes
+
+- Bump @fluentui/react-avatar to v9.2.10 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-badge to v9.0.16 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+
 ## [9.1.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.6)
 
-Tue, 20 Dec 2022 14:55:58 GMT 
+Tue, 20 Dec 2022 14:59:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.5..@fluentui/react-persona_v9.1.0-beta.6)
 
 ### Changes

package/README.md

@@ -2,20 +2,10 @@
 
 **React Persona components for [Fluent UI React](https://react.fluentui.dev/)**
 
-## STATUS: WIP 🚧
-
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
-
 ## Usage
 
 To import Persona:
 
-```js
-import { Persona } from '@fluentui/react-persona';
-```
-
-Once the Persona component graduates to a production release, the component will be available at:
-
 ```js
 import { Persona } from '@fluentui/react-components';
 ```

package/lib/components/Persona/Persona.js

@@ -6,7 +6,6 @@ import { usePersonaStyles_unstable } from './usePersonaStyles';
  * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
  * or an Avatar with a PresenceBadge.
  */
-
 export const Persona = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = usePersona_unstable(props, ref);
   usePersonaStyles_unstable(state);

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,yBAAyB,QAAQ,oBAAoB;AAI9D;;;;AAIA,OAAO,MAAMC,OAAO,gBAAsCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGN,mBAAmB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAE7CJ,yBAAyB,CAACK,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,OAAO,CAACK,WAAW,GAAG,SAAS","names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","Persona","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/Persona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles';\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"]}

package/lib/components/Persona/renderPersona.js

@@ -3,7 +3,6 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Persona
  */
-
 export const renderPersona_unstable = state => {
   const {
     presenceOnly,
@@ -13,14 +12,21 @@ export const renderPersona_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  const coin = presenceOnly ? slots.presence && /*#__PURE__*/React.createElement(slots.presence, { ...slotProps.presence
-  }) : slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, { ...slotProps.avatar
+  const coin = presenceOnly ? slots.presence && /*#__PURE__*/React.createElement(slots.presence, {
+    ...slotProps.presence
+  }) : slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, {
+    ...slotProps.avatar
   });
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/React.createElement(slots.primaryText, { ...slotProps.primaryText
-  }), slots.secondaryText && /*#__PURE__*/React.createElement(slots.secondaryText, { ...slotProps.secondaryText
-  }), slots.tertiaryText && /*#__PURE__*/React.createElement(slots.tertiaryText, { ...slotProps.tertiaryText
-  }), slots.quaternaryText && /*#__PURE__*/React.createElement(slots.quaternaryText, { ...slotProps.quaternaryText
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/React.createElement(slots.primaryText, {
+    ...slotProps.primaryText
+  }), slots.secondaryText && /*#__PURE__*/React.createElement(slots.secondaryText, {
+    ...slotProps.secondaryText
+  }), slots.tertiaryText && /*#__PURE__*/React.createElement(slots.tertiaryText, {
+    ...slotProps.tertiaryText
+  }), slots.quaternaryText && /*#__PURE__*/React.createElement(slots.quaternaryText, {
+    ...slotProps.quaternaryText
   }), textPosition === 'before' && coin);
 };
 //# sourceMappingURL=renderPersona.js.map

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,YAAY;IAAEC;EAAY,CAAE,GAAGF,KAAK;EAC5C,MAAM;IAAEG,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeE,KAAK,CAAC;EAE1D,MAAMK,IAAI,GAAGJ,YAAY,GACrBE,KAAK,CAACG,QAAQ,iBAAIT,oBAACM,KAAK,CAACG,QAAQ;IAAA,GAAKF,SAAS,CAACE;EAAQ,EAAI,GAC5DH,KAAK,CAACI,MAAM,iBAAIV,oBAACM,KAAK,CAACI,MAAM;IAAA,GAAKH,SAAS,CAACG;EAAM,EAAI;EAE1D,oBACEV,oBAACM,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3B,CAACN,YAAY,KAAK,OAAO,IAAIA,YAAY,KAAK,OAAO,KAAKG,IAAI,EAC9DF,KAAK,CAACM,WAAW,iBAAIZ,oBAACM,KAAK,CAACM,WAAW;IAAA,GAAKL,SAAS,CAACK;EAAW,EAAI,EACrEN,KAAK,CAACO,aAAa,iBAAIb,oBAACM,KAAK,CAACO,aAAa;IAAA,GAAKN,SAAS,CAACM;EAAa,EAAI,EAC3EP,KAAK,CAACQ,YAAY,iBAAId,oBAACM,KAAK,CAACQ,YAAY;IAAA,GAAKP,SAAS,CAACO;EAAY,EAAI,EACxER,KAAK,CAACS,cAAc,iBAAIf,oBAACM,KAAK,CAACS,cAAc;IAAA,GAAKR,SAAS,CAACQ;EAAc,EAAI,EAC9EV,YAAY,KAAK,QAAQ,IAAIG,IAAI,CACvB;AAEjB,CAAC","names":["React","getSlots","renderPersona_unstable","state","presenceOnly","textPosition","slots","slotProps","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/renderPersona.tsx"],"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"]}

package/lib/components/Persona/usePersona.js

@@ -10,7 +10,6 @@ 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,
@@ -44,11 +43,10 @@ export const usePersona_unstable = (props, ref) => {
       tertiaryText: 'span',
       quaternaryText: 'span'
     },
-    root: getNativeElementProps('div', { ...props,
+    root: getNativeElementProps('div', {
+      ...props,
       ref
-    },
-    /* excludedPropNames */
-    ['name']),
+    }, /* excludedPropNames */['name']),
     avatar: !presenceOnly ? resolveShorthand(props.avatar, {
       required: true,
       defaultProps: {

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":"AACA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnF,SAASC,aAAa,QAAQ,uBAAuB;AAGrD;;;;;;;;;AASA,OAAO,MAAMC,mBAAmB,GAAG,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG,MAAM;IAAEC,IAAI;IAAEC,YAAY,GAAG,KAAK;IAAEC,IAAI,GAAG,QAAQ;IAAEC,aAAa,GAAG,OAAO;IAAEC,YAAY,GAAG;EAAO,CAAE,GAAGN,KAAK;EAE9G,MAAMO,WAAW,GAAGV,gBAAgB,CAACG,KAAK,CAACO,WAAW,EAAE;IACtDC,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZC,QAAQ,EAAER;;GAEb,CAAC;EACF,MAAMS,aAAa,GAAGd,gBAAgB,CAACG,KAAK,CAACW,aAAa,CAAC;EAC3D,MAAMC,YAAY,GAAGf,gBAAgB,CAACG,KAAK,CAACY,YAAY,CAAC;EACzD,MAAMC,cAAc,GAAGhB,gBAAgB,CAACG,KAAK,CAACa,cAAc,CAAC;EAE7D,MAAMC,YAAY,GAAG,CAACP,WAAW,EAAEI,aAAa,EAAEC,YAAY,EAAEC,cAAc,CAAC,CAACE,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM;EAEtG,OAAO;IACLH,YAAY;IACZX,YAAY;IACZC,IAAI;IACJC,aAAa;IACbC,YAAY;IAEZY,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,MAAM,EAAEzB,MAAM;MACd0B,QAAQ,EAAEvB,aAAa;MACvBS,WAAW,EAAE,MAAM;MACnBI,aAAa,EAAE,MAAM;MACrBC,YAAY,EAAE,MAAM;MACpBC,cAAc,EAAE;KACjB;IAEDM,IAAI,EAAEvB,qBAAqB,CACzB,KAAK,EACL;MACE,GAAGI,KAAK;MACRC;KACD,EACD,uBAAwB,CAAC,MAAM,CAAC,CACjC;IACDmB,MAAM,EAAE,CAACjB,YAAY,GACjBN,gBAAgB,CAACG,KAAK,CAACoB,MAAM,EAAE;MAC7BZ,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZP,IAAI;QACJoB,KAAK,EAAEtB,KAAK,CAACqB,QAAQ;QACrBjB,IAAI,EAAEmB,WAAW,CAACnB,IAAI;;KAEzB,CAAC,GACFoB,SAAS;IACbH,QAAQ,EAAElB,YAAY,GAClBN,gBAAgB,CAACG,KAAK,CAACqB,QAAQ,EAAE;MAC/BZ,YAAY,EAAE;QACZL,IAAI,EAAEqB,aAAa,CAACrB,IAAI;;KAE3B,CAAC,GACFoB,SAAS;IACbjB,WAAW;IACXI,aAAa;IACbC,YAAY;IACZC;GACD;AACH,CAAC;AAED,MAAMY,aAAa,GAAG;EACpB,aAAa,EAAE,MAAM;EACrBC,KAAK,EAAE,aAAa;EACpBC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE,QAAQ;EACf,aAAa,EAAE,OAAO;EACtBC,IAAI,EAAE;CACE;AAEV,MAAMN,WAAW,GAAG;EAClB,aAAa,EAAE,EAAE;EACjBG,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,EAAE;EACT,aAAa,EAAE,EAAE;EACjBC,IAAI,EAAE;CACE","names":["Avatar","getNativeElementProps","resolveShorthand","PresenceBadge","usePersona_unstable","props","ref","name","presenceOnly","size","textAlignment","textPosition","primaryText","required","defaultProps","children","secondaryText","tertiaryText","quaternaryText","numTextLines","filter","Boolean","length","components","root","avatar","presence","badge","avatarSizes","undefined","presenceSizes","small","medium","large","huge"],"sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/usePersona.ts"],"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"]}

package/lib/components/Persona/usePersonaStyles.js

@@ -13,92 +13,87 @@ const avatarSpacing = `--fui-Persona__avatar--spacing`;
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/__styles({
-  "base": {
-    "mc9l5x": "fwk3njj",
-    "v29qe6": "fvtn1bl"
+  base: {
+    mc9l5x: "fwk3njj",
+    v29qe6: "fvtn1bl"
   },
-  "after": {
-    "Bxotwcr": "f1u07yai",
-    "B7hvi0a": "f1m2n5bn",
-    "Budl1dq": "f1c1ms5d"
+  after: {
+    Bxotwcr: "f1u07yai",
+    B7hvi0a: "f1m2n5bn",
+    Budl1dq: "f1c1ms5d"
   },
-  "before": {
-    "Bxotwcr": "f1u07yai",
-    "B7hvi0a": "f1tll2w5",
-    "Budl1dq": "ffvkwdr"
+  before: {
+    Bxotwcr: "f1u07yai",
+    B7hvi0a: "f1tll2w5",
+    Budl1dq: "ffvkwdr"
   },
-  "below": {
-    "B7hvi0a": "f1oiokrs"
+  below: {
+    B7hvi0a: "f1oiokrs"
   },
-  "coin": {
-    "Ijaq50": "f1hek2iy"
+  coin: {
+    Ijaq50: "f1hek2iy"
   },
-  "start": {
-    "qb2dma": "f9h729m"
+  start: {
+    qb2dma: "f9h729m"
   },
-  "center": {
-    "qb2dma": "f7nlbp4"
+  center: {
+    qb2dma: "f7nlbp4"
   },
-  "afterAlignToPrimary": {
-    "qb2dma": "f7nlbp4",
-    "Ijaq50": "f1rnkkuc",
-    "Bw0ie65": "f1warjpf"
+  afterAlignToPrimary: {
+    qb2dma: "f7nlbp4",
+    Ijaq50: "f1rnkkuc",
+    Bw0ie65: "f1warjpf"
   },
-  "beforeAlignToPrimary": {
-    "qb2dma": "f7nlbp4",
-    "Ijaq50": "f1rnkkuc",
-    "Br312pm": "fwu52yu"
+  beforeAlignToPrimary: {
+    qb2dma: "f7nlbp4",
+    Ijaq50: "f1rnkkuc",
+    Br312pm: "fwu52yu"
   }
 }, {
-  "d": [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
+  d: [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
 });
-
 const useAvatarSpacingStyles = /*#__PURE__*/__styles({
   "extra-small": {
-    "Bs1gm4r": "f1e48tse"
+    Bs1gm4r: "f1e48tse"
   },
-  "small": {
-    "Bs1gm4r": "f18q9vkd"
+  small: {
+    Bs1gm4r: "f18q9vkd"
   },
-  "medium": {
-    "Bs1gm4r": "f18q9vkd"
+  medium: {
+    Bs1gm4r: "f18q9vkd"
   },
-  "large": {
-    "Bs1gm4r": "fx34bi6"
+  large: {
+    Bs1gm4r: "fx34bi6"
   },
   "extra-large": {
-    "Bs1gm4r": "fx34bi6"
+    Bs1gm4r: "fx34bi6"
   },
-  "huge": {
-    "Bs1gm4r": "f1o96qtm"
+  huge: {
+    Bs1gm4r: "f1o96qtm"
   },
-  "after": {
-    "t21cq0": ["f103ycu4", "f1tao51"]
+  after: {
+    t21cq0: ["f103ycu4", "f1tao51"]
   },
-  "below": {
-    "jrapky": "fbo7acy"
+  below: {
+    jrapky: "fbo7acy"
   },
-  "before": {
-    "Frg6f3": ["f1tao51", "f103ycu4"]
+  before: {
+    Frg6f3: ["f1tao51", "f103ycu4"]
   }
 }, {
-  "d": [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}", ".f18q9vkd{--fui-Persona__avatar--spacing:var(--spacingHorizontalS);}", ".fx34bi6{--fui-Persona__avatar--spacing:var(--spacingHorizontalMNudge);}", ".f1o96qtm{--fui-Persona__avatar--spacing:var(--spacingHorizontalM);}", ".f103ycu4{margin-right:var(--fui-Persona__avatar--spacing);}", ".f1tao51{margin-left:var(--fui-Persona__avatar--spacing);}", ".fbo7acy{margin-bottom:var(--fui-Persona__avatar--spacing);}"]
+  d: [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}", ".f18q9vkd{--fui-Persona__avatar--spacing:var(--spacingHorizontalS);}", ".fx34bi6{--fui-Persona__avatar--spacing:var(--spacingHorizontalMNudge);}", ".f1o96qtm{--fui-Persona__avatar--spacing:var(--spacingHorizontalM);}", ".f103ycu4{margin-right:var(--fui-Persona__avatar--spacing);}", ".f1tao51{margin-left:var(--fui-Persona__avatar--spacing);}", ".fbo7acy{margin-bottom:var(--fui-Persona__avatar--spacing);}"]
 });
-
 const usePresenceSpacingStyles = /*#__PURE__*/__styles({
-  "small": {
-    "Bs1gm4r": "f1e48tse"
+  small: {
+    Bs1gm4r: "f1e48tse"
   }
 }, {
-  "d": [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}"]
+  d: [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}"]
 });
 /**
  * Apply styling to the Persona slots based on the state
  */
-
-
 export const usePersonaStyles_unstable = state => {
   const {
     presenceOnly,
@@ -113,76 +108,68 @@ export const usePersonaStyles_unstable = state => {
   } = useTextClassNames(state, alignToPrimary);
   const styles = useStyles();
   const avatarSpacingStyles = useAvatarSpacingStyles();
-  const presenceSpacingStyles = { ...avatarSpacingStyles,
+  const presenceSpacingStyles = {
+    ...avatarSpacingStyles,
     ...usePresenceSpacingStyles()
   };
   state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);
-
   if (state.avatar) {
     state.avatar.className = mergeClasses(personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
   }
-
   if (state.presence) {
     state.presence.className = mergeClasses(personaClassNames.presence, styles.coin, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
   }
-
   if (state.primaryText) {
     state.primaryText.className = mergeClasses(personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
   }
-
   if (state.secondaryText) {
     state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
   }
-
   if (state.tertiaryText) {
     state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
   }
-
   if (state.quaternaryText) {
     state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, optionalTextClassName, state.quaternaryText.className);
   }
-
   return state;
 };
-
 const useTextStyles = /*#__PURE__*/__styles({
-  "base": {
-    "mc9l5x": "ftgm304"
-  },
-  "primaryText": {
-    "sj55zd": "f19n0e5"
-  },
-  "optionalText": {
-    "sj55zd": "fkfq4zb"
-  },
-  "beforeAlignToPrimary": {
-    "Bw0ie65": "f1warjpf"
-  },
-  "afterAlignToPrimary": {
-    "Br312pm": "fwu52yu"
-  },
-  "body1": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "f1i3iumi"
-  },
-  "caption1": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fy9rknc",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "fwrc4pm"
-  },
-  "subtitle2": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fod5ikn",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "faaz57k"
+  base: {
+    mc9l5x: "ftgm304"
+  },
+  primaryText: {
+    sj55zd: "f19n0e5"
+  },
+  optionalText: {
+    sj55zd: "fkfq4zb"
+  },
+  beforeAlignToPrimary: {
+    Bw0ie65: "f1warjpf"
+  },
+  afterAlignToPrimary: {
+    Br312pm: "fwu52yu"
+  },
+  body1: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  caption1: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  subtitle2: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
   }
 }, {
-  "d": [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
+  d: [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
 });
-
 const useTextClassNames = (state, alignToPrimary) => {
   const {
     presenceOnly,
@@ -192,7 +179,6 @@ const useTextClassNames = (state, alignToPrimary) => {
   const textStyles = useTextStyles();
   let primaryTextSize;
   let alignToPrimaryClassName;
-
   if (presenceOnly) {
     if (size === 'extra-small') {
       primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;
@@ -201,7 +187,6 @@ const useTextClassNames = (state, alignToPrimary) => {
     } else {
       primaryTextSize = textStyles.body1;
     }
-
     if (alignToPrimary) {
       if (textPosition === 'before') {
         alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
@@ -218,7 +203,6 @@ const useTextClassNames = (state, alignToPrimary) => {
       primaryTextSize = textStyles.body1;
     }
   }
-
   return {
     primaryTextClassName: mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize, alignToPrimaryClassName),
     optionalTextClassName: mergeClasses(textStyles.base, textStyles.optionalText, !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1, alignToPrimaryClassName)

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridAutoRows: 'max-content',\n  },\n\n  after: {\n    gridAutoFlow: 'column',\n    justifyItems: 'start',\n    gridTemplateColumns: 'max-content [middle] auto',\n  },\n  before: {\n    gridAutoFlow: 'column',\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    justifyItems: 'center',\n  },\n  coin: {\n    gridRowStart: 'span 5',\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\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  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      styles.coin,\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      styles.coin,\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      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      optionalTextClassName,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst useTextStyles = makeStyles({\n  base: {\n    display: 'block',\n  },\n  primaryText: {\n    color: tokens.colorNeutralForeground1,\n  },\n  optionalText: {\n    color: tokens.colorNeutralForeground2,\n  },\n\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 textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\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    } else {\n      primaryTextSize = textStyles.body1;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.primaryText,\n      primaryTextSize,\n      alignToPrimaryClassName,\n    ),\n    optionalTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.optionalText,\n      !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","coin","afterAlignToPrimary","beforeAlignToPrimary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridAutoRows: 'max-content',\n  },\n\n  after: {\n    gridAutoFlow: 'column',\n    justifyItems: 'start',\n    gridTemplateColumns: 'max-content [middle] auto',\n  },\n  before: {\n    gridAutoFlow: 'column',\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    justifyItems: 'center',\n  },\n  coin: {\n    gridRowStart: 'span 5',\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\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  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      styles.coin,\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      styles.coin,\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      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      optionalTextClassName,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst useTextStyles = makeStyles({\n  base: {\n    display: 'block',\n  },\n  primaryText: {\n    color: tokens.colorNeutralForeground1,\n  },\n  optionalText: {\n    color: tokens.colorNeutralForeground2,\n  },\n\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 textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\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    } else {\n      primaryTextSize = textStyles.body1;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.primaryText,\n      primaryTextSize,\n      alignToPrimaryClassName,\n    ),\n    optionalTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.optionalText,\n      !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"]}