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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-persona/src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW","names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-persona/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"]}

package/lib-amd/Persona.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Persona/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Persona.js.map

package/lib-amd/Persona.js.map

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

package/lib-amd/components/Persona/Persona.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./renderPersona", "./usePersona", "./usePersonaStyles"], function (require, exports, React, renderPersona_1, usePersona_1, usePersonaStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Persona = void 0;
+    /**
+     * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
+     * or an Avatar with a PresenceBadge.
+     */
+    exports.Persona = React.forwardRef(function (props, ref) {
+        var state = usePersona_1.usePersona_unstable(props, ref);
+        usePersonaStyles_1.usePersonaStyles_unstable(state);
+        return renderPersona_1.renderPersona_unstable(state);
+    });
+    exports.Persona.displayName = 'Persona';
+});
+//# sourceMappingURL=Persona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Persona.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/Persona.tsx"],"names":[],"mappings":";;;;IAOA;;;OAGG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE9C,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","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-amd/components/Persona/Persona.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Persona.types.js.map

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

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

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Persona", "./Persona.types", "./renderPersona", "./usePersona", "./usePersonaStyles"], function (require, exports, tslib_1, Persona_1, Persona_types_1, renderPersona_1, usePersona_1, usePersonaStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Persona_1, exports);
+    tslib_1.__exportStar(Persona_types_1, exports);
+    tslib_1.__exportStar(renderPersona_1, exports);
+    tslib_1.__exportStar(usePersona_1, exports);
+    tslib_1.__exportStar(usePersonaStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"]}

package/lib-amd/components/Persona/renderPersona.js

@@ -0,0 +1,24 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderPersona_unstable = void 0;
+    /**
+     * Render the final JSX of Persona
+     */
+    var renderPersona_unstable = function (state) {
+        var presenceOnly = state.presenceOnly, textPosition = state.textPosition;
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        var coin = presenceOnly
+            ? slots.presence && React.createElement(slots.presence, tslib_1.__assign({}, slotProps.presence))
+            : slots.avatar && React.createElement(slots.avatar, tslib_1.__assign({}, slotProps.avatar));
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            (textPosition === 'after' || textPosition === 'below') && coin,
+            slots.primaryText && React.createElement(slots.primaryText, tslib_1.__assign({}, slotProps.primaryText)),
+            slots.secondaryText && React.createElement(slots.secondaryText, tslib_1.__assign({}, slotProps.secondaryText)),
+            slots.tertiaryText && React.createElement(slots.tertiaryText, tslib_1.__assign({}, slotProps.tertiaryText)),
+            slots.quaternaryText && React.createElement(slots.quaternaryText, tslib_1.__assign({}, slotProps.quaternaryText)),
+            textPosition === 'before' && coin));
+    };
+    exports.renderPersona_unstable = renderPersona_unstable;
+});
+//# sourceMappingURL=renderPersona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderPersona.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/renderPersona.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB;QAChD,IAAA,YAAY,GAAmB,KAAK,aAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QACvC,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,IAAM,IAAI,GAAG,YAAY;YACvB,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI;YAC9D,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI,CAAC;QAE3D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,CAAC,YAAY,KAAK,OAAO,IAAI,YAAY,KAAK,OAAO,CAAC,IAAI,IAAI;YAC9D,KAAK,CAAC,WAAW,IAAI,oBAAC,KAAK,CAAC,WAAW,uBAAK,SAAS,CAAC,WAAW,EAAI;YACrE,KAAK,CAAC,aAAa,IAAI,oBAAC,KAAK,CAAC,aAAa,uBAAK,SAAS,CAAC,aAAa,EAAI;YAC3E,KAAK,CAAC,YAAY,IAAI,oBAAC,KAAK,CAAC,YAAY,uBAAK,SAAS,CAAC,YAAY,EAAI;YACxE,KAAK,CAAC,cAAc,IAAI,oBAAC,KAAK,CAAC,cAAc,uBAAK,SAAS,CAAC,cAAc,EAAI;YAC9E,YAAY,KAAK,QAAQ,IAAI,IAAI,CACvB,CACd,CAAC;IACJ,CAAC,CAAC;IAlBW,QAAA,sBAAsB,0BAkBjC","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-amd/components/Persona/usePersona.js

@@ -0,0 +1,84 @@
+define(["require", "exports", "tslib", "@fluentui/react-avatar", "@fluentui/react-utilities", "@fluentui/react-badge"], function (require, exports, tslib_1, react_avatar_1, react_utilities_1, react_badge_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.usePersona_unstable = void 0;
+    /**
+     * 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
+     */
+    var usePersona_unstable = function (props, ref) {
+        var name = props.name, _a = props.presenceOnly, presenceOnly = _a === void 0 ? false : _a, _b = props.size, size = _b === void 0 ? 'medium' : _b, _c = props.textAlignment, textAlignment = _c === void 0 ? 'start' : _c, _d = props.textPosition, textPosition = _d === void 0 ? 'after' : _d;
+        var primaryText = react_utilities_1.resolveShorthand(props.primaryText, {
+            required: true,
+            defaultProps: {
+                children: name,
+            },
+        });
+        var secondaryText = react_utilities_1.resolveShorthand(props.secondaryText);
+        var tertiaryText = react_utilities_1.resolveShorthand(props.tertiaryText);
+        var quaternaryText = react_utilities_1.resolveShorthand(props.quaternaryText);
+        var numTextLines = [primaryText, secondaryText, tertiaryText, quaternaryText].filter(Boolean).length;
+        return {
+            numTextLines: numTextLines,
+            presenceOnly: presenceOnly,
+            size: size,
+            textAlignment: textAlignment,
+            textPosition: textPosition,
+            components: {
+                root: 'div',
+                avatar: react_avatar_1.Avatar,
+                presence: react_badge_1.PresenceBadge,
+                primaryText: 'span',
+                secondaryText: 'span',
+                tertiaryText: 'span',
+                quaternaryText: 'span',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref }), 
+            /* excludedPropNames */ ['name']),
+            avatar: !presenceOnly
+                ? react_utilities_1.resolveShorthand(props.avatar, {
+                    required: true,
+                    defaultProps: {
+                        name: name,
+                        badge: props.presence,
+                        size: avatarSizes[size],
+                    },
+                })
+                : undefined,
+            presence: presenceOnly
+                ? react_utilities_1.resolveShorthand(props.presence, {
+                    defaultProps: {
+                        size: presenceSizes[size],
+                    },
+                })
+                : undefined,
+            primaryText: primaryText,
+            secondaryText: secondaryText,
+            tertiaryText: tertiaryText,
+            quaternaryText: quaternaryText,
+        };
+    };
+    exports.usePersona_unstable = usePersona_unstable;
+    var presenceSizes = {
+        'extra-small': 'tiny',
+        small: 'extra-small',
+        medium: 'small',
+        large: 'medium',
+        'extra-large': 'large',
+        huge: 'large',
+    };
+    var avatarSizes = {
+        'extra-small': 20,
+        small: 28,
+        medium: 32,
+        large: 36,
+        'extra-large': 40,
+        huge: 56,
+    };
+});
+//# sourceMappingURL=usePersona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePersona.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersona.ts"],"names":[],"mappings":";;;;IAMA;;;;;;;;OAQG;IACI,IAAM,mBAAmB,GAAG,UAAC,KAAmB,EAAE,GAA2B;QAC1E,IAAA,IAAI,GAA6F,KAAK,KAAlG,EAAE,KAA2F,KAAK,aAA5E,EAApB,YAAY,mBAAG,KAAK,KAAA,EAAE,KAAqE,KAAK,KAA3D,EAAf,IAAI,mBAAG,QAAQ,KAAA,EAAE,KAAoD,KAAK,cAAlC,EAAvB,aAAa,mBAAG,OAAO,KAAA,EAAE,KAA2B,KAAK,aAAV,EAAtB,YAAY,mBAAG,OAAO,KAAA,CAAW;QAE/G,IAAM,WAAW,GAAG,kCAAgB,CAAC,KAAK,CAAC,WAAW,EAAE;YACtD,QAAQ,EAAE,IAAI;YACd,YAAY,EAAE;gBACZ,QAAQ,EAAE,IAAI;aACf;SACF,CAAC,CAAC;QACH,IAAM,aAAa,GAAG,kCAAgB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC5D,IAAM,YAAY,GAAG,kCAAgB,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC1D,IAAM,cAAc,GAAG,kCAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QAE9D,IAAM,YAAY,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAEvG,OAAO;YACL,YAAY,cAAA;YACZ,YAAY,cAAA;YACZ,IAAI,MAAA;YACJ,aAAa,eAAA;YACb,YAAY,cAAA;YAEZ,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,qBAAM;gBACd,QAAQ,EAAE,2BAAa;gBACvB,WAAW,EAAE,MAAM;gBACnB,aAAa,EAAE,MAAM;gBACrB,YAAY,EAAE,MAAM;gBACpB,cAAc,EAAE,MAAM;aACvB;YAED,IAAI,EAAE,uCAAqB,CACzB,KAAK,wCAEA,KAAK,KACR,GAAG,KAAA;YAEL,uBAAuB,CAAC,CAAC,MAAM,CAAC,CACjC;YACD,MAAM,EAAE,CAAC,YAAY;gBACnB,CAAC,CAAC,kCAAgB,CAAC,KAAK,CAAC,MAAM,EAAE;oBAC7B,QAAQ,EAAE,IAAI;oBACd,YAAY,EAAE;wBACZ,IAAI,MAAA;wBACJ,KAAK,EAAE,KAAK,CAAC,QAAQ;wBACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;qBACxB;iBACF,CAAC;gBACJ,CAAC,CAAC,SAAS;YACb,QAAQ,EAAE,YAAY;gBACpB,CAAC,CAAC,kCAAgB,CAAC,KAAK,CAAC,QAAQ,EAAE;oBAC/B,YAAY,EAAE;wBACZ,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC;qBAC1B;iBACF,CAAC;gBACJ,CAAC,CAAC,SAAS;YACb,WAAW,aAAA;YACX,aAAa,eAAA;YACb,YAAY,cAAA;YACZ,cAAc,gBAAA;SACf,CAAC;IACJ,CAAC,CAAC;IA9DW,QAAA,mBAAmB,uBA8D9B;IAEF,IAAM,aAAa,GAAG;QACpB,aAAa,EAAE,MAAM;QACrB,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,QAAQ;QACf,aAAa,EAAE,OAAO;QACtB,IAAI,EAAE,OAAO;KACL,CAAC;IAEX,IAAM,WAAW,GAAG;QAClB,aAAa,EAAE,EAAE;QACjB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,aAAa,EAAE,EAAE;QACjB,IAAI,EAAE,EAAE;KACA,CAAC","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-amd/components/Persona/usePersonaStyles.js

@@ -0,0 +1,184 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f, _g;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.usePersonaStyles_unstable = exports.personaClassNames = void 0;
+    exports.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',
+    };
+    var avatarSpacing = "--fui-Persona__avatar--spacing";
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        base: {
+            display: 'inline-grid',
+            gridAutoRows: 'max-content',
+        },
+        after: {
+            gridAutoFlow: 'column',
+            justifyItems: 'start',
+            gridTemplateColumns: 'max-content [middle] auto',
+        },
+        before: {
+            gridAutoFlow: 'column',
+            justifyItems: 'end',
+            gridTemplateColumns: 'auto [middle] max-content',
+        },
+        below: {
+            justifyItems: 'center',
+        },
+        coin: {
+            gridRowStart: 'span 5',
+        },
+        start: {
+            alignSelf: 'start',
+        },
+        center: {
+            alignSelf: 'center',
+        },
+        afterAlignToPrimary: {
+            alignSelf: 'center',
+            gridRowStart: 'unset',
+            gridColumnEnd: 'middle',
+        },
+        beforeAlignToPrimary: {
+            alignSelf: 'center',
+            gridRowStart: 'unset',
+            gridColumnStart: 'middle',
+        },
+    });
+    var useAvatarSpacingStyles = react_1.makeStyles({
+        'extra-small': (_a = {},
+            _a[avatarSpacing] = react_theme_1.tokens.spacingHorizontalSNudge,
+            _a),
+        small: (_b = {},
+            _b[avatarSpacing] = react_theme_1.tokens.spacingHorizontalS,
+            _b),
+        medium: (_c = {},
+            _c[avatarSpacing] = react_theme_1.tokens.spacingHorizontalS,
+            _c),
+        large: (_d = {},
+            _d[avatarSpacing] = react_theme_1.tokens.spacingHorizontalMNudge,
+            _d),
+        'extra-large': (_e = {},
+            _e[avatarSpacing] = react_theme_1.tokens.spacingHorizontalMNudge,
+            _e),
+        huge: (_f = {},
+            _f[avatarSpacing] = react_theme_1.tokens.spacingHorizontalM,
+            _f),
+        after: {
+            marginRight: "var(" + avatarSpacing + ")",
+        },
+        below: {
+            marginBottom: "var(" + avatarSpacing + ")",
+        },
+        before: {
+            marginLeft: "var(" + avatarSpacing + ")",
+        },
+    });
+    var usePresenceSpacingStyles = react_1.makeStyles({
+        small: (_g = {},
+            _g[avatarSpacing] = react_theme_1.tokens.spacingHorizontalSNudge,
+            _g),
+    });
+    /**
+     * Apply styling to the Persona slots based on the state
+     */
+    var usePersonaStyles_unstable = function (state) {
+        var presenceOnly = state.presenceOnly, size = state.size, textAlignment = state.textAlignment, textPosition = state.textPosition;
+        var alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
+        var _a = useTextClassNames(state, alignToPrimary), primaryTextClassName = _a.primaryTextClassName, optionalTextClassName = _a.optionalTextClassName;
+        var styles = useStyles();
+        var avatarSpacingStyles = useAvatarSpacingStyles();
+        var presenceSpacingStyles = tslib_1.__assign(tslib_1.__assign({}, avatarSpacingStyles), usePresenceSpacingStyles());
+        state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], state.root.className);
+        if (state.avatar) {
+            state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
+        }
+        if (state.presence) {
+            state.presence.className = react_1.mergeClasses(exports.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 = react_1.mergeClasses(exports.personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
+        }
+        if (state.secondaryText) {
+            state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
+        }
+        if (state.tertiaryText) {
+            state.tertiaryText.className = react_1.mergeClasses(exports.personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
+        }
+        if (state.quaternaryText) {
+            state.quaternaryText.className = react_1.mergeClasses(exports.personaClassNames.quaternaryText, optionalTextClassName, state.quaternaryText.className);
+        }
+        return state;
+    };
+    exports.usePersonaStyles_unstable = usePersonaStyles_unstable;
+    var useTextStyles = react_1.makeStyles({
+        base: {
+            display: 'block',
+        },
+        primaryText: {
+            color: react_theme_1.tokens.colorNeutralForeground1,
+        },
+        optionalText: {
+            color: react_theme_1.tokens.colorNeutralForeground2,
+        },
+        beforeAlignToPrimary: {
+            gridColumnEnd: 'middle',
+        },
+        afterAlignToPrimary: {
+            gridColumnStart: 'middle',
+        },
+        body1: react_theme_1.typographyStyles.body1,
+        caption1: react_theme_1.typographyStyles.caption1,
+        subtitle2: react_theme_1.typographyStyles.subtitle2,
+    });
+    var useTextClassNames = function (state, alignToPrimary) {
+        var presenceOnly = state.presenceOnly, size = state.size, textPosition = state.textPosition;
+        var textStyles = useTextStyles();
+        var primaryTextSize;
+        var alignToPrimaryClassName;
+        if (presenceOnly) {
+            if (size === 'extra-small') {
+                primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;
+            }
+            else if (size === 'extra-large' || size === 'huge') {
+                primaryTextSize = textStyles.subtitle2;
+            }
+            else {
+                primaryTextSize = textStyles.body1;
+            }
+            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;
+            }
+            else {
+                primaryTextSize = textStyles.body1;
+            }
+        }
+        return {
+            primaryTextClassName: react_1.mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize, alignToPrimaryClassName),
+            optionalTextClassName: react_1.mergeClasses(textStyles.base, textStyles.optionalText, !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1, alignToPrimaryClassName),
+        };
+    };
+});
+//# sourceMappingURL=usePersonaStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePersonaStyles.js","sourceRoot":"","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"]}

package/lib-amd/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "./Persona"], function (require, exports, Persona_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.usePersona_unstable = exports.usePersonaStyles_unstable = exports.renderPersona_unstable = exports.personaClassNames = exports.Persona = void 0;
+    Object.defineProperty(exports, "Persona", { enumerable: true, get: function () { return Persona_1.Persona; } });
+    Object.defineProperty(exports, "personaClassNames", { enumerable: true, get: function () { return Persona_1.personaClassNames; } });
+    Object.defineProperty(exports, "renderPersona_unstable", { enumerable: true, get: function () { return Persona_1.renderPersona_unstable; } });
+    Object.defineProperty(exports, "usePersonaStyles_unstable", { enumerable: true, get: function () { return Persona_1.usePersonaStyles_unstable; } });
+    Object.defineProperty(exports, "usePersona_unstable", { enumerable: true, get: function () { return Persona_1.usePersona_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-persona/src/index.ts"],"names":[],"mappings":";;;;IACE,kGAAA,OAAO,OAAA;IACP,4GAAA,iBAAiB,OAAA;IACjB,iHAAA,sBAAsB,OAAA;IACtB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","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"]}

package/lib-commonjs/Persona.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Persona/index"), exports);
 //# sourceMappingURL=Persona.js.map

package/lib-commonjs/Persona.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-persona/src/Persona.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Persona/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/Persona.ts"],"sourcesContent":["export * from './components/Persona/index';\n"]}

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

@@ -4,20 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Persona = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const renderPersona_1 = /*#__PURE__*/require("./renderPersona");
-
 const usePersona_1 = /*#__PURE__*/require("./usePersona");
-
 const usePersonaStyles_1 = /*#__PURE__*/require("./usePersonaStyles");
 /**
  * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
  * or an Avatar with a PresenceBadge.
  */
-
-
 exports.Persona = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = usePersona_1.usePersona_unstable(props, ref);
   usePersonaStyles_1.usePersonaStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/Persona.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,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;AACA;AACA;AACA;AAIA;;;;AAIaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE7CG,4CAAyB,CAACF,KAAK,CAAC;EAChC,OAAOG,sCAAsB,CAACH,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFL,eAAO,CAACS,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","usePersona_1","usePersonaStyles_1","renderPersona_1","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-commonjs/components/Persona/Persona.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Persona"), exports);
-
 tslib_1.__exportStar(require("./Persona.types"), exports);
-
 tslib_1.__exportStar(require("./renderPersona"), exports);
-
 tslib_1.__exportStar(require("./usePersona"), exports);
-
 tslib_1.__exportStar(require("./usePersonaStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/index.ts"],"sourcesContent":["export * from './Persona';\nexport * from './Persona.types';\nexport * from './renderPersona';\nexport * from './usePersona';\nexport * from './usePersonaStyles';\n"]}

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

@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderPersona_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Persona
  */
-
-
 const renderPersona_unstable = state => {
   const {
     presenceOnly,
@@ -22,16 +18,22 @@ const renderPersona_unstable = state => {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  const coin = presenceOnly ? slots.presence && React.createElement(slots.presence, { ...slotProps.presence
-  }) : slots.avatar && React.createElement(slots.avatar, { ...slotProps.avatar
+  const coin = presenceOnly ? slots.presence && React.createElement(slots.presence, {
+    ...slotProps.presence
+  }) : slots.avatar && React.createElement(slots.avatar, {
+    ...slotProps.avatar
   });
-  return React.createElement(slots.root, { ...slotProps.root
-  }, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && React.createElement(slots.primaryText, { ...slotProps.primaryText
-  }), slots.secondaryText && React.createElement(slots.secondaryText, { ...slotProps.secondaryText
-  }), slots.tertiaryText && React.createElement(slots.tertiaryText, { ...slotProps.tertiaryText
-  }), slots.quaternaryText && React.createElement(slots.quaternaryText, { ...slotProps.quaternaryText
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, (textPosition === 'after' || textPosition === 'below') && coin, slots.primaryText && React.createElement(slots.primaryText, {
+    ...slotProps.primaryText
+  }), slots.secondaryText && React.createElement(slots.secondaryText, {
+    ...slotProps.secondaryText
+  }), slots.tertiaryText && React.createElement(slots.tertiaryText, {
+    ...slotProps.tertiaryText
+  }), slots.quaternaryText && React.createElement(slots.quaternaryText, {
+    ...slotProps.quaternaryText
   }), textPosition === 'before' && coin);
 };
-
 exports.renderPersona_unstable = renderPersona_unstable;
 //# sourceMappingURL=renderPersona.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/renderPersona.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,YAAF;IAAgB;EAAhB,IAAiC,KAAvC;EACA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,MAAM,IAAI,GAAG,YAAY,GACrB,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADG,GAErB,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFpB;EAIA,OACE,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,IAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFxB,EAGG,KAAK,CAAC,aAAN,IAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAH1B,EAIG,KAAK,CAAC,YAAN,IAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAJzB,EAKG,KAAK,CAAC,cAAN,IAAwB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAL3B,EAMG,YAAY,KAAK,QAAjB,IAA6B,IANhC,CADF;AAUD,CAlBM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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;AACA;AAGA;;;AAGO,MAAMA,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,YAAY;IAAEC;EAAY,CAAE,GAAGF,KAAK;EAC5C,MAAM;IAAEG,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeL,KAAK,CAAC;EAE1D,MAAMM,IAAI,GAAGL,YAAY,GACrBE,KAAK,CAACI,QAAQ,IAAIC,oBAACL,KAAK,CAACI,QAAQ;IAAA,GAAKH,SAAS,CAACG;EAAQ,EAAI,GAC5DJ,KAAK,CAACM,MAAM,IAAID,oBAACL,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI;EAE1D,OACED,oBAACL,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,GAC3B,CAACR,YAAY,KAAK,OAAO,IAAIA,YAAY,KAAK,OAAO,KAAKI,IAAI,EAC9DH,KAAK,CAACQ,WAAW,IAAIH,oBAACL,KAAK,CAACQ,WAAW;IAAA,GAAKP,SAAS,CAACO;EAAW,EAAI,EACrER,KAAK,CAACS,aAAa,IAAIJ,oBAACL,KAAK,CAACS,aAAa;IAAA,GAAKR,SAAS,CAACQ;EAAa,EAAI,EAC3ET,KAAK,CAACU,YAAY,IAAIL,oBAACL,KAAK,CAACU,YAAY;IAAA,GAAKT,SAAS,CAACS;EAAY,EAAI,EACxEV,KAAK,CAACW,cAAc,IAAIN,oBAACL,KAAK,CAACW,cAAc;IAAA,GAAKV,SAAS,CAACU;EAAc,EAAI,EAC9EZ,YAAY,KAAK,QAAQ,IAAII,IAAI,CACvB;AAEjB,CAAC;AAlBYS,8BAAsB","names":["renderPersona_unstable","state","presenceOnly","textPosition","slots","slotProps","react_utilities_1","coin","presence","React","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText","exports"],"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-commonjs/components/Persona/usePersona.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePersona_unstable = void 0;
-
 const react_avatar_1 = /*#__PURE__*/require("@fluentui/react-avatar");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_badge_1 = /*#__PURE__*/require("@fluentui/react-badge");
 /**
  * Create the state required to render Persona.
@@ -19,8 +16,6 @@ const react_badge_1 = /*#__PURE__*/require("@fluentui/react-badge");
  * @param props - props from this instance of Persona
  * @param ref - reference to root HTMLElement of Persona
  */
-
-
 const usePersona_unstable = (props, ref) => {
   const {
     name,
@@ -54,11 +49,10 @@ const usePersona_unstable = (props, ref) => {
       tertiaryText: 'span',
       quaternaryText: 'span'
     },
-    root: react_utilities_1.getNativeElementProps('div', { ...props,
+    root: react_utilities_1.getNativeElementProps('div', {
+      ...props,
       ref
-    },
-    /* excludedPropNames */
-    ['name']),
+    }, /* excludedPropNames */['name']),
     avatar: !presenceOnly ? react_utilities_1.resolveShorthand(props.avatar, {
       required: true,
       defaultProps: {
@@ -78,7 +72,6 @@ const usePersona_unstable = (props, ref) => {
     quaternaryText
   };
 };
-
 exports.usePersona_unstable = usePersona_unstable;
 const presenceSizes = {
   'extra-small': 'tiny',