@fluentui/react-persona 0.0.0-nightly-20221007-1237.1

package/CHANGELOG.json

@@ -0,0 +1,127 @@
+{
+  "name": "@fluentui/react-persona",
+  "entries": [
+    {
+      "date": "Fri, 07 Oct 2022 12:44:22 GMT",
+      "tag": "@fluentui/react-persona_v0.0.0-nightly-20221007-1237.1",
+      "version": "0.0.0-nightly-20221007-1237.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "fluentui-internal@service.microsoft.com",
+            "package": "@fluentui/react-persona",
+            "commit": "not available",
+            "comment": "Release nightly v9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Oct 2022 22:24:38 GMT",
+      "tag": "@fluentui/react-persona_v9.0.0",
+      "version": "9.0.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "86b3133d97c177cac545b253deb11374ee829574",
+            "comment": "docs: Add migration guide."
+          }
+        ],
+        "minor": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "2e8d044a4ce2c1095f13e08716c3ba13069ebf0d",
+            "comment": "feat: Publishing package."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.2.0",
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.7",
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Sep 2022 20:55:45 GMT",
+      "tag": "@fluentui/react-persona_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
+            "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Sep 2022 09:50:08 GMT",
+      "tag": "@fluentui/react-persona_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# Change Log - @fluentui/react-persona
+
+This log was last generated on Fri, 07 Oct 2022 12:44:22 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20221007-1237.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20221007-1237.1)
+
+Fri, 07 Oct 2022 12:44:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.0.0..@fluentui/react-persona_v0.0.0-nightly-20221007-1237.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-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-badge to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.0.0)
+
+Mon, 03 Oct 2022 22:24:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.0.0-alpha.0..@fluentui/react-persona_v9.0.0)
+
+### Minor changes
+
+- feat: Publishing package. ([PR #25008](https://github.com/microsoft/fluentui/pull/25008) by esteban.230@hotmail.com)
+- Bump @fluentui/react-avatar to v9.2.0 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-badge to v9.0.7 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+
+### Patches
+
+- docs: Add migration guide. ([PR #25022](https://github.com/microsoft/fluentui/pull/25022) by esteban.230@hotmail.com)
+
+## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.0.0-alpha.0)
+
+Tue, 20 Sep 2022 20:55:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.0.0-alpha.0..@fluentui/react-persona_v9.0.0-alpha.0)
+
+### Patches
+
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+
+## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.0.0-alpha.0)
+
+Thu, 15 Sep 2022 09:50:08 GMT
+
+### Patches
+
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-persona
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/MIGRATION.md

@@ -0,0 +1,42 @@
+# Badge Migration
+
+## Migration from v8
+
+v8 offers a component equivalent to v9's `Persona`. However, the API is slightly different. The main difference is that v9's `Persona` does not handle the functionality of the `presence` and `avatar`. Instead, the `presence` and `avatar` are separate components that can be used in conjunction with `Persona`.
+
+Here's how the API of v8's `Persona` compares to the one from v9's `Persona` component:
+
+- `className` => `className`
+- `coinProps` => Use `avatar`'s or `presence`'s slot props
+- `componentRef` => NOT SUPPORTED - use `ref` instead
+- `hidePersonaDetails` => Use the `Avatar` component for this case
+- ```
+- `imageShouldFadeIn` => NOT SUPPORTED
+- `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}`
+- `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}`
+- `presenceTitle` => NOT SUPPORTED
+- `showOverflowTooltip` => NOT SUPPORTED
+- `showUnknownPersonaCoin` => NOT SUPPORTED
+- `styles` => Use style customization through `className` instead
+
+## Property Mapping
+
+| v8 `Persona`             | v9 `Persona`                           |
+| ------------------------ | -------------------------------------- |
+| `coinProps`              | `avatar` or `badge` slot props         |
+| `coinSize`               | `size` in the `badge` or `avatar` slot |
+| `className`              | `className`                            |
+| `componentRef`           | `ref`                                  |
+| `hidePersonaDetails`     | -                                      |
+| `imageShouldFadeIn`      | -                                      |
+| `isOutOfOffice`          | `status` in `presence` slot props      |
+| `optionalText`           | `quaternaryText`                       |
+| `presence`               | `presence`                             |
+| `presenceTitle`          | -                                      |
+| `primaryText`            | `primaryText`                          |
+| `secondaryText`          | `secondaryText`                        |
+| `showOverflowTooltip`    | -                                      |
+| `showUnknownPersonaCoin` | -                                      |
+| `styles`                 | `className`                            |
+| `tertiaryText`           | `tertiaryText`                         |
+| `text`                   | `name`                                 |

package/README.md

@@ -0,0 +1,29 @@
+# @fluentui/react-persona
+
+**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';
+```
+
+### Examples
+
+```jsx
+const PersonaExample = () => {
+  return <Persona name="Kevin Sturgis" secondaryText="Software Engineer" />;
+};
+```

package/Spec.md

@@ -0,0 +1,213 @@
+# @fluentui/react-persona Spec
+
+Convergence epic issue: #24213
+
+## Background
+
+A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, or an Avatar with a PresenceBadge. This composite component is not a card, therefore it will not provide a visual board or a popup when the user hovers the Avatar.
+
+Persona is used in PeoplePicker, Team's left rail and menus, chiclets, and Card.
+
+## Prior Art
+
+- OpenUI research: [Avatar/Persona](https://open-ui.org/components/avatar.research)
+- v7/v8: [link](https://developer.microsoft.com/en-us/fluentui#/controls/web/persona)
+  - > Note: v8's Persona is a combination of v9's Persona and Avatar (v8's Persona has a sub-component PersonaCoin that would count as Avatar, but is not exposed.). In v9 we've taken the approach of having a single component Avatar and another component Persona.
+- v0: Does not have equivalent component.
+
+## Anatomy
+
+![Anatomy](./etc/images/anatomy.png)
+
+### Avatar, PresenceBadge, and Avatar + PresenceBadge
+
+v8's Persona has a sub-component `PersonaCoin`, the equivalent in v9 is an Avatar. Currently Avatar is able to display a PresenceBadge, but this behavior will be deprecated in favor of Persona having this behavior.
+
+Persona has a slot for an `Avatar` and `PresenceBadge`, giving the user the ability to display an Avatar, a PresenceBadge, or Combine them into an Avatar with presence.
+
+## Sample Code
+
+![Avatar](./etc/images/avatar.png)
+
+Persona with Avatar:
+
+```jsx
+<Persona name="Kevin Sturgis" secondaryText="Software Engineer" />
+```
+
+![PresenceBadge](./etc/images/badge.png)
+
+Persona with PresenceBadge:
+
+```jsx
+<Persona presenceOnly name="Kevin Sturgis" presence={{ status: 'offline', outOfOffice: true }} />
+```
+
+![Avatar and PresenceBadge](./etc/images/avatar_badge.png)
+
+Persona with Avatar + PresenceBadge:
+
+```jsx
+<Persona
+  name="Kevin Sturgis"
+  secondaryText="Software Engineer"
+  tertiaryText="Offline"
+  presence={{ status: 'offline', outOfOffice: true }}
+/>
+```
+
+## Variants
+
+> I will refer to the avatar and presence as content.
+
+There are three alignment variants:
+
+- after: Content on the left and text on the right.
+- below: Content on top and text on the bottom.
+- before: Content on the right and text on the left.
+
+There are 3 content variants:
+
+- Avatar
+- PresenceBadge
+- Avatar + PresenceBadge
+
+There are 2 sizing variants:
+
+- scaled: When there is no specified size in the props of either `avatar` or `presence`, the content is resized based on the number of text lines used.
+- fixed: When there is a specified size of either `avatar` or `presence`, the text lines are styled based on the size of the content.
+
+## API
+
+**Slots**
+
+- `root`: The root slot for Persona.
+- `avatar`: The Avatar to display and Persona's primary slot.
+- `presence`: The PresenceBadge to display.
+- `primaryText`: First line of text in Persona. By default its content will be the content of the `name` prop. It is highly encouraged to only use the `name` prop and only specify the content of `primaryText` when it is not a name.
+- `secondaryText`: Second line of text in Persona.
+- `tertiaryText`: Third line of text in Persona.
+- `quaternaryText`: Fourth line of text in Persona.
+
+**Types**
+
+```ts
+export type PersonaSlots = {
+  root: NonNullable<Slot<'div'>>;
+
+  /**
+   * Avatar to display.
+   */
+  avatar?: Slot<typeof Avatar>;
+
+  /**
+   * PresenceBadge to display.
+   */
+  presence?: Slot<typeof PresenceBadge>;
+
+  /**
+   * The first line of text in the Persona, larger than the rest of the lines.
+   *
+   * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from
+   * from the `name` prop.
+   */
+  primaryText?: 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'>;
+};
+
+/**
+ * Persona Props
+ */
+export type PersonaProps = Omit<ComponentProps<PersonaSlots>, 'badge'> &
+  Pick<AvatarProps, 'name'> & {
+    /**
+     * Whether to display only the presence.
+     *
+     * @default false
+     */
+    presenceOnly?: boolean;
+
+    /**
+     * Position the text will be rendered in.
+     *
+     * @default after
+     */
+    textPosition?: 'before' | 'after' | 'below';
+  };
+```
+
+## Structure
+
+To avoid the [issue](https://github.com/microsoft/fluentui/issues/23386) v8 has, a css grid will be used instead of a flexbox that requires a general wrapper and a text container wrapper.
+
+- _**Internal**_
+
+```jsx
+const coin = (
+  <>
+    {!presenceOnly && slots.avatar && <slots.avatar {...slotProps.avatar} />}
+    {presenceOnly && slots.presence && <slots.presence {...slotProps.presence} />}
+  </>
+);
+
+return (
+  <slots.root {...slotProps.root}>
+    {(textPosition === 'after' || textPosition === 'below') && coin}
+    {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}
+    {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
+    {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}
+    {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}
+    {textPosition === 'before' && coin}
+  </slots.root>
+);
+```
+
+- _**DOM**_
+
+```html
+<div class="fui-Persona">
+  <div {/* Avatar, PresenceBadge, or Avatar with PresenceBadge */} />
+  <span class="fui-Persona__primaryText">{/* name */}</span>
+  <span class="fui-Persona__secondaryText">Secondary Text</span>
+  <span class="fui-Persona__tertiaryText">Tertiary Text</span>
+  <span class="fui-Persona__quaternaryText">Quaternary Text</span>
+</div>
+```
+
+## Migration
+
+See [MIGRATION.md](./MIGRATION.md) for details.
+
+## Behaviors
+
+_Explain how the component will behave in use, including:_
+
+- _Component States_
+  - There are no states for this component, it's a visual representation.
+- _Interaction_
+  - _Keyboard_
+    - Doesn't receive focus.
+  - _Cursor_
+    - Doesn't interact with cursor.
+  - _Touch_
+    - Doesn't interact with touch.
+  - _Screen readers_
+    - Contents will be read based on dom order.
+
+## Accessibility
+
+- There's no need for `aria-*` or/and`role`. Avatar and Badge already accessible and the text labels won't need anything as well.

package/dist/index.d.ts

@@ -0,0 +1,114 @@
+/// <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 position of the text relative to the avatar/presence.
+     *
+     * @default after
+     */
+    textPosition?: 'before' | 'after' | 'below';
+};
+
+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.
+     *
+     * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from
+     * from the `name` prop.
+     */
+    primaryText?: 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, 'textPosition' | 'presenceOnly'>> & {
+    /**
+     * Whether the sizing type is fixed or not.
+     */
+    fixed: boolean;
+    /**
+     * 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,"file":"Persona.js","sourceRoot":"","sources":["../src/Persona.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Persona/index';\n"]}

package/lib/components/Persona/Persona.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../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":""}

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

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';
+//# sourceMappingURL=index.js.map

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

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