mgwdev-m365-components 0.0.2 → 0.0.3

package/{dist → lib}/App.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-declare function App(): React.JSX.Element;
-export default App;
+import * as React from 'react';
+declare function App(): React.JSX.Element;
+export default App;

package/lib/App.js

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import { AuthenticationContextProvider, GraphContextProvider, SPContextProvider } from './context';
+import { DrivePicker, PeoplePicker, TeamPicker } from './components/common/graphEntityPicker';
+import { SitePicker } from './components/common/graphEntityPicker/SitePicker';
+import { Msal2AuthenticationService } from 'mgwdev-m365-helpers/lib/services/Msal2AuthenticationService';
+import { ListPickerPicker } from './components/common/graphEntityPicker/ListPicker';
+import { GetSiteTemplateContext } from './components/provisioning/GetSiteTemplate';
+function App() {
+    var pnpSearchWPConfig = {
+        "queryTemplate": "{searchTerms}",
+        "selectedProperties": "Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,ParentLink,DefaultEncodingURL,owstaxidmetadataalltagsinfo,Author,AuthorOWSUSER,SPSiteUrl,SiteTitle,IsContainer,IsListItem,HtmlFileType,SiteId,WebId,UniqueID,OriginalPath,FileExtension,IsDocument,NormSiteID,NormWebID,NormListID,NormUniqueID",
+        "enableQueryRules": false,
+        "includeOneDriveResults": false,
+        "showBlank": true,
+        "showResultsCount": true,
+        "webPartTitle": "",
+        "enableLocalization": true,
+        "useDefaultSearchQuery": false,
+        "resultTypes@odata.type": "#Collection(String)",
+        "resultTypes": [],
+        "useExternalRefinersDisplay": false,
+        "useExternalPaginationDisplay": false,
+        "appliedRefiners@odata.type": "#Collection(String)",
+        "appliedRefiners": [],
+        "refinersConfiguration@odata.type": "#Collection(String)",
+        "refinersConfiguration": [],
+        "sortableFields@odata.type": "#Collection(String)",
+        "sortableFields": [],
+        "synonymList@odata.type": "#Collection(String)",
+        "synonymList": [],
+        "searchQueryLanguage": -1,
+        "queryModifiers@odata.type": "#Collection(String)",
+        "queryModifiers": [],
+        "refinementFilters": "",
+        "selectedLayout": 2,
+        "defaultSearchQuery": "",
+        "inlineTemplateText": "<content id=\"template\">\n\n    <style>\n        \n        /* Insert your CSS overrides here */\n\n    </style>\n\n    <div class=\"template_root\">\n        <span>Test</span>\n            <div class=\"template_defaultCard\">\n                {{#if showResultsCount}}\n                <div class=\"template_resultCount\">\n                    <label class=\"ms-fontWeight-semibold\">{{getCountMessage @root.paging.totalItemsCount keywords}}</label>\n                </div>\n                {{/if}}\n                <div class=\"document-card-container\">\n                    {{#each items as |item|}}\n                    <div class=\"document-card-item\">\n                        {{#> resultTypes item=item}}\n\n                                <pnp-document-card data-item=\"{{JSONstringify item}}\" data-fields-configuration=\"{{JSONstringify @root.documentCardFields}}\" data-enable-preview=\"{{@root.enablePreview}}\" data-show-file-icon=\"{{@root.showFileIcon}}\" data-is-compact=\"{{@root.isCompact}}\"></pnp-document-card>\n                        {{/resultTypes}}\n                    </div>\n                    {{/each}}\n                </div>\n            </div>\n            {{#if @root.paging.showPaging}}\n                <pnp-pagination \n                    data-total-items=\"{{@root.paging.totalItemsCount}}\" \n                    data-hide-first-last-pages=\"{{@root.paging.hideFirstLastPages}}\"\n                    data-hide-disabled=\"{{@root.paging.hideDisabled}}\"\n                    data-hide-navigation=\"{{@root.paging.hideNavigation}}\"\n                    data-range=\"{{@root.paging.pagingRange}}\" \n                    data-items-count-per-page=\"{{@root.paging.itemsCountPerPage}}\" \n                    data-current-page-number=\"{{@root.paging.currentPageNumber}}\"\n                >\n                </pnp-pagination>\n            {{/if}}\n    </div>\n</content>\n\n<content id=\"placeholder\">   \n    <div class=\"placeholder_root\">\n        <div class=\"template_defaultCard\">\n            {{#if showResultsCount}}\n                <div class=\"template_resultCount\">\n                    <span class=\"shimmer line\" style=\"width: 20%\"></span>\n                </div>\n            {{/if}}\n            <div class=\"document-card-container\"> \n                {{#times @root.paging.totalItemsCount}}\n                    <div class=\"document-card-item\">\n                        <pnp-document-card-shimmers data-is-compact=\"{{@root.isCompact}}\"></pnp-document-card-shimmers>\n                    </div>\n                {{/times}}\n            </div>\n        </div>\n    </div>\n</content>",
+        "externalTemplateUrl": "",
+        "paging": {
+            "@odata.type": "#graph.Json",
+            "itemsCountPerPage": 10,
+            "pagingRange": 5,
+            "showPaging": true,
+            "hideDisabled": true,
+            "hideFirstLastPages": false,
+            "hideNavigation": false
+        },
+        "sortList@odata.type": "#Collection(graph.Json)",
+        "sortList": [
+            {
+                "sortField": "Created",
+                "sortDirection": 1
+            },
+            {
+                "sortField": "Size",
+                "sortDirection": 2
+            }
+        ],
+        "templateParameters": {
+            "@odata.type": "#graph.Json",
+            "showFileIcon": false,
+            "documentCardFields@odata.type": "#Collection(graph.Json)",
+            "documentCardFields": [
+                {
+                    "name": "Title",
+                    "field": "title",
+                    "value": "Title",
+                    "useHandlebarsExpr": false,
+                    "supportHtml": false
+                },
+                {
+                    "name": "Location",
+                    "field": "location",
+                    "value": "<a style=\"color:{{@themeVariant.palette.themePrimary}}\" href=\"{{SPSiteUrl}}\">{{SiteTitle}}</a>",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": true
+                },
+                {
+                    "name": "Tags",
+                    "field": "tags",
+                    "value": "{{#if owstaxidmetadataalltagsinfo}}<i class='ms-Icon ms-Icon--Tag' aria-hidden='true'></i> {{#each (split owstaxidmetadataalltagsinfo ',') as |tag| }}<a class=\"ms-Link\" href=\"#owstaxidmetadataalltagsinfo:'{{trim tag}}'\">{{tag}}</a>{{/each}}{{/if}}",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": true
+                },
+                {
+                    "name": "Preview Image",
+                    "field": "previewImage",
+                    "value": "{{{getPreviewSrc item}}}",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": false
+                },
+                {
+                    "name": "Preview URL",
+                    "field": "previewUrl",
+                    "value": "{{#eq contentclass 'STS_ListItem_851'}}{{{DefaultEncodingURL}}}{{else}}{{#eq FileType 'pdf'}}{{#contains Path '-my.sharepoint'}}{{{ServerRedirectedEmbedURL}}}{{else}}{{{Path}}}{{/contains}}{{else}}{{{ServerRedirectedEmbedURL}}}{{/eq}}{{/eq}} ",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": false
+                },
+                {
+                    "name": "Date",
+                    "field": "date",
+                    "value": "{{getDate item.Created 'LL'}}",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": false
+                },
+                {
+                    "name": "URL",
+                    "field": "href",
+                    "value": "{{getUrl item}}",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": false
+                },
+                {
+                    "name": "Author",
+                    "field": "author",
+                    "value": "Author",
+                    "useHandlebarsExpr": false,
+                    "supportHtml": false
+                },
+                {
+                    "name": "Profile Image",
+                    "field": "profileImage",
+                    "value": "{{#with (split AuthorOWSUSER '|')}}/_layouts/15/userphoto.aspx?size=L&username={{[0]}}{{/with}}",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": false
+                },
+                {
+                    "name": "IconSrc",
+                    "field": "iconSrc",
+                    "value": "{{IconSrc}}",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": false
+                },
+                {
+                    "name": "IconExt",
+                    "field": "iconExt",
+                    "value": "{{IconExt}}",
+                    "useHandlebarsExpr": true,
+                    "supportHtml": false
+                },
+                {
+                    "name": "File Extension",
+                    "field": "fileExtension",
+                    "value": "FileType",
+                    "useHandlebarsExpr": false,
+                    "supportHtml": false
+                }
+            ],
+            "detailsListColumns@odata.type": "#Collection(graph.Json)",
+            "detailsListColumns": [
+                {
+                    "name": "Title",
+                    "value": "Title",
+                    "useHandlebarsExpr": false,
+                    "minWidth": "80",
+                    "maxWidth": "300",
+                    "enableSorting": false,
+                    "isMultiline": false,
+                    "isResizable": true,
+                    "isResultItemLink": true,
+                    "sortIdx": 1
+                },
+                {
+                    "name": "Created",
+                    "value": "{{getDate Created 'LL'}}",
+                    "useHandlebarsExpr": true,
+                    "minWidth": "80",
+                    "maxWidth": "120",
+                    "enableSorting": false,
+                    "isMultiline": false,
+                    "isResizable": false,
+                    "isResultItemLink": false,
+                    "sortIdx": 2
+                },
+                {
+                    "name": "Summary",
+                    "value": "{{getSummary HitHighlightedSummary}}",
+                    "useHandlebarsExpr": true,
+                    "minWidth": "80",
+                    "maxWidth": "300",
+                    "enableSorting": false,
+                    "isMultiline": true,
+                    "isResizable": false,
+                    "isResultItemLink": false,
+                    "sortIdx": 3
+                },
+                {
+                    "uniqueId": "9c4eb969-17ac-4bf0-928e-7eb916688378",
+                    "name": "Author",
+                    "value": "Author",
+                    "minWidth": "50",
+                    "maxWidth": "310",
+                    "enableSorting": true
+                }
+            ]
+        }
+    };
+    var clientId = import.meta.env.VITE_FRONTEND_CLIENT_ID;
+    var authService = new Msal2AuthenticationService({ clientId: clientId }, false);
+    var _a = React.useState(), site = _a[0], setSite = _a[1];
+    return (React.createElement(AuthenticationContextProvider, { authProvider: authService },
+        React.createElement(GraphContextProvider, null,
+            React.createElement(SPContextProvider, { siteUrl: import.meta.env.VITE_SITE_URL },
+                React.createElement(React.Fragment, null,
+                    React.createElement(PeoplePicker, { key: "people-picker", label: "People picker", description: "Pick some people here" }),
+                    React.createElement(TeamPicker, { key: "team-picker", label: "Team picker", description: "Pick a team here" }),
+                    React.createElement(DrivePicker, { key: "drive-picker", label: "Drive picker", description: "Pick a drive here" }),
+                    React.createElement(SitePicker, { onEntitySelected: function (site) { return setSite(site[0]); }, label: "Site picker", description: "Pick a site " }),
+                    site && React.createElement(ListPickerPicker, { siteId: site.id, label: "List picker", description: "Pick a list from ".concat(site.displayName) }),
+                    React.createElement(GetSiteTemplateContext, null))))));
+}
+export default App;

package/{dist → lib}/components/Test.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-export interface ITestProps {
-}
-export declare function Test(props: ITestProps): React.JSX.Element;
+import * as React from "react";
+export interface ITestProps {
+}
+export declare function Test(props: ITestProps): React.JSX.Element;

package/lib/components/Test.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { useGraph, useSP } from "../context";
+export function Test(props) {
+    var graphClient = useGraph().graphClient;
+    var _a = useSP(), spClient = _a.spClient, siteUrl = _a.siteUrl;
+    var _b = React.useState(true), loading = _b[0], setLoading = _b[1];
+    var _c = React.useState(undefined), user = _c[0], setUser = _c[1];
+    var _d = React.useState(undefined), web = _d[0], setWeb = _d[1];
+    React.useEffect(function () {
+        if (graphClient) {
+            graphClient.get("https://graph.microsoft.com/v1.0/me").then(function (resp) {
+                resp.json().then(function (response) {
+                    setUser(response);
+                    setLoading(false);
+                });
+            });
+        }
+        if (spClient) {
+            spClient.get("".concat(siteUrl, "/_api/web"), {
+                headers: {
+                    "Accept": "application/json;odata=nometadata"
+                }
+            }).then(function (resp) {
+                resp.json().then(function (response) {
+                    setWeb(response);
+                    setLoading(false);
+                });
+            });
+        }
+    }, [graphClient]);
+    if (loading) {
+        return React.createElement("div", null, "Loading...");
+    }
+    return React.createElement("div", null,
+        React.createElement("div", null, user === null || user === void 0 ? void 0 : user.displayName),
+        React.createElement("div", null, web === null || web === void 0 ? void 0 : web.Title));
+}

package/lib/components/common/GraphPersona.d.ts

@@ -0,0 +1,10 @@
+import { IHttpClient, IUser } from "mgwdev-m365-helpers";
+import * as React from "react";
+import { PersonaProps } from "@fluentui/react-components";
+export interface IGraphPersonaProps extends PersonaProps {
+    id?: string;
+    user?: IUser;
+    showPresence?: boolean;
+    graphClient?: IHttpClient;
+}
+export declare function GraphPersona(props: IGraphPersonaProps): React.JSX.Element;

package/lib/components/common/GraphPersona.js

@@ -0,0 +1,125 @@
+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 { Persona, Spinner } from "@fluentui/react-components";
+import { PersonaService } from "../../services/PersonaService";
+import { useGraph } from "../../context";
+export function GraphPersona(props) {
+    var _this = this;
+    var _a, _b, _c, _d, _e;
+    var id = props.id;
+    var graphClient = props.graphClient;
+    if (!graphClient) {
+        graphClient = (useGraph()).graphClient;
+    }
+    var getPresence = function (presenceString) {
+        switch (presenceString) {
+            case "":
+                return "offline";
+            case "Available":
+                return "available";
+            case "Busy":
+                return "busy";
+            case "Away":
+                return "away";
+            case "DoNotDisturb":
+                return "do-not-disturb";
+            case "Offline":
+                return "offline";
+            case "PresenceUnknown":
+                return "unknown";
+            case "OutOfOffice":
+                return "out-of-office";
+            case "Blocked":
+                return "blocked";
+            case "BeRightBack":
+                return "away";
+            case "BusyIdle":
+                return "busy";
+            case "AvailableIdle":
+                return "available";
+            default:
+                return presenceString === null || presenceString === void 0 ? void 0 : presenceString.toLowerCase();
+        }
+    };
+    var personaService = React.useRef(new PersonaService(graphClient, props.showPresence));
+    var _f = React.useState(!props.user), loading = _f[0], setLoading = _f[1];
+    var _g = React.useState(props.user), user = _g[0], setUser = _g[1];
+    var getUserInfo = function () { return __awaiter(_this, void 0, void 0, function () {
+        var userResult;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, personaService.current.getUser(id)];
+                case 1:
+                    userResult = _a.sent();
+                    setUser(__assign(__assign({}, props.user), userResult));
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    React.useEffect(function () {
+        if (!props.user) {
+            getUserInfo();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+    if (loading) {
+        return React.createElement(Spinner, null);
+    }
+    var primaryText = (user === null || user === void 0 ? void 0 : user.displayName) || props.name || props.title || props.id;
+    return (React.createElement(Persona, __assign({ primaryText: primaryText, secondaryText: user === null || user === void 0 ? void 0 : user.jobTitle, avatar: {
+            image: { src: user === null || user === void 0 ? void 0 : user.photo },
+            initials: ((_a = user === null || user === void 0 ? void 0 : user.displayName) === null || _a === void 0 ? void 0 : _a.split(" ").map(function (x) { return x[0]; }).join("")) || ((_b = props.name) === null || _b === void 0 ? void 0 : _b.split(" ").map(function (x) { return x[0]; }).join("")),
+        }, presence: props.showPresence
+            ? {
+                status: getPresence((_c = user === null || user === void 0 ? void 0 : user.presence) === null || _c === void 0 ? void 0 : _c.availability),
+                outOfOffice: (_e = (_d = user === null || user === void 0 ? void 0 : user.presence) === null || _d === void 0 ? void 0 : _d.outOfOfficeSettings) === null || _e === void 0 ? void 0 : _e.isOutOfOffice
+            }
+            : undefined }, props)));
+}

package/lib/components/common/graphEntityPicker/AbstractGraphEntityPicker.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { IEntityWithIdAndDisplayName } from "../../../model/IEntityWithIdAndDisplayName";
+export interface IAbstractGraphEntityPickerProps<T> {
+    onDataRequested: (searchText: string) => Promise<T[]>;
+    value?: T[];
+    label?: string;
+    description?: string;
+    multiSelect?: boolean;
+    disabled?: boolean;
+    additionalKey?: string;
+    onEntitySelected?: (entities: T[]) => void;
+    size?: "small" | "medium" | "large";
+    onSuggestionRendering?: (entity: T) => React.ReactNode;
+    renderOverride?: (entities: T[], isLoading: boolean, loadData: (query?: string) => Promise<void>) => JSX.Element;
+}
+export declare function AbstractGraphEntityPicker<T extends IEntityWithIdAndDisplayName>(props: IAbstractGraphEntityPickerProps<T>): React.JSX.Element;

package/lib/components/common/graphEntityPicker/AbstractGraphEntityPicker.js

@@ -0,0 +1,117 @@
+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 };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { Combobox, Field, ProgressBar, Option } from "@fluentui/react-components";
+import { DebounceHandler } from "mgwdev-m365-helpers/lib/utils/DebounceHandler";
+import * as React from "react";
+export function AbstractGraphEntityPicker(props) {
+    var _this = this;
+    var _a = React.useState(props.value || []), entities = _a[0], setEntities = _a[1];
+    var _b = React.useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = React.useState(""), inputValue = _c[0], setInputValue = _c[1];
+    var _d = React.useState(props.value || []), selectedEntities = _d[0], setSelectedEntities = _d[1];
+    var loadEntities = function (searchText) {
+        return DebounceHandler.debounce("entityPicker-".concat(props.additionalKey), function () { return __awaiter(_this, void 0, void 0, function () {
+            var queriedEntities, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsLoading(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, props.onDataRequested(searchText)];
+                    case 2:
+                        queriedEntities = _a.sent();
+                        //get distinct entities
+                        setEntities(__spreadArray(__spreadArray([], queriedEntities, true), selectedEntities, true).reduce(function (acc, current) {
+                            var x = acc.find(function (item) { return item.id === current.id; });
+                            if (!x) {
+                                return acc.concat([current]);
+                            }
+                            else {
+                                return acc;
+                            }
+                        }, []));
+                        setIsLoading(false);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        setIsLoading(false);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); }, 500);
+    };
+    React.useEffect(function () {
+        loadEntities(inputValue);
+    }, [inputValue]);
+    if (props.renderOverride) {
+        return props.renderOverride(entities, isLoading, loadEntities);
+    }
+    return React.createElement(Field, { label: props.label, hint: props.description },
+        React.createElement(Combobox, { value: inputValue, multiselect: props.multiSelect, freeform: true, onChange: function (e) {
+                setInputValue(e.target.value);
+            }, size: props.size, disabled: props.disabled, onOptionSelect: function (e, data) {
+                var newSelected = [];
+                var selectedEntity = entities.find(function (x) { return x.id === data.optionValue; });
+                if (selectedEntities.some(function (x) { return x.id === data.optionValue; })) {
+                    newSelected = selectedEntities.filter(function (x) { return x.id !== data.optionValue; });
+                }
+                else if (props.multiSelect) {
+                    newSelected = __spreadArray(__spreadArray([], selectedEntities, true), [selectedEntity], false);
+                }
+                else {
+                    newSelected = [selectedEntity];
+                }
+                newSelected = newSelected.filter(function (x) { return !!x; });
+                props.onEntitySelected && props.onEntitySelected(newSelected);
+                setSelectedEntities(newSelected);
+                setInputValue(newSelected.map(function (x) { return x.displayName; }).join(", "));
+            }, defaultSelectedOptions: selectedEntities.map(function (x) { return x.id; }) }, entities.map(function (x) { return React.createElement(Option, { key: encodeURIComponent(x.id), text: x.displayName, value: x.id }, props.onSuggestionRendering ? props.onSuggestionRendering(x) : x.displayName); })),
+        isLoading && React.createElement(ProgressBar, null));
+}

package/lib/components/common/graphEntityPicker/ChannelPicker.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { IEntityWithIdAndDisplayName } from "../../../model/IEntityWithIdAndDisplayName";
+import { IAbstractGraphEntityPickerProps } from "./AbstractGraphEntityPicker";
+import { IHttpClient } from "mgwdev-m365-helpers";
+export interface IChannelPickerProps extends Partial<IAbstractGraphEntityPickerProps<IEntityWithIdAndDisplayName>> {
+    teamId: string;
+}
+export declare function ChannelPicker(props: IChannelPickerProps): React.JSX.Element;
+export declare function ChannelPickerStandalone(props: IChannelPickerProps & {
+    graphClient: IHttpClient;
+}): React.JSX.Element;

package/lib/components/common/graphEntityPicker/ChannelPicker.js

@@ -0,0 +1,83 @@
+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 { AbstractGraphEntityPicker } from "./AbstractGraphEntityPicker";
+import { useGraph } from "../../../context";
+export function ChannelPicker(props) {
+    var graphClient = useGraph().graphClient;
+    return React.createElement(ChannelPickerStandalone, __assign({}, props, { graphClient: graphClient }));
+}
+export function ChannelPickerStandalone(props) {
+    var _this = this;
+    var loadChannels = function () { return __awaiter(_this, void 0, void 0, function () {
+        var response, result;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, props.graphClient.get("/teams/".concat(props.teamId, "/channels?$select=id,displayName"))];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    result = _a.sent();
+                    return [2 /*return*/, result.value];
+            }
+        });
+    }); };
+    React.useEffect(function () {
+        loadChannels();
+    }, [props.teamId]);
+    var getData = function (search) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, loadChannels()];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); };
+    return React.createElement(AbstractGraphEntityPicker, __assign({ additionalKey: "team-".concat(props.teamId, "-channels") }, props, { onDataRequested: getData }));
+}

package/lib/components/common/graphEntityPicker/DrivePicker.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { IAbstractGraphEntityPickerProps } from "./AbstractGraphEntityPicker";
+import { IEntityWithIdAndDisplayName } from "../../../model/IEntityWithIdAndDisplayName";
+import { IHttpClient } from "mgwdev-m365-helpers";
+export declare function DrivePicker(props: Partial<IAbstractGraphEntityPickerProps<IEntityWithIdAndDisplayName>> & {
+    siteId?: string;
+}): React.JSX.Element;
+export declare function DrivePickerStandalone(props: Partial<IAbstractGraphEntityPickerProps<IEntityWithIdAndDisplayName>> & {
+    graphClient: IHttpClient;
+    siteId?: string;
+}): React.JSX.Element;