@fluentui/react-persona 0.0.0-nightly-20230502-0418.1 → 0.0.0-nightly-20230504-0417.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-persona",
   "entries": [
     {
-      "date": "Tue, 02 May 2023 04:24:29 GMT",
-      "tag": "@fluentui/react-persona_v0.0.0-nightly-20230502-0418.1",
-      "version": "0.0.0-nightly-20230502-0418.1",
+      "date": "Thu, 04 May 2023 04:24:45 GMT",
+      "tag": "@fluentui/react-persona_v0.0.0-nightly-20230504-0417.1",
+      "version": "0.0.0-nightly-20230504-0417.1",
       "comments": {
         "prerelease": [
           {
@@ -16,44 +16,44 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,24 +1,24 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Tue, 02 May 2023 04:24:29 GMT and should not be manually modified.
+This log was last generated on Thu, 04 May 2023 04:24:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230502-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230502-0418.1)
+## [0.0.0-nightly-20230504-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230504-0417.1)
 
-Tue, 02 May 2023 04:24:29 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.9..@fluentui/react-persona_v0.0.0-nightly-20230502-0418.1)
+Thu, 04 May 2023 04:24:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.9..@fluentui/react-persona_v0.0.0-nightly-20230504-0417.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-avatar to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-badge to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
+- Bump @fluentui/react-avatar to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-badge to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
 
 ## [9.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.9)
 

package/dist/index.d.ts

@@ -0,0 +1,122 @@
+/// <reference types="react" />
+
+import { Avatar } from '@fluentui/react-avatar';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { PresenceBadge } from '@fluentui/react-badge';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
+ * or an Avatar with a PresenceBadge.
+ */
+export declare const Persona: ForwardRefComponent<PersonaProps>;
+
+export declare const personaClassNames: SlotClassNames<PersonaSlots>;
+
+/**
+ * Persona Props
+ */
+export declare type PersonaProps = ComponentProps<PersonaSlots> & {
+    /**
+     * The name of the person or entity represented by the Persona.
+     *
+     * When `primaryText` is not provided, this will be used as the default value for `primaryText`.
+     */
+    name?: string;
+    /**
+     * Whether to display only the presence.
+     *
+     * @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?: 'after' | 'before' | 'below';
+    /**
+     * The vertical alignment of the text relative to the avatar/presence.
+     *
+     * @default start
+     */
+    textAlignment?: 'center' | 'start';
+};
+
+export declare type PersonaSlots = {
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * Avatar to display.
+     *
+     * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.
+     */
+    avatar?: Slot<typeof Avatar>;
+    /**
+     * PresenceBadge to display.
+     *
+     * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.
+     */
+    presence?: Slot<typeof PresenceBadge>;
+    /**
+     * The first line of text in the Persona, larger than the rest of the lines.
+     *
+     * `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'>;
+    /**
+     * The second line of text in the Persona.
+     */
+    secondaryText?: Slot<'span'>;
+    /**
+     * The third line of text in the Persona.
+     */
+    tertiaryText?: Slot<'span'>;
+    /**
+     * The fourth line of text in the Persona.
+     */
+    quaternaryText?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering Persona
+ */
+export declare type PersonaState = ComponentState<PersonaSlots> & Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {
+    /**
+     * The number of text lines used.
+     */
+    numTextLines: number;
+};
+
+/**
+ * Render the final JSX of Persona
+ */
+export declare const renderPersona_unstable: (state: PersonaState) => JSX.Element;
+
+/**
+ * Create the state required to render Persona.
+ *
+ * The returned state can be modified with hooks such as usePersonaStyles_unstable,
+ * before being passed to renderPersona_unstable.
+ *
+ * @param props - props from this instance of Persona
+ * @param ref - reference to root HTMLElement of Persona
+ */
+export declare const usePersona_unstable: (props: PersonaProps, ref: React_2.Ref<HTMLElement>) => PersonaState;
+
+/**
+ * Apply styling to the Persona slots based on the state
+ */
+export declare const usePersonaStyles_unstable: (state: PersonaState) => PersonaState;
+
+export { }

package/lib/Persona.js

@@ -0,0 +1,2 @@
+export * from './components/Persona/index';
+//# sourceMappingURL=Persona.js.map

package/lib/Persona.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/components/Persona/Persona.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { renderPersona_unstable } from './renderPersona';
+import { usePersona_unstable } from './usePersona';
+import { usePersonaStyles_unstable } from './usePersonaStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * 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);
+  useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);
+  return renderPersona_unstable(state);
+});
+Persona.displayName = 'Persona';
+//# sourceMappingURL=Persona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Persona/Persona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\n * or an Avatar with a PresenceBadge.\n */\nexport const Persona: ForwardRefComponent<PersonaProps> = React.forwardRef((props, ref) => {\n  const state = usePersona_unstable(props, ref);\n\n  usePersonaStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,yBAAyB,QAAQ;AAG1C,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,OAAA,gBAA6CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQP,mBAAA,CAAoBK,KAAA,EAAOC,GAAA;EAEzCL,yBAAA,CAA0BM,KAAA;EAE1BL,2BAAA,CAA4B,6BAA6BK,KAAA;EAEzD,OAAOR,sBAAA,CAAuBQ,KAAA;AAChC;AAEAJ,OAAA,CAAQK,WAAW,GAAG"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Persona.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"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"],"mappings":"AAAA"}

package/lib/components/Persona/index.js

@@ -0,0 +1,6 @@
+export * from './Persona';
+export * from './Persona.types';
+export * from './renderPersona';
+export * from './usePersona';
+export * from './usePersonaStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/Persona/index.ts"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Persona/renderPersona.js

@@ -0,0 +1,18 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Persona
+ */
+export const renderPersona_unstable = state => {
+  const {
+    presenceOnly,
+    textPosition
+  } = state;
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  const coin = presenceOnly ? slots.presence && /*#__PURE__*/createElement(slots.presence, slotProps.presence) : slots.avatar && /*#__PURE__*/createElement(slots.avatar, slotProps.avatar);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && /*#__PURE__*/createElement(slots.primaryText, slotProps.primaryText), slots.secondaryText && /*#__PURE__*/createElement(slots.secondaryText, slotProps.secondaryText), slots.tertiaryText && /*#__PURE__*/createElement(slots.tertiaryText, slotProps.tertiaryText), slots.quaternaryText && /*#__PURE__*/createElement(slots.quaternaryText, slotProps.quaternaryText), textPosition === 'before' && coin);
+};
+//# sourceMappingURL=renderPersona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderPersona_unstable","state","presenceOnly","textPosition","slots","slotProps","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"sources":["../../../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,sBAAA,GAA0BC,KAAA,IAAwB;EAC7D,MAAM;IAAEC,YAAA;IAAcC;EAAY,CAAE,GAAGF,KAAA;EACvC,MAAM;IAAEG,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA2BE,KAAA;EAExD,MAAMK,IAAA,GAAOJ,YAAA,GACTE,KAAA,CAAMG,QAAQ,iBAAIT,aAfxB,CAeyBM,KAAA,CAAMG,QAAQ,EAAKF,SAAA,CAAUE,QAAQ,IACxDH,KAAA,CAAMI,MAAM,iBAAIV,aAhBtB,CAgBuBM,KAAA,CAAMI,MAAM,EAAKH,SAAA,CAAUG,MAAM,CAAI;EAE1D,oBACEV,aAnBJ,CAmBKM,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3B,CAACN,YAAA,KAAiB,WAAWA,YAAA,KAAiB,OAAM,KAAMG,IAAA,EAC1DF,KAAA,CAAMM,WAAW,iBAAIZ,aArB5B,CAqB6BM,KAAA,CAAMM,WAAW,EAAKL,SAAA,CAAUK,WAAW,GACjEN,KAAA,CAAMO,aAAa,iBAAIb,aAtB9B,CAsB+BM,KAAA,CAAMO,aAAa,EAAKN,SAAA,CAAUM,aAAa,GACvEP,KAAA,CAAMQ,YAAY,iBAAId,aAvB7B,CAuB8BM,KAAA,CAAMQ,YAAY,EAAKP,SAAA,CAAUO,YAAY,GACpER,KAAA,CAAMS,cAAc,iBAAIf,aAxB/B,CAwBgCM,KAAA,CAAMS,cAAc,EAAKR,SAAA,CAAUQ,cAAc,GAC1EV,YAAA,KAAiB,YAAYG,IAAA;AAGpC"}

package/lib/components/Persona/usePersona.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { Avatar } from '@fluentui/react-avatar';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { PresenceBadge } from '@fluentui/react-badge';
+/**
+ * Create the state required to render Persona.
+ *
+ * The returned state can be modified with hooks such as usePersonaStyles_unstable,
+ * before being passed to renderPersona_unstable.
+ *
+ * @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 = resolveShorthand(props.primaryText, {
+    required: true,
+    defaultProps: {
+      children: name
+    }
+  });
+  const secondaryText = resolveShorthand(props.secondaryText);
+  const tertiaryText = resolveShorthand(props.tertiaryText);
+  const quaternaryText = resolveShorthand(props.quaternaryText);
+  const numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].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: getNativeElementProps('div', {
+      ...props,
+      ref
+    }, /* excludedPropNames */['name']),
+    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

@@ -0,0 +1 @@
+{"version":3,"names":["React","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"],"sources":["../../../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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AACxD,SAASC,aAAa,QAAQ;AAG9B;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG,MAAM;IAAEC,IAAA;IAAMC,YAAA,GAAe,KAAK;IAAEC,IAAA,GAAO;IAAUC,aAAA,GAAgB;IAASC,YAAA,GAAe;EAAO,CAAE,GAAGN,KAAA;EAEzG,MAAMO,WAAA,GAAcV,gBAAA,CAAiBG,KAAA,CAAMO,WAAW,EAAE;IACtDC,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZC,QAAA,EAAUR;IACZ;EACF;EACA,MAAMS,aAAA,GAAgBd,gBAAA,CAAiBG,KAAA,CAAMW,aAAa;EAC1D,MAAMC,YAAA,GAAef,gBAAA,CAAiBG,KAAA,CAAMY,YAAY;EACxD,MAAMC,cAAA,GAAiBhB,gBAAA,CAAiBG,KAAA,CAAMa,cAAc;EAE5D,MAAMC,YAAA,GAAe,CAACP,WAAA,EAAaI,aAAA,EAAeC,YAAA,EAAcC,cAAA,CAAe,CAACE,MAAM,CAACC,OAAA,EAASC,MAAM;EAEtG,OAAO;IACLH,YAAA;IACAX,YAAA;IACAC,IAAA;IACAC,aAAA;IACAC,YAAA;IAEAY,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,MAAA,EAAQzB,MAAA;MACR0B,QAAA,EAAUvB,aAAA;MACVS,WAAA,EAAa;MACbI,aAAA,EAAe;MACfC,YAAA,EAAc;MACdC,cAAA,EAAgB;IAClB;IAEAM,IAAA,EAAMvB,qBAAA,CACJ,OACA;MACE,GAAGI,KAAK;MACRC;IACF,GACA,uBAAwB,CAAC,OAAO;IAElCmB,MAAA,EAAQ,CAACjB,YAAA,GACLN,gBAAA,CAAiBG,KAAA,CAAMoB,MAAM,EAAE;MAC7BZ,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZP,IAAA;QACAoB,KAAA,EAAOtB,KAAA,CAAMqB,QAAQ;QACrBjB,IAAA,EAAMmB,WAAW,CAACnB,IAAA;MACpB;IACF,KACAoB,SAAS;IACbH,QAAA,EAAUlB,YAAA,GACNN,gBAAA,CAAiBG,KAAA,CAAMqB,QAAQ,EAAE;MAC/BZ,YAAA,EAAc;QACZL,IAAA,EAAMqB,aAAa,CAACrB,IAAA;MACtB;IACF,KACAoB,SAAS;IACbjB,WAAA;IACAI,aAAA;IACAC,YAAA;IACAC;EACF;AACF;AAEA,MAAMY,aAAA,GAAgB;EACpB,eAAe;EACfC,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;EACP,eAAe;EACfC,IAAA,EAAM;AACR;AAEA,MAAMN,WAAA,GAAc;EAClB,eAAe;EACfG,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,KAAA,EAAO;EACP,eAAe;EACfC,IAAA,EAAM;AACR"}

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

@@ -0,0 +1,219 @@
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const personaClassNames = {
+  root: 'fui-Persona',
+  avatar: 'fui-Persona__avatar',
+  presence: 'fui-Persona__presence',
+  primaryText: 'fui-Persona__primaryText',
+  secondaryText: 'fui-Persona__secondaryText',
+  tertiaryText: 'fui-Persona__tertiaryText',
+  quaternaryText: 'fui-Persona__quaternaryText'
+};
+const avatarSpacing = `--fui-Persona__avatar--spacing`;
+const useRootClassName = /*#__PURE__*/__resetStyles("rlroi9i", null, [".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"]);
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  beforeAfterCenter: {
+    wkccdc: "f1iantul"
+  },
+  after: {},
+  before: {
+    B7hvi0a: "f1tll2w5",
+    Budl1dq: "ffvkwdr"
+  },
+  below: {
+    Bxotwcr: "f1nkeedh",
+    B7hvi0a: "f1oiokrs",
+    Budl1dq: "f1emgwh2"
+  },
+  media: {
+    Ijaq50: "f1hek2iy"
+  },
+  mediaBeforeAfterCenter: {
+    Ijaq50: "fa4dipu"
+  },
+  start: {
+    qb2dma: "f9h729m"
+  },
+  center: {
+    qb2dma: "f7nlbp4"
+  },
+  afterAlignToPrimary: {
+    qb2dma: "f7nlbp4",
+    Ijaq50: "f1rnkkuc",
+    Bw0ie65: "f1warjpf"
+  },
+  beforeAlignToPrimary: {
+    qb2dma: "f7nlbp4",
+    Ijaq50: "f1rnkkuc",
+    Br312pm: "fwu52yu"
+  },
+  secondLineSpacing: {
+    B6of3ja: "f1ryq6si"
+  },
+  primary: {
+    Ijaq50: "f1q3ipgb"
+  },
+  secondary: {
+    Ijaq50: "f3drtdk"
+  },
+  tertiary: {
+    Ijaq50: "fa1o6s1"
+  },
+  quaternary: {
+    Ijaq50: "f1tuwaia"
+  }
+}, {
+  d: [".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1nkeedh{grid-auto-flow:unset;}", ".f1oiokrs{justify-items:center;}", ".f1emgwh2{grid-template-columns:unset;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".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;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
+});
+const useAvatarSpacingStyles = /*#__PURE__*/__styles({
+  "extra-small": {
+    Bs1gm4r: "f1e48tse"
+  },
+  small: {
+    Bs1gm4r: "f18q9vkd"
+  },
+  medium: {
+    Bs1gm4r: "f18q9vkd"
+  },
+  large: {
+    Bs1gm4r: "fx34bi6"
+  },
+  "extra-large": {
+    Bs1gm4r: "fx34bi6"
+  },
+  huge: {
+    Bs1gm4r: "f1o96qtm"
+  },
+  after: {
+    t21cq0: ["f103ycu4", "f1tao51"]
+  },
+  below: {
+    jrapky: "fbo7acy"
+  },
+  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);}"]
+});
+const usePresenceSpacingStyles = /*#__PURE__*/__styles({
+  small: {
+    Bs1gm4r: "f1e48tse"
+  }
+}, {
+  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,
+    size,
+    textAlignment,
+    textPosition
+  } = state;
+  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
+  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
+  const {
+    primaryTextClassName,
+    optionalTextClassName
+  } = useTextClassNames(state, alignToPrimary);
+  const rootClassName = useRootClassName();
+  const styles = useStyles();
+  const avatarSpacingStyles = useAvatarSpacingStyles();
+  const presenceSpacingStyles = {
+    ...avatarSpacingStyles,
+    ...usePresenceSpacingStyles()
+  };
+  state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
+  if (state.avatar) {
+    state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
+  }
+  if (state.presence) {
+    state.presence.className = mergeClasses(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
+  }
+  if (state.primaryText) {
+    state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
+  }
+  if (state.secondaryText) {
+    state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
+  }
+  if (state.tertiaryText) {
+    state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
+  }
+  if (state.quaternaryText) {
+    state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
+  }
+  return state;
+};
+const usePrimaryTextBaseClassName = /*#__PURE__*/__resetStyles("rvj41k9", null, [".rvj41k9{display:block;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+const useOptionalTextBaseClassName = /*#__PURE__*/__resetStyles("rp1pf9e", null, [".rp1pf9e{display:block;color:var(--colorNeutralForeground2);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
+const useTextStyles = /*#__PURE__*/__styles({
+  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: [".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,
+    size,
+    textPosition
+  } = state;
+  const primaryTextBaseClassName = usePrimaryTextBaseClassName();
+  const optionalTextBaseClassName = useOptionalTextBaseClassName();
+  const textStyles = useTextStyles();
+  let primaryTextSize;
+  let alignToPrimaryClassName;
+  if (presenceOnly) {
+    if (size === 'extra-small') {
+      primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
+    } else if (size === 'extra-large' || size === 'huge') {
+      primaryTextSize = textStyles.subtitle2;
+    }
+    if (alignToPrimary) {
+      if (textPosition === 'before') {
+        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
+      } else if (textPosition === 'after') {
+        alignToPrimaryClassName = textStyles.afterAlignToPrimary;
+      }
+    }
+  } else {
+    if (size === 'huge') {
+      primaryTextSize = textStyles.subtitle2;
+    } else if (size === 'extra-large') {
+      primaryTextSize = textStyles.subtitle2;
+    }
+  }
+  return {
+    primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
+    optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
+  };
+};
+//# sourceMappingURL=usePersonaStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","useStyles","beforeAfterCenter","wkccdc","after","before","B7hvi0a","Budl1dq","below","Bxotwcr","media","Ijaq50","mediaBeforeAfterCenter","start","qb2dma","center","afterAlignToPrimary","Bw0ie65","beforeAlignToPrimary","Br312pm","secondLineSpacing","B6of3ja","primary","secondary","tertiary","quaternary","d","useAvatarSpacingStyles","Bs1gm4r","small","medium","large","huge","t21cq0","jrapky","Frg6f3","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","body1","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","caption1","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"sources":["../../../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n  root: 'fui-Persona',\n  avatar: 'fui-Persona__avatar',\n  presence: 'fui-Persona__presence',\n  primaryText: 'fui-Persona__primaryText',\n  secondaryText: 'fui-Persona__secondaryText',\n  tertiaryText: 'fui-Persona__tertiaryText',\n  quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  gridAutoRows: 'max-content',\n  gridAutoFlow: 'column',\n  justifyItems: 'start',\n  gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    // Intentionally empty\n  },\n  before: {\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    gridAutoFlow: 'unset',\n    justifyItems: 'center',\n    gridTemplateColumns: 'unset',\n  },\n\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const rootClassName = useRootClassName();\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    rootClassName,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n  display: 'block',\n  color: tokens.colorNeutralForeground1,\n  ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n  display: 'block',\n  color: tokens.colorNeutralForeground2,\n  ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\n  beforeAlignToPrimary: {\n    gridColumnEnd: 'middle',\n  },\n  afterAlignToPrimary: {\n    gridColumnStart: 'middle',\n  },\n\n  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n  alignToPrimary: boolean,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { presenceOnly, size, textPosition } = state;\n  const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n  const optionalTextBaseClassName = useOptionalTextBaseClassName();\n  const textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    }\n\n    if (alignToPrimary) {\n      if (textPosition === 'before') {\n        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n      } else if (textPosition === 'after') {\n        alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n      }\n    }\n  } else {\n    if (size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else if (size === 'extra-large') {\n      primaryTextSize = textStyles.subtitle2;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n    optionalTextClassName: mergeClasses(\n      optionalTextBaseClassName,\n      !presenceOnly && size === 'huge' && textStyles.body1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"],"mappings":"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"}

package/lib/index.js

@@ -0,0 +1,2 @@
+export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable } from './Persona';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"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"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "0.0.0-nightly-20230502-0418.1",
+  "version": "0.0.0-nightly-20230504-0417.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,17 +27,17 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230504-0417.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-badge": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/react-avatar": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-badge": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230504-0417.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

package/.swcrc

@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}