first commit

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.base.d.ts

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

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.base.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { classNamesFunction } from '../../../Utilities';
+import { Icon } from '../../../Icon';
+import { PersonaPresence as PersonaPresenceEnum } from '../Persona.types';
+import { sizeBoolean } from '../PersonaConsts';
+import { useMergedRefs } from '@fluentui/react-hooks';
+var coinSizeFontScaleFactor = 6;
+var coinSizePresenceScaleFactor = 3;
+var presenceMaxSize = 40;
+var presenceFontMaxSize = 20;
+var getClassNames = classNamesFunction({
+    // There can be many PersonaPresence rendered with different sizes.
+    // Therefore setting a larger cache size.
+    cacheSize: 100,
+});
+/**
+ * PersonaPresence with no default styles.
+ * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export var PersonaPresenceBase = React.forwardRef(function (props, forwardedRef) {
+    var coinSize = props.coinSize, isOutOfOffice = props.isOutOfOffice, styles = props.styles, // Use getStyles from props.
+    presence = props.presence, theme = props.theme, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors;
+    var rootRef = React.useRef(null);
+    var mergedRootRef = useMergedRefs(forwardedRef, rootRef);
+    var size = sizeBoolean(props.size);
+    // Render Presence Icon if Persona is above size 32.
+    var renderIcon = !(size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) &&
+        (coinSize ? coinSize > 32 : true);
+    var presenceHeightWidth = coinSize
+        ? coinSize / coinSizePresenceScaleFactor < presenceMaxSize
+            ? coinSize / coinSizePresenceScaleFactor + 'px'
+            : presenceMaxSize + 'px'
+        : '';
+    var presenceFontSize = coinSize
+        ? coinSize / coinSizeFontScaleFactor < presenceFontMaxSize
+            ? coinSize / coinSizeFontScaleFactor + 'px'
+            : presenceFontMaxSize + 'px'
+        : '';
+    var coinSizeWithPresenceIconStyle = coinSize
+        ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth }
+        : undefined;
+    var coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined;
+    // Use getStyles from props, or fall back to getStyles from styles file.
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        presence: presence,
+        size: props.size,
+        isOutOfOffice: isOutOfOffice,
+        presenceColors: presenceColors,
+    });
+    if (presence === PersonaPresenceEnum.none) {
+        return null;
+    }
+    return (React.createElement("div", { role: "presentation", className: classNames.presence, style: coinSizeWithPresenceStyle, title: presenceTitle, ref: mergedRootRef }, renderIcon && (React.createElement(Icon, { className: classNames.presenceIcon, iconName: determineIcon(props.presence, props.isOutOfOffice), style: coinSizeWithPresenceIconStyle }))));
+});
+PersonaPresenceBase.displayName = 'PersonaPresenceBase';
+function determineIcon(presence, isOutOfOffice) {
+    if (!presence) {
+        return undefined;
+    }
+    var oofIcon = 'SkypeArrow';
+    switch (PersonaPresenceEnum[presence]) {
+        case 'online':
+            return 'SkypeCheck';
+        case 'away':
+            return isOutOfOffice ? oofIcon : 'SkypeClock';
+        case 'dnd':
+            return 'SkypeMinus';
+        case 'offline':
+            return isOutOfOffice ? oofIcon : '';
+    }
+    return '';
+}
+//# sourceMappingURL=PersonaPresence.base.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.d.ts

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

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.js

@@ -0,0 +1,8 @@
+import { styled } from '../../../Utilities';
+import { PersonaPresenceBase } from './PersonaPresence.base';
+import { getStyles } from './PersonaPresence.styles';
+/**
+ * PersonaPresence is used to render an individual's presence.
+ */
+export var PersonaPresence = styled(PersonaPresenceBase, getStyles, undefined, { scope: 'PersonaPresence' });
+//# sourceMappingURL=PersonaPresence.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaPresence.js","sourceRoot":"../src/","sources":["components/Persona/PersonaPresence/PersonaPresence.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD;;GAEG;AACH,MAAM,CAAC,IAAM,eAAe,GAAmD,MAAM,CAInF,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { PersonaPresenceBase } from './PersonaPresence.base';\nimport { getStyles } from './PersonaPresence.styles';\nimport type { IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types';\n\n/**\n * PersonaPresence is used to render an individual's presence.\n */\nexport const PersonaPresence: React.FunctionComponent<IPersonaPresenceProps> = styled<\n  IPersonaPresenceProps,\n  IPersonaPresenceStyleProps,\n  IPersonaPresenceStyles\n>(PersonaPresenceBase, getStyles, undefined, { scope: 'PersonaPresence' });\n"]}

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.styles.d.ts

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

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.styles.js

@@ -0,0 +1,207 @@
+import { __assign } from "tslib";
+import { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';
+import { personaPresenceSize, presenceBoolean, sizeBoolean } from '../PersonaConsts';
+var GlobalClassNames = {
+    presence: 'ms-Persona-presence',
+    presenceIcon: 'ms-Persona-presenceIcon',
+};
+export var getStyles = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var theme = props.theme, presenceColors = props.presenceColors;
+    var semanticColors = theme.semanticColors, fonts = theme.fonts;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    var size = sizeBoolean(props.size);
+    var presence = presenceBoolean(props.presence);
+    // Presence colors
+    var presenceColorAvailable = (presenceColors && presenceColors.available) || '#6BB700';
+    var presenceColorAway = (presenceColors && presenceColors.away) || '#FFAA44';
+    var presenceColorBusy = (presenceColors && presenceColors.busy) || '#C43148';
+    var presenceColorDnd = (presenceColors && presenceColors.dnd) || '#C50F1F';
+    var presenceColorOffline = (presenceColors && presenceColors.offline) || '#8A8886';
+    var presenceColorOof = (presenceColors && presenceColors.oof) || '#B4009E';
+    var presenceColorBackground = (presenceColors && presenceColors.background) || semanticColors.bodyBackground;
+    var isOpenCirclePresence = presence.isOffline ||
+        (props.isOutOfOffice && (presence.isAvailable || presence.isBusy || presence.isAway || presence.isDoNotDisturb));
+    var borderSizeForSmallPersonas = '1px';
+    var borderSizeForLargePersonas = '2px';
+    var borderSize = size.isSize72 || size.isSize100 ? borderSizeForLargePersonas : borderSizeForSmallPersonas;
+    return {
+        presence: [
+            classNames.presence,
+            __assign(__assign({ position: 'absolute', height: personaPresenceSize.size12, width: personaPresenceSize.size12, borderRadius: '50%', top: 'auto', right: '-2px', bottom: '-2px', border: "2px solid ".concat(presenceColorBackground), textAlign: 'center', boxSizing: 'content-box', backgroundClip: 'border-box' }, getHighContrastNoAdjustStyle()), { selectors: (_a = {},
+                    _a[HighContrastSelector] = {
+                        borderColor: 'Window',
+                        backgroundColor: 'WindowText',
+                    },
+                    _a) }),
+            (size.isSize8 || size.isSize10) && {
+                right: 'auto',
+                top: '7px',
+                left: 0,
+                border: 0,
+                selectors: (_b = {},
+                    _b[HighContrastSelector] = {
+                        top: '9px',
+                        border: '1px solid WindowText',
+                    },
+                    _b),
+            },
+            (size.isSize8 || size.isSize10 || size.isSize24 || size.isSize28 || size.isSize32) &&
+                makeSizeStyle(personaPresenceSize.size8),
+            (size.isSize40 || size.isSize48) && makeSizeStyle(personaPresenceSize.size12),
+            size.isSize16 && {
+                height: personaPresenceSize.size6,
+                width: personaPresenceSize.size6,
+                borderWidth: '1.5px',
+            },
+            size.isSize56 && makeSizeStyle(personaPresenceSize.size16),
+            size.isSize72 && makeSizeStyle(personaPresenceSize.size20),
+            size.isSize100 && makeSizeStyle(personaPresenceSize.size28),
+            size.isSize120 && makeSizeStyle(personaPresenceSize.size32),
+            presence.isAvailable && {
+                backgroundColor: presenceColorAvailable,
+                selectors: (_c = {},
+                    _c[HighContrastSelector] = backgroundColor('Highlight'),
+                    _c),
+            },
+            presence.isAway && backgroundColor(presenceColorAway),
+            presence.isBlocked && [
+                {
+                    selectors: (_d = {
+                            // Only show :after at larger sizes
+                            ':after': size.isSize40 || size.isSize48 || size.isSize72 || size.isSize100
+                                ? {
+                                    content: '""',
+                                    width: '100%',
+                                    height: borderSize,
+                                    backgroundColor: presenceColorBusy,
+                                    transform: 'translateY(-50%) rotate(-45deg)',
+                                    position: 'absolute',
+                                    top: '50%',
+                                    left: 0,
+                                }
+                                : undefined
+                        },
+                        _d[HighContrastSelector] = {
+                            selectors: {
+                                ':after': {
+                                    width: "calc(100% - 4px)",
+                                    left: '2px',
+                                    backgroundColor: 'Window',
+                                },
+                            },
+                        },
+                        _d),
+                },
+            ],
+            presence.isBusy && backgroundColor(presenceColorBusy),
+            presence.isDoNotDisturb && backgroundColor(presenceColorDnd),
+            presence.isOffline && backgroundColor(presenceColorOffline),
+            (isOpenCirclePresence || presence.isBlocked) && [
+                {
+                    backgroundColor: presenceColorBackground,
+                    selectors: (_e = {
+                            ':before': {
+                                content: '""',
+                                width: '100%',
+                                height: '100%',
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                border: "".concat(borderSize, " solid ").concat(presenceColorBusy),
+                                borderRadius: '50%',
+                                boxSizing: 'border-box',
+                            }
+                        },
+                        _e[HighContrastSelector] = {
+                            backgroundColor: 'WindowText',
+                            selectors: {
+                                ':before': {
+                                    width: "calc(100% - 2px)",
+                                    height: "calc(100% - 2px)",
+                                    top: '1px',
+                                    left: '1px',
+                                    borderColor: 'Window',
+                                },
+                            },
+                        },
+                        _e),
+                },
+            ],
+            isOpenCirclePresence && presence.isAvailable && makeBeforeBorderStyle(borderSize, presenceColorAvailable),
+            isOpenCirclePresence && presence.isBusy && makeBeforeBorderStyle(borderSize, presenceColorBusy),
+            isOpenCirclePresence && presence.isAway && makeBeforeBorderStyle(borderSize, presenceColorOof),
+            isOpenCirclePresence && presence.isDoNotDisturb && makeBeforeBorderStyle(borderSize, presenceColorDnd),
+            isOpenCirclePresence && presence.isOffline && makeBeforeBorderStyle(borderSize, presenceColorOffline),
+            isOpenCirclePresence &&
+                presence.isOffline &&
+                props.isOutOfOffice &&
+                makeBeforeBorderStyle(borderSize, presenceColorOof),
+        ],
+        presenceIcon: [
+            classNames.presenceIcon,
+            {
+                color: presenceColorBackground,
+                fontSize: '6px', // exception case where we don't have an available theme.fonts variable to match it.
+                lineHeight: personaPresenceSize.size12,
+                verticalAlign: 'top',
+                selectors: (_f = {},
+                    _f[HighContrastSelector] = {
+                        color: 'Window',
+                    },
+                    _f),
+            },
+            size.isSize56 && {
+                fontSize: '8px', // exception case where we don't have an available theme.fonts variable to match it.
+                lineHeight: personaPresenceSize.size16,
+            },
+            size.isSize72 && {
+                fontSize: fonts.small.fontSize,
+                lineHeight: personaPresenceSize.size20,
+            },
+            size.isSize100 && {
+                fontSize: fonts.medium.fontSize,
+                lineHeight: personaPresenceSize.size28,
+            },
+            size.isSize120 && {
+                fontSize: fonts.medium.fontSize,
+                lineHeight: personaPresenceSize.size32,
+            },
+            presence.isAway && {
+                position: 'relative',
+                left: isOpenCirclePresence ? undefined : '1px',
+            },
+            isOpenCirclePresence && presence.isAvailable && makeOpenCircleIconStyle(presenceColorAvailable),
+            isOpenCirclePresence && presence.isBusy && makeOpenCircleIconStyle(presenceColorBusy),
+            isOpenCirclePresence && presence.isAway && makeOpenCircleIconStyle(presenceColorOof),
+            isOpenCirclePresence && presence.isDoNotDisturb && makeOpenCircleIconStyle(presenceColorDnd),
+            isOpenCirclePresence && presence.isOffline && makeOpenCircleIconStyle(presenceColorOffline),
+            isOpenCirclePresence && presence.isOffline && props.isOutOfOffice && makeOpenCircleIconStyle(presenceColorOof),
+        ],
+    };
+};
+function makeOpenCircleIconStyle(color) {
+    return {
+        color: color,
+        borderColor: color,
+    };
+}
+function makeBeforeBorderStyle(borderSize, color) {
+    return {
+        selectors: {
+            ':before': {
+                border: "".concat(borderSize, " solid ").concat(color),
+            },
+        },
+    };
+}
+function makeSizeStyle(size) {
+    return {
+        height: size,
+        width: size,
+    };
+}
+function backgroundColor(color) {
+    return { backgroundColor: color };
+}
+//# sourceMappingURL=PersonaPresence.styles.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/index.d.ts

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

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/index.js

@@ -0,0 +1,3 @@
+export * from './PersonaPresence';
+export * from './PersonaPresence.base';
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Persona/PersonaPresence/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './PersonaPresence';\nexport * from './PersonaPresence.base';\n"]}