feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-persona/lib-commonjs/components/Persona/usePersona.js

@@ -0,0 +1,117 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    usePersonaBase_unstable: function() {
+        return usePersonaBase_unstable;
+    },
+    usePersona_unstable: function() {
+        return usePersona_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactavatar = require("@fluentui/react-avatar");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactbadge = require("@fluentui/react-badge");
+const usePersona_unstable = (props, ref)=>{
+    const { avatar, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after', presence, ...baseProps } = props;
+    const state = usePersonaBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        presenceOnly,
+        size,
+        textAlignment,
+        textPosition,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            avatar: _reactavatar.Avatar,
+            presence: _reactbadge.PresenceBadge
+        },
+        avatar: !presenceOnly ? _reactutilities.slot.optional(avatar, {
+            renderByDefault: true,
+            defaultProps: {
+                name: props.name,
+                badge: presence,
+                size: avatarSizes[size]
+            },
+            elementType: _reactavatar.Avatar
+        }) : undefined,
+        presence: presenceOnly ? _reactutilities.slot.optional(presence, {
+            defaultProps: {
+                size: presenceSizes[size]
+            },
+            elementType: _reactbadge.PresenceBadge
+        }) : undefined
+    };
+};
+const usePersonaBase_unstable = (props, ref)=>{
+    const { name, primaryText: primaryTextProp, secondaryText: secondaryTextProp, tertiaryText: tertiaryTextProp, quaternaryText: quaternaryTextProp, ...rest } = props;
+    const primaryText = _reactutilities.slot.optional(primaryTextProp, {
+        renderByDefault: true,
+        defaultProps: {
+            children: name
+        },
+        elementType: 'span'
+    });
+    const secondaryText = _reactutilities.slot.optional(secondaryTextProp, {
+        elementType: 'span'
+    });
+    const tertiaryText = _reactutilities.slot.optional(tertiaryTextProp, {
+        elementType: 'span'
+    });
+    const quaternaryText = _reactutilities.slot.optional(quaternaryTextProp, {
+        elementType: 'span'
+    });
+    const numTextLines = [
+        primaryText,
+        secondaryText,
+        tertiaryText,
+        quaternaryText
+    ].filter(Boolean).length;
+    return {
+        numTextLines,
+        components: {
+            root: 'div',
+            primaryText: 'span',
+            secondaryText: 'span',
+            tertiaryText: 'span',
+            quaternaryText: 'span'
+        },
+        root: _reactutilities.slot.always({
+            ref: ref,
+            ...rest
+        }, {
+            elementType: 'div'
+        }),
+        primaryText,
+        secondaryText,
+        tertiaryText,
+        quaternaryText
+    };
+};
+const presenceSizes = {
+    'extra-small': 'tiny',
+    small: 'extra-small',
+    medium: 'small',
+    large: 'medium',
+    'extra-large': 'large',
+    huge: 'large'
+};
+const avatarSizes = {
+    'extra-small': 20,
+    small: 28,
+    medium: 32,
+    large: 36,
+    'extra-large': 40,
+    huge: 56
+};