@fluentui/react-persona 9.2.3 → 9.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.2.3",
+  "version": "9.2.5",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,23 +22,23 @@
     "type-check": "tsc -b tsconfig.json",
     "storybook": "start-storybook",
     "start": "yarn storybook",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.4.3",
-    "@fluentui/react-badge": "^9.1.3",
-    "@fluentui/react-shared-contexts": "^9.3.1",
-    "@fluentui/react-theme": "^9.1.6",
-    "@fluentui/react-utilities": "^9.7.0",
+    "@fluentui/react-avatar": "^9.4.5",
+    "@fluentui/react-badge": "^9.1.5",
+    "@fluentui/react-shared-contexts": "^9.3.2",
+    "@fluentui/react-theme": "^9.1.7",
+    "@fluentui/react-utilities": "^9.7.2",
     "@griffel/react": "^1.5.2",
-    "tslib": "^2.1.0"
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -55,6 +55,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },

package/lib-amd/Persona.js

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,18 +0,0 @@
-define(["require", "exports", "react", "./renderPersona", "./usePersona", "./usePersonaStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, renderPersona_1, usePersona_1, usePersonaStyles_1, react_shared_contexts_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);
-        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().usePersonaStyles_unstable;
-        useCustomStyles(state);
-        return renderPersona_1.renderPersona_unstable(state);
-    });
-    exports.Persona.displayName = 'Persona';
-});
-//# sourceMappingURL=Persona.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Persona.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/Persona.tsx"],"names":[],"mappings":";;;;IAQA;;;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;QAEzB,IAA2B,eAAe,GAAK,oDAA4B,EAAE,0BAAnC,CAAoC;QACtF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,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';\nimport { useCustomStyleHooks_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  const { usePersonaStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"]}

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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,24 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,84 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,191 +0,0 @@
-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";
-    var useRootClassName = react_1.makeResetStyles({
-        display: 'inline-grid',
-        gridAutoRows: 'max-content',
-        gridAutoFlow: 'column',
-        justifyItems: 'start',
-        gridTemplateColumns: 'max-content [middle] auto',
-    });
-    /**
-     * Styles for the root slot
-     */
-    var useStyles = react_1.makeStyles({
-        beforeAfterCenter: {
-            // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines
-            gridTemplateRows: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',
-        },
-        after: {
-        // Intentionally empty
-        },
-        before: {
-            justifyItems: 'end',
-            gridTemplateColumns: 'auto [middle] max-content',
-        },
-        below: {
-            gridAutoFlow: 'unset',
-            justifyItems: 'center',
-            gridTemplateColumns: 'unset',
-        },
-        media: {
-            gridRowStart: 'span 5',
-        },
-        mediaBeforeAfterCenter: {
-            gridRowStart: 'span 6',
-        },
-        start: {
-            alignSelf: 'start',
-        },
-        center: {
-            alignSelf: 'center',
-        },
-        afterAlignToPrimary: {
-            alignSelf: 'center',
-            gridRowStart: 'unset',
-            gridColumnEnd: 'middle',
-        },
-        beforeAlignToPrimary: {
-            alignSelf: 'center',
-            gridRowStart: 'unset',
-            gridColumnStart: 'middle',
-        },
-        secondLineSpacing: {
-            marginTop: '-2px',
-        },
-        primary: { gridRowStart: 'primary' },
-        secondary: { gridRowStart: 'secondary' },
-        tertiary: { gridRowStart: 'tertiary' },
-        quaternary: { gridRowStart: 'quaternary' },
-    });
-    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 alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
-        var _a = useTextClassNames(state, alignToPrimary), primaryTextClassName = _a.primaryTextClassName, optionalTextClassName = _a.optionalTextClassName;
-        var rootClassName = useRootClassName();
-        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, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
-        if (state.avatar) {
-            state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
-        }
-        if (state.presence) {
-            state.presence.className = react_1.mergeClasses(exports.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 = react_1.mergeClasses(exports.personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
-        }
-        if (state.secondaryText) {
-            state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
-        }
-        if (state.tertiaryText) {
-            state.tertiaryText.className = react_1.mergeClasses(exports.personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
-        }
-        if (state.quaternaryText) {
-            state.quaternaryText.className = react_1.mergeClasses(exports.personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
-        }
-        return state;
-    };
-    exports.usePersonaStyles_unstable = usePersonaStyles_unstable;
-    var usePrimaryTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ display: 'block', color: react_theme_1.tokens.colorNeutralForeground1 }, react_theme_1.typographyStyles.body1));
-    var useOptionalTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ display: 'block', color: react_theme_1.tokens.colorNeutralForeground2 }, react_theme_1.typographyStyles.caption1));
-    var useTextStyles = react_1.makeStyles({
-        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 primaryTextBaseClassName = usePrimaryTextBaseClassName();
-        var optionalTextBaseClassName = useOptionalTextBaseClassName();
-        var textStyles = useTextStyles();
-        var primaryTextSize;
-        var 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: react_1.mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
-            optionalTextClassName: react_1.mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName),
-        };
-    };
-});
-//# sourceMappingURL=usePersonaStyles.js.map

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

@@ -1 +0,0 @@
-{"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 { 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"]}

package/lib-amd/index.js

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}