@pnp/spfx-controls-react 3.20.0-beta.1140258 → 3.20.0-beta.1140290

package/lib/controls/userPicker/useUserPickerPositioning.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { resolvePositioningShorthand, usePositioning, } from '@fluentui/react-positioning';
+export var useUserPickerPositioning = function (props) {
+    var positioning = props.positioning;
+    // Set a default set of fallback positions to try if the dropdown does not fit on screen
+    var fallbackPositions = ['above', 'after', 'after-top', 'before', 'before-top'];
+    // popper options
+    var popperOptions = __assign({ position: 'below', align: 'start', offset: { crossAxis: 0, mainAxis: 2 }, fallbackPositions: fallbackPositions, matchTargetSize: 'width' }, resolvePositioningShorthand(positioning));
+    var _a = usePositioning(popperOptions), targetRef = _a.targetRef, containerRef = _a.containerRef;
+    return [containerRef, targetRef];
+};
+//# sourceMappingURL=useUserPickerPositioning.js.map

package/lib/controls/userPicker/useUserPickerPositioning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUserPickerPositioning.js","sourceRoot":"","sources":["../../../src/controls/userPicker/useUserPickerPositioning.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,EAEL,2BAA2B,EAC3B,cAAc,GACf,MAAM,6BAA6B,CAAC;AAIrC,MAAM,CAAE,IAAM,wBAAwB,GAAG,UAAC,KAAuB;IACvD,IAAA,WAAW,GAAK,KAAK,YAAV,CAAW;IAE9B,wFAAwF;IACxF,IAAM,iBAAiB,GAAgC,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAE/G,iBAAiB;IACjB,IAAM,aAAa,cACjB,QAAQ,EAAE,OAAgB,EAC1B,KAAK,EAAE,OAAgB,EACvB,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EACrC,iBAAiB,mBAAA,EACjB,eAAe,EAAE,OAAgB,IAC9B,2BAA2B,CAAC,WAAW,CAAC,CAC5C,CAAC;IAEI,IAAA,KAA8B,cAAc,CAAC,aAAa,CAAC,EAAzD,SAAS,eAAA,EAAE,YAAY,kBAAkC,CAAC;IAElE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnC,CAAC,CAAA"}

package/lib/controls/userPicker/useUserPickerStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const useUserPickerStyles: () => Record<"image" | "container" | "imageButton" | "userItem" | "userItemCloseButton" | "selectUserMainContainer" | "selectedUserContainer" | "inputContainer" | "userCardStyles" | "popupContainer" | "usersContainer", string>;
+//# sourceMappingURL=useUserPickerStyles.d.ts.map

package/lib/controls/userPicker/useUserPickerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUserPickerStyles.d.ts","sourceRoot":"","sources":["../../../src/controls/userPicker/useUserPickerStyles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB,oOAyF9B,CAAC"}

package/lib/controls/userPicker/useUserPickerStyles.js

@@ -0,0 +1,52 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { makeStyles, shorthands, tokens, } from '@fluentui/react-components';
+export var useUserPickerStyles = makeStyles({
+    container: __assign(__assign({ display: "flex", flexDirection: "row", justifyContent: "start", alignItems: "center" }, shorthands.gap("20px")), { ":hover": {
+            cursor: "pointer",
+            backgroundColor: tokens.colorNeutralBackground3,
+        } }),
+    image: {
+        width: "32px",
+    },
+    imageButton: {
+        width: "28px",
+    },
+    userItem: __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, shorthands.padding("3px")), { minWidth: "200px", maxWidth: "fit-content", width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }), shorthands.gap("20px")), { backgroundColor: tokens.colorNeutralBackground3 }), shorthands.border("1px solid", tokens.colorNeutralStroke1)), shorthands.borderRadius(tokens.borderRadiusCircular)), shorthands.overflow("hidden")),
+    userItemCloseButton: {
+        ":hover": {
+            backgroundColor: tokens.colorNeutralBackground3Selected,
+            cursor: "pointer",
+        },
+    },
+    selectUserMainContainer: __assign(__assign(__assign({ display: "flex", flexDirection: "column", rowGap: "5px" }, shorthands.borderWidth("1px")), shorthands.borderStyle("solid")), shorthands.borderColor(tokens.colorNeutralStroke1)),
+    selectedUserContainer: __assign(__assign({ display: "flex", flexDirection: "row", flexWrap: "wrap" }, shorthands.padding("2px")), { columnGap: "2px", rowGap: "5px", marginTop: "3px", marginBottom: "3px" }),
+    inputContainer: {
+        width: "inherit",
+    },
+    userCardStyles: __assign({}, shorthands.padding("5px")),
+    popupContainer: __assign(__assign({ position: "fixed", zIndex: 99999, minWidth: "250px" }, shorthands.padding("10px")), shorthands.gap("5px")),
+    usersContainer: {
+        overflowY: "auto",
+        overflowX: "hidden",
+        "scrollbar-color": tokens.colorNeutralBackground1,
+        "scrollbar-width": "thin",
+        "::-webkit-scrollbar-thumb": __assign(__assign({ backgroundColor: tokens === null || tokens === void 0 ? void 0 : tokens.colorBrandStroke2 }, shorthands.borderRadius("10px")), shorthands.borderWidth("1px")),
+        "::-webkit-scrollbar": {
+            height: "10px",
+            width: "7px",
+        },
+        width: "100%",
+        maxHeight: "450px",
+    },
+});
+//# sourceMappingURL=useUserPickerStyles.js.map

package/lib/controls/userPicker/useUserPickerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUserPickerStyles.js","sourceRoot":"","sources":["../../../src/controls/userPicker/useUserPickerStyles.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,MAAM,GACP,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAU,CAAC;IAC5C,SAAS,sBACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,cAAc,EAAE,OAAO,EACvB,UAAU,EAAE,QAAQ,IAEjB,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,KACzB,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,eAAe,EAAE,MAAM,CAAC,uBAAuB;SAChD,GACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,WAAW,EAAE;QACX,KAAK,EAAE,MAAM;KACd;IACD,QAAQ,qEACH,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,KAC5B,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,cAAc,EAAE,eAAe,EAC/B,UAAU,EAAE,QAAQ,KACjB,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,KACzB,eAAe,EAAE,MAAM,CAAC,uBAAuB,KAE5C,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,mBAAmB,CAAC,GAC1D,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,oBAAoB,CAAC,GACpD,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CACjC;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE;YACR,eAAe,EAAE,MAAM,CAAC,+BAA+B;YACvD,MAAM,EAAE,SAAS;SAClB;KACF;IACD,uBAAuB,+BACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,MAAM,EAAE,KAAK,IACV,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,GAC7B,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,GAC/B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,mBAAmB,CAAC,CACtD;IACD,qBAAqB,sBACnB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,MAAM,IACb,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,KAC5B,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,KAAK,EACb,SAAS,EAAE,KAAK,EAChB,YAAY,EAAE,KAAK,GACpB;IACD,cAAc,EAAE;QACd,KAAK,EAAE,SAAS;KACjB;IACD,cAAc,eACT,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAC7B;IACD,cAAc,sBACZ,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,OAAO,IACd,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,GAC1B,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CACzB;IACD,cAAc,EAAE;QACd,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,QAAQ;QACnB,iBAAiB,EAAE,MAAM,CAAC,uBAAuB;QACjD,iBAAiB,EAAE,MAAM;QACzB,2BAA2B,sBACzB,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,IACvC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,GAC/B,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CACjC;QACD,qBAAqB,EAAE;YACrB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,KAAK;SACb;QACD,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,OAAO;KACnB;CACF,CAAC,CAAC"}

package/lib/controls/userPicker/userCard/NoUser.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface INoUserProps {
+}
+export declare const NoUser: React.FunctionComponent<INoUserProps>;
+//# sourceMappingURL=NoUser.d.ts.map

package/lib/controls/userPicker/userCard/NoUser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoUser.d.ts","sourceRoot":"","sources":["../../../../src/controls/userPicker/userCard/NoUser.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,YAAY;CAAG;AAEhC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAUxD,CAAC"}

package/lib/controls/userPicker/userCard/NoUser.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Body1 } from '@fluentui/react-text';
+import { Icon } from '@iconify/react';
+import { useUserCardStyles } from './useUserCardStyles';
+export var NoUser = function (props) {
+    var styles = useUserCardStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.root, style: { padding: 10 } },
+            React.createElement(Icon, { icon: "fluent:people-error-20-filled", width: "28", height: "28" }),
+            React.createElement(Body1, null, "No user found"))));
+};
+//# sourceMappingURL=NoUser.js.map

package/lib/controls/userPicker/userCard/NoUser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoUser.js","sourceRoot":"","sources":["../../../../src/controls/userPicker/userCard/NoUser.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,MAAM,CAAC,IAAM,MAAM,GAA0C,UAAC,KAA4C;IACxG,IAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IACnC,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC;YAChD,oBAAC,IAAI,IAAC,IAAI,EAAC,+BAA+B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG;YAClE,oBAAC,KAAK,wBAAsB,CACxB,CACL,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/userPicker/userCard/UserCard.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IUserInfo } from '../models/IUserInfo';
+export interface IuserCardProps {
+    userId?: string;
+    showOverCard?: boolean;
+    onSelected?: (user: IUserInfo) => void;
+    className?: string;
+    secondaryTextPropertyName?: "jobTitle" | "department" | "mail" | "officeLocation" | "mobilePhone" | "businessPhones" | "userPrincipalName";
+}
+export declare const UserCard: React.FunctionComponent<IuserCardProps>;
+//# sourceMappingURL=UserCard.d.ts.map

package/lib/controls/userPicker/userCard/UserCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCard.d.ts","sourceRoot":"","sources":["../../../../src/controls/userPicker/userCard/UserCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKhD,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,gBAAgB,GAAG,aAAa,GAAG,gBAAgB,GAAG,mBAAmB,CAAG;CAC9I;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CA+G5D,CAAC"}

package/lib/controls/userPicker/userCard/UserCard.js

@@ -0,0 +1,173 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+//import './style.css';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import * as React from 'react';
+import { useAtom } from 'jotai';
+import { mergeClasses, Persona, } from '@fluentui/react-components';
+import { LivePersona } from '../../LivePersona';
+import { globalState } from '../atoms/globalState';
+import { useGraphUserAPI } from '../hooks/useGraphUserAPI';
+import { useUserCardStyles } from './useUserCardStyles';
+export var UserCard = function (props) {
+    var _a, _b;
+    var appGlobalState = useAtom(globalState)[0];
+    var context = appGlobalState.context;
+    var userId = props.userId, showOverCard = props.showOverCard, onSelected = props.onSelected, className = props.className, secondaryTextPropertyName = props.secondaryTextPropertyName;
+    var _c = useGraphUserAPI(context), getUserById = _c.getUserById, getUserPresence = _c.getUserPresence;
+    var _d = React.useState(), user = _d[0], setUser = _d[1];
+    var _e = React.useState(true), isLoading = _e[0], setIsLoading = _e[1];
+    var styles = useUserCardStyles();
+    var getSecondaryText = React.useCallback(function (user) {
+        var _a;
+        switch (secondaryTextPropertyName) {
+            case "jobTitle":
+                return user === null || user === void 0 ? void 0 : user.jobTitle;
+            case "department":
+                return user === null || user === void 0 ? void 0 : user.department;
+            case "mail":
+                return user === null || user === void 0 ? void 0 : user.mail;
+            case "officeLocation":
+                return user === null || user === void 0 ? void 0 : user.officeLocation;
+            case "mobilePhone":
+                return user === null || user === void 0 ? void 0 : user.mobilePhone;
+            case "businessPhones":
+                return (_a = user === null || user === void 0 ? void 0 : user.businessPhones) === null || _a === void 0 ? void 0 : _a.join(",");
+            case "userPrincipalName":
+                return user === null || user === void 0 ? void 0 : user.userPrincipalName;
+            default:
+                return "";
+        }
+    }, [user === null || user === void 0 ? void 0 : user.jobTitle, user === null || user === void 0 ? void 0 : user.department, user === null || user === void 0 ? void 0 : user.mail, user === null || user === void 0 ? void 0 : user.officeLocation, user === null || user === void 0 ? void 0 : user.mobilePhone, user === null || user === void 0 ? void 0 : user.businessPhones, user === null || user === void 0 ? void 0 : user.userPrincipalName]);
+    var availability = React.useMemo(function () {
+        var _a;
+        var presence = (user || {}).presence;
+        switch ((_a = presence === null || presence === void 0 ? void 0 : presence.availability) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
+            case "available":
+                return "available";
+            case "away":
+                return "away";
+            case "busy":
+                return "busy";
+            case "offline":
+                return "offline";
+            default:
+                return "offline";
+        }
+    }, [(_a = user === null || user === void 0 ? void 0 : user.presence) === null || _a === void 0 ? void 0 : _a.availability]);
+    var checkUserPresence = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var userPresence, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!userId)
+                        return [2 /*return*/];
+                    userPresence = { availability: "offline", activity: "offline" };
+                    return [4 /*yield*/, getUserById(userId)];
+                case 1:
+                    user = _a.sent();
+                    if (user)
+                        try {
+                            getUserPresence((user === null || user === void 0 ? void 0 : user.id) || "").then(function (presence) {
+                                userPresence = presence;
+                                user = __assign(__assign({}, user), { presence: userPresence });
+                                setUser(user);
+                            });
+                        }
+                        catch (error) {
+                            console.log(error);
+                        }
+                        finally {
+                            setIsLoading(false);
+                        }
+                    user = __assign(__assign({}, user), { presence: userPresence });
+                    setUser(user);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [userId, context]);
+    React.useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, checkUserPresence()];
+                    case 1:
+                        _a.sent();
+                        setInterval(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, checkUserPresence()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); }, 60000);
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, []);
+    if (isLoading)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: mergeClasses(styles.container, className), key: userId, onClick: function () {
+                if (onSelected)
+                    onSelected(user);
+            } },
+            React.createElement(LivePersona, { upn: showOverCard ? userId : "", template: React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: styles.root },
+                        React.createElement(Persona, { name: (_b = user === null || user === void 0 ? void 0 : user.displayName) !== null && _b !== void 0 ? _b : "No Name", secondaryText: getSecondaryText(user), presence: { status: availability }, avatar: {
+                                image: {
+                                    src: user === null || user === void 0 ? void 0 : user.userPhoto,
+                                },
+                            } }))), serviceScope: context.serviceScope }))));
+};
+//# sourceMappingURL=UserCard.js.map

package/lib/controls/userPicker/userCard/UserCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCard.js","sourceRoot":"","sources":["../../../../src/controls/userPicker/userCard/UserCard.tsx"],"names":[],"mappings":"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"}

package/lib/controls/userPicker/userCard/useUserCardStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const useUserCardStyles: () => Record<"container" | "root" | "personLine1Container" | "personLine1" | "personline1Styles", string>;
+//# sourceMappingURL=useUserCardStyles.d.ts.map

package/lib/controls/userPicker/userCard/useUserCardStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUserCardStyles.d.ts","sourceRoot":"","sources":["../../../../src/controls/userPicker/userCard/useUserCardStyles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,2GA4C5B,CAAC"}

package/lib/controls/userPicker/userCard/useUserCardStyles.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { makeStyles, shorthands, tokens, } from '@fluentui/react-components';
+export var useUserCardStyles = makeStyles({
+    container: __assign(__assign({ display: "flex", flexDirection: "row", justifyContent: "start", alignItems: "center" }, shorthands.gap("20px")), { ":hover": {
+            cursor: "pointer",
+            backgroundColor: tokens.colorNeutralBackground3,
+        } }),
+    root: __assign({ display: "flex", flexDirection: "row", justifyContent: "flex-start", alignItems: "center", width: "fit-content" }, shorthands.gap("10px")),
+    personLine1Container: __assign(__assign({ display: "flex", flexDirection: "row", justifyContent: "start", alignItems: "center", width: "100%", maxWidth: "100%" }, shorthands.overflow("hidden")), { paddingBottom: "0px" }),
+    personLine1: __assign(__assign({ width: "100%", maxWidth: "100%" }, shorthands.overflow("hidden")), { display: "-webkit-box", "-webkit-line-clamp": "1", "-webkit-box-orient": "vertical", paddingBottom: "0px", textAlign: "start" }),
+    personline1Styles: {
+        paddingRight: "5px",
+        color: tokens.colorNeutralForeground2
+    },
+});
+//# sourceMappingURL=useUserCardStyles.js.map

package/lib/controls/userPicker/userCard/useUserCardStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUserCardStyles.js","sourceRoot":"","sources":["../../../../src/controls/userPicker/userCard/useUserCardStyles.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,MAAM,GACP,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAU,CAAC;IAC1C,SAAS,sBACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,cAAc,EAAE,OAAO,EACvB,UAAU,EAAE,QAAQ,IACjB,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,KACzB,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,eAAe,EAAE,MAAM,CAAC,uBAAuB;SAChD,GACF;IACH,IAAI,aACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,cAAc,EAAE,YAAY,EAC5B,UAAU,EAAE,QAAQ,EACpB,KAAK,EAAE,aAAa,IACjB,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CACxB;IACD,oBAAoB,sBAClB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,cAAc,EAAE,OAAO,EACvB,UAAU,EAAE,QAAQ,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,IACb,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAChC,aAAa,EAAE,KAAK,GACrB;IACD,WAAW,sBACT,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,IACb,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAChC,OAAO,EAAE,aAAa,EACtB,oBAAoB,EAAE,GAAG,EACzB,oBAAoB,EAAE,UAAU,EAChC,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,OAAO,GACnB;IACD,iBAAiB,EAAE;QACjB,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,MAAM,CAAC,uBAAuB;KACvC;CACD,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "3.20.0-beta.1140258",
+  "version": "3.20.0-beta.1140290",
   "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0",
   "scripts": {
     "build": "gulp build",