@pnp/spfx-controls-react 3.24.0-beta.2159446 → 3.24.0-beta.2180374

package/CHANGELOG.md

@@ -1,4 +1,5 @@
 # Releases
+ 
 
 ## 3.24.0
 
@@ -6,10 +7,22 @@
 
 - `PeoplePicker`: Improving documentation page about external users search [#323](https://github.com/pnp/sp-dev-fx-controls-react/issues/323)
 - `FolderExplorer`: Updated Folder explorer control documentation to correct a typo. [#2072](https://github.com/pnp/sp-dev-fx-controls-react/pull/2072)
+- `ListItemComments`: Multiline comment doesn't display correctly in ListItemComments control due to missing line break [2078](https://github.com/pnp/sp-dev-fx-controls-react/issues/2078)
+- `ImagePicker`: Imagepicker strings fix [2077](https://github.com/pnp/sp-dev-fx-controls-react/pull/2077)
+- `TreeView`: TreeView Item - pass through imageProps of iconProps to TreeItem   [#2074](https://github.com/pnp/sp-dev-fx-controls-react/issues/2074)
+
+### Enhancements
+
+- `ListItemAttachments`: Add render options for ListItemAttachments [2081](https://github.com/pnp/sp-dev-fx-controls-react/pull/2081)
+
+### New Control(s)
+
+- `GroupPicker`: New GroupPicker Control - select one or multiple M365 Groups [2085](https://github.com/pnp/sp-dev-fx-controls-react/pull/2085)
 
 ### Contributors
 
 Special thanks to our contributors (in alphabetical order): [Antanina Druzhkina](https://github.com/Ateina), [Michaël Maillot](https://github.com/michaelmaillot), [Nishkalank Bezawada](https://github.com/NishkalankBezawada).
+Special thanks to our contributors (in alphabetical order): [Antanina Druzhkina](https://github.com/Ateina),[wuxiaojun514](https://github.com/wuxiaojun514),[Paul Schaeflein](https://github.com/pschaeflein).
 
 ## 3.23.0
 

package/lib/GroupPicker.d.ts

@@ -0,0 +1,2 @@
+export * from "./controls/groupPicker";
+//# sourceMappingURL=GroupPicker.d.ts.map

package/lib/GroupPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupPicker.d.ts","sourceRoot":"","sources":["../src/GroupPicker.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib/GroupPicker.js

@@ -0,0 +1,2 @@
+export * from "./controls/groupPicker";
+//# sourceMappingURL=GroupPicker.js.map

package/lib/GroupPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupPicker.js","sourceRoot":"","sources":["../src/GroupPicker.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib/common/model/IGroup.d.ts

@@ -0,0 +1,12 @@
+export interface IGroup {
+    id: string;
+    displayName: string;
+    description?: string;
+    groupTypes?: string[];
+    mailEnabled?: boolean;
+    mail?: string;
+    securityEnabled?: boolean;
+    visibility?: string;
+    resourceProvisioningOptions?: string[];
+}
+//# sourceMappingURL=IGroup.d.ts.map

package/lib/common/model/IGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IGroup.d.ts","sourceRoot":"","sources":["../../../src/common/model/IGroup.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC;CACxC"}

package/lib/common/model/IGroup.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IGroup.js.map

package/lib/common/model/IGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IGroup.js","sourceRoot":"","sources":["../../../src/common/model/IGroup.ts"],"names":[],"mappings":""}

package/lib/common/telemetry/version.js

@@ -1,2 +1,2 @@
-export var version = "3.24.0-beta.2159446";
+export var version = "3.24.0-beta.2180374";
 //# sourceMappingURL=version.js.map

package/lib/controls/groupPicker/GroupPicker.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IGroupPickerProps } from "./IGroupPickerProps";
+export declare const GroupPicker: React.FunctionComponent<IGroupPickerProps>;
+//# sourceMappingURL=GroupPicker.d.ts.map

package/lib/controls/groupPicker/GroupPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupPicker.d.ts","sourceRoot":"","sources":["../../../src/controls/groupPicker/GroupPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAmDzE,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAgMlE,CAAC"}

package/lib/controls/groupPicker/GroupPicker.js

@@ -0,0 +1,205 @@
+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 (g && (g = 0, op[0] && (_ = 0)), _) 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 { TagPicker, } from "@fluentui/react/lib/Pickers";
+import { useGroups } from "../../hooks";
+import { useGroupPickerStyles } from "./GroupPickerStyles";
+import { IconButton } from "@fluentui/react/lib/Button";
+import { Text } from "@fluentui/react/lib/Text";
+import { Stack } from "@fluentui/react/lib/Stack";
+import { Label } from "@fluentui/react/lib/Label";
+import { FontIcon } from "@fluentui/react/lib/Icon";
+import { Customizer } from "@fluentui/react/lib/Utilities";
+import pullAllBy from "lodash/pullAllBy";
+import find from "lodash/find";
+import strings from "ControlStrings";
+var pickerSuggestionsProps = {
+    suggestionsHeaderText: strings.GroupPickerSuggestionsHeaderText,
+    noResultsFoundText: strings.genericNoResultsFoundText,
+};
+var initialState = {
+    savedSelectedGroups: [],
+};
+var getTextFromItem = function (item) { return item.name; };
+var matchGroupType = function (group, groupType) {
+    var _a;
+    if (!groupType || groupType === "All")
+        return true;
+    var isUnified = (_a = group.groupTypes) === null || _a === void 0 ? void 0 : _a.includes("Unified");
+    var isSecurity = !!group.securityEnabled && !isUnified;
+    if (groupType === "M365")
+        return isUnified;
+    if (groupType === "Security")
+        return isSecurity;
+    return true;
+};
+var reducer = function (state, action // eslint-disable-line @typescript-eslint/no-explicit-any
+) {
+    switch (action.type) {
+        case "UPDATE_SELECTEDITEM":
+            return __assign(__assign({}, state), { savedSelectedGroups: action.payload });
+        default:
+            return state;
+    }
+};
+export var GroupPicker = function (props) {
+    var _a;
+    var _b = React.useReducer(reducer, initialState), state = _b[0], dispatch = _b[1];
+    var picker = React.useRef(null);
+    var serviceScope = props.appcontext.serviceScope;
+    var getGroups = useGroups(serviceScope).getGroups;
+    var onSelectedGroups = props.onSelectedGroups, selectedGroups = props.selectedGroups, itemLimit = props.itemLimit, multiSelect = props.multiSelect, label = props.label, styles = props.styles, themeVariant = props.themeVariant, groupType = props.groupType;
+    var _c = useGroupPickerStyles(themeVariant), pickerStylesMulti = _c.pickerStylesMulti, pickerStylesSingle = _c.pickerStylesSingle, renderItemStylesMulti = _c.renderItemStylesMulti, renderItemStylesSingle = _c.renderItemStylesSingle, renderIconButtonRemoveStyles = _c.renderIconButtonRemoveStyles, componentClasses = _c.componentClasses;
+    var groupTypeById = React.useRef({});
+    var getGroupTypeIcon = React.useCallback(function (groupId) {
+        if (!groupId)
+            return null;
+        var groupType = groupTypeById.current[groupId.toString()];
+        if (!groupType)
+            return null;
+        if (groupType === "m365") {
+            return (React.createElement(FontIcon, { iconName: "OfficeLogo", className: componentClasses.groupTypeIconM365, title: strings.GroupPickerGroupTypeM365Label, "aria-label": strings.GroupPickerGroupTypeM365Label }));
+        }
+        return (React.createElement(FontIcon, { iconName: "LockSolid", className: componentClasses.groupTypeIconSecurity, title: strings.GroupPickerGroupTypeSecurityLabel, "aria-label": strings.GroupPickerGroupTypeSecurityLabel }));
+    }, [componentClasses.groupTypeIconM365, componentClasses.groupTypeIconSecurity]);
+    var useFilterSuggestedGroups = React.useCallback(function (filterText, groupsList) { return __awaiter(void 0, void 0, void 0, function () {
+        var tags, groups, _i, groups_1, group, isUnified, groupTypeKey, checkExists, error_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    tags = [];
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, getGroups(filterText)];
+                case 2:
+                    groups = _b.sent();
+                    if (groups === null || groups === void 0 ? void 0 : groups.length) {
+                        for (_i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+                            group = groups_1[_i];
+                            if (!matchGroupType(group, groupType))
+                                continue;
+                            isUnified = (_a = group.groupTypes) === null || _a === void 0 ? void 0 : _a.includes("Unified");
+                            groupTypeKey = isUnified
+                                ? "m365"
+                                : group.securityEnabled
+                                    ? "security"
+                                    : undefined;
+                            if (groupTypeKey) {
+                                groupTypeById.current[group.id] = groupTypeKey;
+                            }
+                            checkExists = find(groupsList, { key: group.id });
+                            if (checkExists)
+                                continue;
+                            tags.push({ key: group.id, name: group.displayName });
+                        }
+                    }
+                    return [2 /*return*/, tags];
+                case 3:
+                    error_1 = _b.sent();
+                    console.log(error_1);
+                    return [2 /*return*/, tags];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [groupType, getGroups]);
+    React.useEffect(function () {
+        dispatch({
+            type: "UPDATE_SELECTEDITEM",
+            payload: selectedGroups,
+        });
+    }, [props]);
+    var _onRenderItem = React.useCallback(function (itemProps) {
+        var savedSelectedGroups = state.savedSelectedGroups;
+        if (itemProps.item) {
+            return (React.createElement(Stack, { horizontal: true, horizontalAlign: "start", verticalAlign: "center", tokens: { childrenGap: 7 }, styles: (multiSelect !== null && multiSelect !== void 0 ? multiSelect : true) && (itemLimit && itemLimit > 1)
+                    ? renderItemStylesMulti
+                    : renderItemStylesSingle },
+                React.createElement(FontIcon, { iconName: "Group" }),
+                React.createElement(Text, { variant: "medium" }, itemProps.item.name),
+                getGroupTypeIcon(itemProps.item.key),
+                React.createElement(IconButton, { styles: renderIconButtonRemoveStyles, iconProps: { iconName: "Cancel" }, title: strings.TeamPickerButtonRemoveTitle, onClick: function () {
+                        var _newSelectedGroups = pullAllBy(savedSelectedGroups, [
+                            itemProps.item,
+                        ]);
+                        dispatch({
+                            type: "UPDATE_SELECTEDITEM",
+                            payload: _newSelectedGroups,
+                        });
+                        onSelectedGroups(_newSelectedGroups);
+                    } })));
+        }
+        return null;
+    }, [
+        state.savedSelectedGroups,
+        renderItemStylesMulti,
+        renderItemStylesSingle,
+        renderIconButtonRemoveStyles,
+        itemLimit,
+        onSelectedGroups,
+    ]);
+    var _onRenderSuggestionsItem = React.useCallback(function (propsTag, _itemProps) {
+        return (React.createElement(Stack, { horizontal: true, horizontalAlign: "start", verticalAlign: "center", tokens: { childrenGap: 5, padding: 10 } },
+            React.createElement(FontIcon, { iconName: "Group" }),
+            React.createElement(Text, { variant: "smallPlus" }, propsTag.name),
+            getGroupTypeIcon(propsTag.key)));
+    }, []);
+    return (React.createElement(Customizer, { settings: { theme: props.themeVariant } },
+        React.createElement("div", { style: { width: "100%" } },
+            label && React.createElement(Label, null, label),
+            React.createElement(TagPicker, { styles: styles !== null && styles !== void 0 ? styles : ((multiSelect !== null && multiSelect !== void 0 ? multiSelect : true) && (itemLimit && itemLimit > 1)
+                    ? pickerStylesMulti
+                    : pickerStylesSingle), selectedItems: state.savedSelectedGroups, onRenderItem: _onRenderItem, onRenderSuggestionsItem: _onRenderSuggestionsItem, onResolveSuggestions: useFilterSuggestedGroups, getTextFromItem: getTextFromItem, pickerSuggestionsProps: pickerSuggestionsProps, onEmptyResolveSuggestions: function (selectGroups) {
+                    return useFilterSuggestedGroups("", selectGroups);
+                }, itemLimit: (multiSelect !== null && multiSelect !== void 0 ? multiSelect : true) ? ((_a = props.itemLimit) !== null && _a !== void 0 ? _a : undefined) : 1, onChange: function (items) {
+                    dispatch({ type: "UPDATE_SELECTEDITEM", payload: items });
+                    props.onSelectedGroups(items);
+                }, componentRef: picker }))));
+};
+//# sourceMappingURL=GroupPicker.js.map

package/lib/controls/groupPicker/GroupPicker.js.map

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

package/lib/controls/groupPicker/GroupPickerStyles.d.ts

@@ -0,0 +1,21 @@
+import { IButtonStyles } from "@fluentui/react/lib/Button";
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
+import { IBasePickerStyles } from "@fluentui/react/lib/Pickers";
+export declare const useGroupPickerStyles: (themeVariant: IReadonlyTheme | undefined) => {
+    componentClasses: import("@fluentui/react/lib/Styling").IProcessedStyleSet<{
+        iconStyles: {
+            paddingLeft: number;
+            fontWeight: number;
+            color: string;
+        };
+        groupTypeIconM365: string;
+        groupTypeIconSecurity: string;
+        separator: string;
+    }>;
+    pickerStylesMulti: Partial<IBasePickerStyles>;
+    pickerStylesSingle: Partial<IBasePickerStyles>;
+    renderItemStylesSingle: Partial<import("@fluentui/foundation-legacy").IComponentStyles<import("@fluentui/react/lib/Stack").IStackSlots>>;
+    renderItemStylesMulti: Partial<import("@fluentui/foundation-legacy").IComponentStyles<import("@fluentui/react/lib/Stack").IStackSlots>>;
+    renderIconButtonRemoveStyles: Partial<IButtonStyles>;
+};
+//# sourceMappingURL=GroupPickerStyles.d.ts.map

package/lib/controls/groupPicker/GroupPickerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupPickerStyles.d.ts","sourceRoot":"","sources":["../../../src/controls/groupPicker/GroupPickerStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAGhE,eAAO,MAAM,oBAAoB,iBACjB,cAAc,GAAG,SAAS;;;;;;;;;;;;;;;;CA4JzC,CAAC"}

package/lib/controls/groupPicker/GroupPickerStyles.js

@@ -0,0 +1,143 @@
+import { mergeStyles, mergeStyleSets } from "@fluentui/react/lib/Styling";
+var theme = window.__themeState__.theme;
+export var useGroupPickerStyles = function (themeVariant) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
+    var renderIconButtonRemoveStyles = {
+        root: {
+            height: 26,
+            lineHeight: 26,
+        },
+    };
+    var renderItemStylesMulti = {
+        root: {
+            height: 26,
+            lineHeight: 26,
+            paddingLeft: 10,
+            marginLeft: 5,
+            marginBottom: 5,
+            cursor: "default",
+            backgroundColor: (_b = (_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.themeLighterAlt) !== null && _b !== void 0 ? _b : theme.themeLighterAlt,
+            ":hover": {
+                backgroundColor: theme.themeLighter,
+            },
+        },
+    };
+    var renderItemStylesSingle = {
+        root: {
+            height: 26,
+            lineHeight: 26,
+            paddingLeft: 10,
+            cursor: "default",
+            margin: 2,
+            backgroundColor: (_d = (_c = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _c === void 0 ? void 0 : _c.themeLighterAlt) !== null && _d !== void 0 ? _d : theme.themeLighterAlt,
+            ":hover": {
+                backgroundColor: (_f = (_e = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _e === void 0 ? void 0 : _e.themeLighter) !== null && _f !== void 0 ? _f : theme.themeLighter,
+            },
+        },
+    };
+    var pickerStylesSingle = {
+        root: {
+            width: " 100%",
+            borderRadius: 0,
+            marginTop: 0,
+        },
+        input: {
+            width: "100%",
+            backgroundColor: (_h = (_g = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _g === void 0 ? void 0 : _g.white) !== null && _h !== void 0 ? _h : theme.white,
+        },
+        text: {
+            borderStyle: "solid",
+            width: "100%",
+            borderWidth: 1,
+            backgroundColor: (_k = (_j = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _j === void 0 ? void 0 : _j.white) !== null && _k !== void 0 ? _k : theme.white,
+            borderRadius: 0,
+            borderColor: (_m = (_l = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _l === void 0 ? void 0 : _l.neutralQuaternaryAlt) !== null && _m !== void 0 ? _m : theme.neutralQuaternaryAlt,
+            ":focus": {
+                borderStyle: "solid",
+                borderWidth: 1,
+                borderColor: (_p = (_o = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _o === void 0 ? void 0 : _o.themePrimary) !== null && _p !== void 0 ? _p : theme.themePrimary,
+            },
+            ":hover": {
+                borderStyle: "solid",
+                borderWidth: 1,
+                borderColor: (_r = (_q = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _q === void 0 ? void 0 : _q.themePrimary) !== null && _r !== void 0 ? _r : theme.themePrimary,
+            },
+            ":after": {
+                borderWidth: 0,
+                borderRadius: 0,
+            },
+        },
+    };
+    var pickerStylesMulti = {
+        root: {
+            width: " 100%",
+            borderRadius: 0,
+        },
+        input: {
+            width: "100%",
+            backgroundColor: (_t = (_s = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _s === void 0 ? void 0 : _s.white) !== null && _t !== void 0 ? _t : theme.white,
+        },
+        itemsWrapper: {
+            padding: 3,
+        },
+        text: {
+            borderStyle: "solid",
+            width: "100%",
+            borderWidth: 1,
+            backgroundColor: (_v = (_u = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _u === void 0 ? void 0 : _u.white) !== null && _v !== void 0 ? _v : theme.white,
+            borderRadius: 0,
+            borderColor: (_x = (_w = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _w === void 0 ? void 0 : _w.neutralQuaternaryAlt) !== null && _x !== void 0 ? _x : theme.neutralQuaternaryAlt,
+            ":focus": {
+                borderStyle: "solid",
+                borderWidth: 1,
+                borderColor: (_z = (_y = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _y === void 0 ? void 0 : _y.themePrimary) !== null && _z !== void 0 ? _z : theme.themePrimary,
+            },
+            ":hover": {
+                borderStyle: "solid",
+                borderWidth: 1,
+                borderColor: (_1 = (_0 = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _0 === void 0 ? void 0 : _0.themePrimary) !== null && _1 !== void 0 ? _1 : theme.themePrimary,
+            },
+            ":after": {
+                borderStyle: "solid",
+                borderWidth: 1,
+                borderColor: (_3 = (_2 = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _2 === void 0 ? void 0 : _2.themePrimary) !== null && _3 !== void 0 ? _3 : theme.themePrimary,
+            },
+        },
+    };
+    var componentClasses = mergeStyleSets({
+        iconStyles: {
+            paddingLeft: 2,
+            fontWeight: 500,
+            color: (_5 = (_4 = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _4 === void 0 ? void 0 : _4.themePrimary) !== null && _5 !== void 0 ? _5 : theme === null || theme === void 0 ? void 0 : theme.themePrimary,
+        },
+        groupTypeIconM365: mergeStyles({
+            fontSize: 14,
+            marginLeft: 8,
+            fontWeight: 600,
+            color: (_7 = (_6 = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _6 === void 0 ? void 0 : _6.themeDark) !== null && _7 !== void 0 ? _7 : theme.themeDark,
+        }),
+        groupTypeIconSecurity: mergeStyles({
+            fontSize: 14,
+            marginLeft: 8,
+            fontWeight: 600,
+            color: (_9 = (_8 = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _8 === void 0 ? void 0 : _8.neutralPrimary) !== null && _9 !== void 0 ? _9 : theme.neutralPrimary,
+        }),
+        separator: mergeStyles({
+            marginTop: 25,
+            marginLeft: 20,
+            marginRight: 20,
+            borderBottomWidth: 1,
+            borderBottomColor: (_11 = (_10 = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _10 === void 0 ? void 0 : _10.neutralQuaternaryAlt) !== null && _11 !== void 0 ? _11 : theme.neutralQuaternaryAlt,
+            borderBottomStyle: "solid",
+        }),
+    });
+    return {
+        componentClasses: componentClasses,
+        pickerStylesMulti: pickerStylesMulti,
+        pickerStylesSingle: pickerStylesSingle,
+        renderItemStylesSingle: renderItemStylesSingle,
+        renderItemStylesMulti: renderItemStylesMulti,
+        renderIconButtonRemoveStyles: renderIconButtonRemoveStyles,
+    };
+};
+//# sourceMappingURL=GroupPickerStyles.js.map

package/lib/controls/groupPicker/GroupPickerStyles.js.map

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

package/lib/controls/groupPicker/IGroupPickerProps.d.ts

@@ -0,0 +1,18 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base";
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
+import { IBasePickerStyles, ITag } from "@fluentui/react/lib/Pickers";
+export type GroupTypeFilter = "All" | "M365" | "Security";
+export interface IGroupPickerProps {
+    appcontext: BaseComponentContext;
+    onSelectedGroups: (tagsList: ITag[]) => void;
+    selectedGroups: ITag[];
+    themeVariant?: IReadonlyTheme;
+    /** Filter groups by type. Defaults to "All". */
+    groupType?: GroupTypeFilter;
+    itemLimit?: number;
+    /** Optional mode indicates if multi-choice selections is allowed. Default is true. */
+    multiSelect?: boolean;
+    label?: string;
+    styles?: IBasePickerStyles;
+}
+//# sourceMappingURL=IGroupPickerProps.d.ts.map

package/lib/controls/groupPicker/IGroupPickerProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IGroupPickerProps.d.ts","sourceRoot":"","sources":["../../../src/controls/groupPicker/IGroupPickerProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,oBAAoB,CAAC;IACjC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,IAAI,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,gDAAgD;IAChD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B"}

package/lib/controls/groupPicker/IGroupPickerProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IGroupPickerProps.js.map

package/lib/controls/groupPicker/IGroupPickerProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IGroupPickerProps.js","sourceRoot":"","sources":["../../../src/controls/groupPicker/IGroupPickerProps.ts"],"names":[],"mappings":""}

package/lib/controls/groupPicker/IGroupPickerState.d.ts

@@ -0,0 +1,5 @@
+import { ITag } from "@fluentui/react/lib/Pickers";
+export interface IGroupPickerState {
+    savedSelectedGroups: ITag[];
+}
+//# sourceMappingURL=IGroupPickerState.d.ts.map

package/lib/controls/groupPicker/IGroupPickerState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IGroupPickerState.d.ts","sourceRoot":"","sources":["../../../src/controls/groupPicker/IGroupPickerState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEnD,MAAM,WAAW,iBAAiB;IAChC,mBAAmB,EAAE,IAAI,EAAE,CAAC;CAC7B"}

package/lib/controls/groupPicker/IGroupPickerState.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IGroupPickerState.js.map

package/lib/controls/groupPicker/IGroupPickerState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IGroupPickerState.js","sourceRoot":"","sources":["../../../src/controls/groupPicker/IGroupPickerState.ts"],"names":[],"mappings":""}

package/lib/controls/groupPicker/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./IGroupPickerState";
+export * from "./GroupPicker";
+export * from "./IGroupPickerProps";
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/groupPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/controls/groupPicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}

package/lib/controls/groupPicker/index.js

@@ -0,0 +1,4 @@
+export * from "./IGroupPickerState";
+export * from "./GroupPicker";
+export * from "./IGroupPickerProps";
+//# sourceMappingURL=index.js.map

package/lib/controls/groupPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/groupPicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}

package/lib/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useTeams';
+export * from './useGroups';
 //# sourceMappingURL=index.d.ts.map

package/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/lib/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useTeams';
+export * from './useGroups';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/lib/hooks/useGroups.d.ts

@@ -0,0 +1,7 @@
+import { ServiceScope } from "@microsoft/sp-core-library";
+import { IGroup } from "../common/model/IGroup";
+export declare const useGroups: (serviceScope: ServiceScope) => {
+    init: () => Promise<void>;
+    getGroups: (filter?: string) => Promise<IGroup[]>;
+};
+//# sourceMappingURL=useGroups.d.ts.map

package/lib/hooks/useGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGroups.d.ts","sourceRoot":"","sources":["../../src/hooks/useGroups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI1D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAMhD,eAAO,MAAM,SAAS,iBAAkB,YAAY;;yBAYhC,MAAM,KAAG,QAAQ,MAAM,EAAE,CAAC;CA4B7C,CAAC"}