first commit

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/PersonaCoin.base.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { IPersonaCoinProps } from '../Persona.types';
+/**
+ * PersonaCoin with no default styles.
+ * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export declare const PersonaCoinBase: React.FunctionComponent<IPersonaCoinProps>;

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/PersonaCoin.base.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PersonaCoinBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var Utilities_1 = require("../../../Utilities");
+var Styling_1 = require("../../../Styling");
+var index_1 = require("../PersonaPresence/index");
+var Icon_1 = require("../../../Icon");
+var Image_1 = require("../../../Image");
+var Persona_types_1 = require("../Persona.types");
+var PersonaInitialsColor_1 = require("../PersonaInitialsColor");
+var PersonaConsts_1 = require("../PersonaConsts");
+var react_hooks_1 = require("@fluentui/react-hooks");
+var getClassNames = (0, Utilities_1.classNamesFunction)({
+    // There can be many PersonaCoin rendered with different sizes.
+    // Therefore setting a larger cache size.
+    cacheSize: 100,
+});
+var getInitialsStyles = (0, Utilities_1.memoizeFunction)(function (className, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin) {
+    return (0, Styling_1.mergeStyles)(className, !showUnknownPersonaCoin && {
+        backgroundColor: (0, PersonaInitialsColor_1.getPersonaInitialsColor)({ text: text, initialsColor: initialsColor, primaryText: primaryText }),
+        color: initialsTextColor,
+    });
+});
+var DEFAULT_PROPS = {
+    size: Persona_types_1.PersonaSize.size48,
+    presence: Persona_types_1.PersonaPresence.none,
+    imageAlt: '',
+};
+function useDebugWarnings(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional
+        (0, react_hooks_1.useWarnings)({
+            name: 'PersonaCoin',
+            props: props,
+            deprecations: { primaryText: 'text' },
+        });
+    }
+}
+function useImageLoadState(_a) {
+    var onPhotoLoadingStateChange = _a.onPhotoLoadingStateChange, imageUrl = _a.imageUrl;
+    var _b = React.useState(Image_1.ImageLoadState.notLoaded), imageLoadState = _b[0], setImageLoadstate = _b[1];
+    React.useEffect(function () {
+        setImageLoadstate(Image_1.ImageLoadState.notLoaded);
+    }, [imageUrl]);
+    var onLoadingStateChange = function (loadState) {
+        setImageLoadstate(loadState);
+        onPhotoLoadingStateChange === null || onPhotoLoadingStateChange === void 0 ? void 0 : onPhotoLoadingStateChange(loadState);
+    };
+    return [imageLoadState, onLoadingStateChange];
+}
+/**
+ * PersonaCoin with no default styles.
+ * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+exports.PersonaCoinBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {
+    var props = (0, Utilities_1.getPropsWithDefaults)(DEFAULT_PROPS, propsWithoutDefaults);
+    useDebugWarnings(props);
+    var _a = useImageLoadState(props), imageLoadState = _a[0], onLoadingStateChange = _a[1];
+    var renderCoin = getCoinRenderer(onLoadingStateChange);
+    var className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    _b = props.onRenderCoin, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    onRenderCoin = _b === void 0 ? renderCoin : _b, _c = props.onRenderPersonaCoin, onRenderPersonaCoin = _c === void 0 ? onRenderCoin : _c, _d = props.onRenderInitials, onRenderInitials = _d === void 0 ? renderPersonaCoinInitials : _d, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    primaryText = props.primaryText, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, text = props.text, theme = props.theme, size = props.size;
+    var divProps = (0, Utilities_1.getNativeProps)(props, Utilities_1.divProperties);
+    var divCoinProps = (0, Utilities_1.getNativeProps)(coinProps || {}, Utilities_1.divProperties);
+    var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
+    var hideImage = showUnknownPersonaCoin;
+    var personaPresenceProps = {
+        coinSize: coinSize,
+        isOutOfOffice: isOutOfOffice,
+        presence: presence,
+        presenceTitle: presenceTitle,
+        presenceColors: presenceColors,
+        size: size,
+        theme: theme,
+    };
+    // Use getStyles from props, or fall back to getStyles from styles file.
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        className: coinProps && coinProps.className ? coinProps.className : className,
+        size: size,
+        coinSize: coinSize,
+        showUnknownPersonaCoin: showUnknownPersonaCoin,
+    });
+    var shouldRenderInitials = Boolean(imageLoadState !== Image_1.ImageLoadState.loaded &&
+        ((showInitialsUntilImageLoads && imageUrl) || !imageUrl || imageLoadState === Image_1.ImageLoadState.error || hideImage));
+    return (React.createElement("div", tslib_1.__assign({ role: "presentation" }, divProps, { className: classNames.coin, ref: forwardedRef }),
+        // Render PersonaCoin if size is not size8. size10 and tiny need to removed after a deprecation cleanup.
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        size !== Persona_types_1.PersonaSize.size8 && size !== Persona_types_1.PersonaSize.size10 && size !== Persona_types_1.PersonaSize.tiny ? (React.createElement("div", tslib_1.__assign({ role: "presentation" }, divCoinProps, { className: classNames.imageArea, style: coinSizeStyle }),
+            shouldRenderInitials && (React.createElement("div", { className: getInitialsStyles(classNames.initials, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin), style: coinSizeStyle, "aria-hidden": "true" }, onRenderInitials(props, renderPersonaCoinInitials))),
+            !hideImage && onRenderPersonaCoin(props, renderCoin),
+            React.createElement(index_1.PersonaPresence, tslib_1.__assign({}, personaPresenceProps)))) : // Otherwise, render just PersonaPresence.
+            props.presence ? (React.createElement(index_1.PersonaPresence, tslib_1.__assign({}, personaPresenceProps))) : (
+            // Just render Contact Icon if there isn't a Presence prop.
+            React.createElement(Icon_1.Icon, { iconName: "Contact", className: classNames.size10WithoutPresenceIcon })),
+        props.children));
+});
+exports.PersonaCoinBase.displayName = 'PersonaCoinBase';
+var getCoinRenderer = function (onLoadingStateChange) {
+    return function (_a) {
+        var coinSize = _a.coinSize, styles = _a.styles, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, imageShouldFadeIn = _a.imageShouldFadeIn, imageShouldStartVisible = _a.imageShouldStartVisible, theme = _a.theme, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, _b = _a.size, size = _b === void 0 ? DEFAULT_PROPS.size : _b;
+        // Render the Image component only if an image URL is provided
+        if (!imageUrl) {
+            return null;
+        }
+        var classNames = getClassNames(styles, {
+            theme: theme,
+            size: size,
+            showUnknownPersonaCoin: showUnknownPersonaCoin,
+        });
+        var dimension = coinSize || PersonaConsts_1.sizeToPixels[size];
+        return (React.createElement(Image_1.Image, { className: classNames.image, imageFit: Image_1.ImageFit.cover, src: imageUrl, width: dimension, height: dimension, alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: onLoadingStateChange }));
+    };
+};
+var renderPersonaCoinInitials = function (_a) {
+    var imageInitials = _a.imageInitials, allowPhoneInitials = _a.allowPhoneInitials, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, text = _a.text, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    primaryText = _a.primaryText, theme = _a.theme;
+    if (showUnknownPersonaCoin) {
+        return React.createElement(Icon_1.Icon, { iconName: "Help" });
+    }
+    var isRTL = (0, Utilities_1.getRTL)(theme);
+    imageInitials = imageInitials || (0, Utilities_1.getInitials)(text || primaryText || '', isRTL, allowPhoneInitials);
+    return imageInitials !== '' ? React.createElement("span", null, imageInitials) : React.createElement(Icon_1.Icon, { iconName: "Contact" });
+};
+//# sourceMappingURL=PersonaCoin.base.js.map

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/PersonaCoin.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IPersonaCoinProps } from '../Persona.types';
+/**
+ * PersonaCoin is used to render an individual's avatar and presence.
+ */
+export declare const PersonaCoin: React.FunctionComponent<IPersonaCoinProps>;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PersonaCoin = void 0;
+var Utilities_1 = require("../../../Utilities");
+var PersonaCoin_base_1 = require("./PersonaCoin.base");
+var PersonaCoin_styles_1 = require("./PersonaCoin.styles");
+/**
+ * PersonaCoin is used to render an individual's avatar and presence.
+ */
+exports.PersonaCoin = (0, Utilities_1.styled)(PersonaCoin_base_1.PersonaCoinBase, PersonaCoin_styles_1.getStyles, undefined, {
+    scope: 'PersonaCoin',
+});
+//# sourceMappingURL=PersonaCoin.js.map

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/PersonaCoin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaCoin.js","sourceRoot":"../src/","sources":["components/Persona/PersonaCoin/PersonaCoin.tsx"],"names":[],"mappings":";;;AACA,gDAA4C;AAC5C,uDAAqD;AACrD,2DAAiD;AAGjD;;GAEG;AACU,QAAA,WAAW,GAA+C,IAAA,kBAAM,EAI3E,kCAAe,EAAE,8BAAS,EAAE,SAAS,EAAE;IACvC,KAAK,EAAE,aAAa;CACrB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { PersonaCoinBase } from './PersonaCoin.base';\nimport { getStyles } from './PersonaCoin.styles';\nimport type { IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types';\n\n/**\n * PersonaCoin is used to render an individual's avatar and presence.\n */\nexport const PersonaCoin: React.FunctionComponent<IPersonaCoinProps> = styled<\n  IPersonaCoinProps,\n  IPersonaCoinStyleProps,\n  IPersonaCoinStyles\n>(PersonaCoinBase, getStyles, undefined, {\n  scope: 'PersonaCoin',\n});\n"]}

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/PersonaCoin.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types';
+export declare const getStyles: (props: IPersonaCoinStyleProps) => IPersonaCoinStyles;

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/PersonaCoin.styles.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var Styling_1 = require("../../../Styling");
+var PersonaConsts_1 = require("../PersonaConsts");
+var GlobalClassNames = {
+    coin: 'ms-Persona-coin',
+    imageArea: 'ms-Persona-imageArea',
+    image: 'ms-Persona-image',
+    initials: 'ms-Persona-initials',
+    size8: 'ms-Persona--size8',
+    size10: 'ms-Persona--size10',
+    size16: 'ms-Persona--size16',
+    size24: 'ms-Persona--size24',
+    size28: 'ms-Persona--size28',
+    size32: 'ms-Persona--size32',
+    size40: 'ms-Persona--size40',
+    size48: 'ms-Persona--size48',
+    size56: 'ms-Persona--size56',
+    size72: 'ms-Persona--size72',
+    size100: 'ms-Persona--size100',
+    size120: 'ms-Persona--size120',
+};
+var getStyles = function (props) {
+    var _a;
+    var className = props.className, theme = props.theme, coinSize = props.coinSize;
+    var palette = theme.palette, fonts = theme.fonts;
+    var size = (0, PersonaConsts_1.sizeBoolean)(props.size);
+    var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
+    // Static colors used when displaying 'unknown persona' coin
+    var unknownPersonaBackgroundColor = 'rgb(234, 234, 234)';
+    var unknownPersonaFontColor = 'rgb(168, 0, 0)';
+    var dimension = coinSize || (props.size && PersonaConsts_1.sizeToPixels[props.size]) || 48;
+    return {
+        coin: [
+            classNames.coin,
+            fonts.medium,
+            size.isSize8 && classNames.size8,
+            size.isSize10 && classNames.size10,
+            size.isSize16 && classNames.size16,
+            size.isSize24 && classNames.size24,
+            size.isSize28 && classNames.size28,
+            size.isSize32 && classNames.size32,
+            size.isSize40 && classNames.size40,
+            size.isSize48 && classNames.size48,
+            size.isSize56 && classNames.size56,
+            size.isSize72 && classNames.size72,
+            size.isSize100 && classNames.size100,
+            size.isSize120 && classNames.size120,
+            className,
+        ],
+        size10WithoutPresenceIcon: {
+            fontSize: fonts.xSmall.fontSize,
+            position: 'absolute',
+            top: '5px',
+            right: 'auto',
+            left: 0,
+        },
+        imageArea: [
+            classNames.imageArea,
+            {
+                position: 'relative',
+                textAlign: 'center',
+                flex: '0 0 auto',
+                height: dimension,
+                width: dimension,
+            },
+            dimension <= 10 && {
+                overflow: 'visible',
+                background: 'transparent',
+                height: 0,
+                width: 0,
+            },
+        ],
+        image: [
+            classNames.image,
+            {
+                marginRight: '10px',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                border: 0,
+                borderRadius: '50%',
+                perspective: '1px',
+            },
+            dimension <= 10 && {
+                overflow: 'visible',
+                background: 'transparent',
+                height: 0,
+                width: 0,
+            },
+            dimension > 10 && {
+                height: dimension,
+                width: dimension,
+            },
+        ],
+        initials: [
+            classNames.initials,
+            {
+                borderRadius: '50%',
+                color: props.showUnknownPersonaCoin ? unknownPersonaFontColor : palette.white,
+                fontSize: fonts.large.fontSize,
+                fontWeight: Styling_1.FontWeights.semibold,
+                // copying the logic for the dimensions; defaulted to 46 for size48
+                lineHeight: dimension === 48 ? 46 : dimension,
+                height: dimension,
+                selectors: (_a = {},
+                    _a[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({ border: '1px solid WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()), { color: 'WindowText', boxSizing: 'border-box', backgroundColor: 'Window !important' }),
+                    _a.i = {
+                        fontWeight: Styling_1.FontWeights.semibold,
+                    },
+                    _a),
+            },
+            props.showUnknownPersonaCoin && {
+                backgroundColor: unknownPersonaBackgroundColor,
+            },
+            dimension < 32 && {
+                fontSize: fonts.xSmall.fontSize,
+            },
+            dimension >= 32 &&
+                dimension < 40 && {
+                fontSize: fonts.medium.fontSize,
+            },
+            dimension >= 40 &&
+                dimension < 56 && {
+                fontSize: fonts.mediumPlus.fontSize,
+            },
+            dimension >= 56 &&
+                dimension < 72 && {
+                fontSize: fonts.xLarge.fontSize,
+            },
+            dimension >= 72 &&
+                dimension < 100 && {
+                fontSize: fonts.xxLarge.fontSize,
+            },
+            dimension >= 100 && {
+                fontSize: fonts.superLarge.fontSize,
+            },
+        ],
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=PersonaCoin.styles.js.map

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PersonaCoin';
+export * from './PersonaCoin.base';

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PersonaCoin"), exports);
+tslib_1.__exportStar(require("./PersonaCoin.base"), exports);
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib-commonjs/components/Persona/PersonaCoin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Persona/PersonaCoin/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,6DAAmC","sourcesContent":["export * from './PersonaCoin';\nexport * from './PersonaCoin.base';\n"]}