first commit

node_modules/@fluentui/react/lib/components/SelectedItemsList/BaseSelectedItemsList.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Selection } from '../../Selection';
+import type { IBaseSelectedItemsList, IBaseSelectedItemsListProps } from './BaseSelectedItemsList.types';
+import type { IObjectWithKey } from '../../Utilities';
+import type { JSXElement } from '@fluentui/utilities';
+export interface IBaseSelectedItemsListState<T> {
+    items: T[];
+}
+export declare class BaseSelectedItemsList<T extends {}, P extends IBaseSelectedItemsListProps<T>> extends React.Component<P, IBaseSelectedItemsListState<T>> implements IBaseSelectedItemsList<T> {
+    static contextType: React.Context<import("@fluentui/react-window-provider").WindowProviderProps>;
+    context: any;
+    protected root: HTMLElement;
+    private _defaultSelection;
+    static getDerivedStateFromProps(newProps: IBaseSelectedItemsListProps<any>): IBaseSelectedItemsListState<any> | null;
+    constructor(basePickerProps: P);
+    get items(): T[];
+    addItems: (items: T[]) => void;
+    removeItemAt: (index: number) => void;
+    removeItem: (item: T) => void;
+    replaceItem: (itemToReplace: T, itemsToReplaceWith: T[]) => void;
+    removeItems: (itemsToRemove: any[]) => void;
+    removeSelectedItems(): void;
+    /**
+     * Controls what happens whenever there is an action that impacts the selected items.
+     * If selectedItems is provided, this will act as a controlled component and will not update its own state.
+     */
+    updateItems(items: T[], focusIndex?: number): void;
+    onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;
+    hasSelectedItems(): boolean;
+    componentDidUpdate(oldProps: P, oldState: IBaseSelectedItemsListState<IObjectWithKey>): void;
+    unselectAll(): void;
+    highlightedItems(): T[];
+    componentDidMount(): void;
+    protected get selection(): Selection;
+    render(): any;
+    protected renderItems: () => JSXElement[];
+    protected onSelectionChanged: () => void;
+    protected onChange(items?: T[]): void;
+    protected onItemChange: (changedItem: T, index: number) => void;
+    protected copyItems(items: T[]): void;
+    private _onSelectedItemsUpdated;
+    private _canRemoveItem;
+}

node_modules/@fluentui/react/lib/components/SelectedItemsList/BaseSelectedItemsList.js

@@ -0,0 +1,211 @@
+import { __extends } from "tslib";
+import * as React from 'react';
+import { Selection } from '../../Selection';
+import { initializeComponentRef } from '../../Utilities';
+import { WindowContext } from '@fluentui/react-window-provider';
+import { getDocumentEx } from '../../utilities/dom';
+var BaseSelectedItemsList = /** @class */ (function (_super) {
+    __extends(BaseSelectedItemsList, _super);
+    function BaseSelectedItemsList(basePickerProps) {
+        var _this = _super.call(this, basePickerProps) || this;
+        _this.addItems = function (items) {
+            var processedItems = _this.props.onItemSelected
+                ? _this.props.onItemSelected(items)
+                : items;
+            var processedItemObjects = processedItems;
+            var processedItemPromiseLikes = processedItems;
+            if (processedItemPromiseLikes && processedItemPromiseLikes.then) {
+                processedItemPromiseLikes.then(function (resolvedProcessedItems) {
+                    var newItems = _this.state.items.concat(resolvedProcessedItems);
+                    _this.updateItems(newItems);
+                });
+            }
+            else {
+                var newItems = _this.state.items.concat(processedItemObjects);
+                _this.updateItems(newItems);
+            }
+        };
+        _this.removeItemAt = function (index) {
+            var items = _this.state.items;
+            if (_this._canRemoveItem(items[index])) {
+                if (index > -1) {
+                    if (_this.props.onItemsDeleted) {
+                        _this.props.onItemsDeleted([items[index]]);
+                    }
+                    var newItems = items.slice(0, index).concat(items.slice(index + 1));
+                    _this.updateItems(newItems);
+                }
+            }
+        };
+        _this.removeItem = function (item) {
+            var items = _this.state.items;
+            var index = items.indexOf(item);
+            _this.removeItemAt(index);
+        };
+        _this.replaceItem = function (itemToReplace, itemsToReplaceWith) {
+            var items = _this.state.items;
+            var index = items.indexOf(itemToReplace);
+            if (index > -1) {
+                var newItems = items
+                    .slice(0, index)
+                    .concat(itemsToReplaceWith)
+                    .concat(items.slice(index + 1));
+                _this.updateItems(newItems);
+            }
+        };
+        _this.removeItems = function (itemsToRemove) {
+            var items = _this.state.items;
+            var itemsCanRemove = itemsToRemove.filter(function (item) { return _this._canRemoveItem(item); });
+            var newItems = items.filter(function (item) { return itemsCanRemove.indexOf(item) === -1; });
+            var firstItemToRemove = itemsCanRemove[0];
+            var index = items.indexOf(firstItemToRemove);
+            if (_this.props.onItemsDeleted) {
+                _this.props.onItemsDeleted(itemsCanRemove);
+            }
+            _this.updateItems(newItems, index);
+        };
+        _this.onCopy = function (ev) {
+            if (_this.props.onCopyItems && _this.selection.getSelectedCount() > 0) {
+                var selectedItems = _this.selection.getSelection();
+                _this.copyItems(selectedItems);
+            }
+        };
+        _this.renderItems = function () {
+            var removeButtonAriaLabel = _this.props.removeButtonAriaLabel;
+            var onRenderItem = _this.props.onRenderItem;
+            var items = _this.state.items;
+            return items.map(function (item, index) {
+                return onRenderItem({
+                    item: item,
+                    index: index,
+                    key: item.key ? item.key : index,
+                    selected: _this.selection.isIndexSelected(index),
+                    onRemoveItem: function () { return _this.removeItem(item); },
+                    onItemChange: _this.onItemChange,
+                    removeButtonAriaLabel: removeButtonAriaLabel,
+                    onCopyItem: function (itemToCopy) { return _this.copyItems([itemToCopy]); },
+                });
+            });
+        };
+        _this.onSelectionChanged = function () {
+            _this.forceUpdate();
+        };
+        _this.onItemChange = function (changedItem, index) {
+            var items = _this.state.items;
+            if (index >= 0) {
+                var newItems = items;
+                newItems[index] = changedItem;
+                _this.updateItems(newItems);
+            }
+        };
+        initializeComponentRef(_this);
+        var items = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
+        _this.state = {
+            items: items,
+        };
+        // Create a new selection if one is not specified
+        _this._defaultSelection = new Selection({ onSelectionChanged: _this.onSelectionChanged });
+        return _this;
+    }
+    BaseSelectedItemsList.getDerivedStateFromProps = function (newProps) {
+        if (newProps.selectedItems) {
+            return { items: newProps.selectedItems };
+        }
+        return null;
+    };
+    Object.defineProperty(BaseSelectedItemsList.prototype, "items", {
+        get: function () {
+            return this.state.items;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BaseSelectedItemsList.prototype.removeSelectedItems = function () {
+        if (this.state.items.length && this.selection.getSelectedCount() > 0) {
+            this.removeItems(this.selection.getSelection());
+        }
+    };
+    /**
+     * Controls what happens whenever there is an action that impacts the selected items.
+     * If selectedItems is provided, this will act as a controlled component and will not update its own state.
+     */
+    BaseSelectedItemsList.prototype.updateItems = function (items, focusIndex) {
+        var _this = this;
+        if (this.props.selectedItems) {
+            // If the component is a controlled component then the controlling component will need to pass the new props
+            this.onChange(items);
+        }
+        else {
+            this.setState({ items: items }, function () {
+                _this._onSelectedItemsUpdated(items, focusIndex);
+            });
+        }
+    };
+    BaseSelectedItemsList.prototype.hasSelectedItems = function () {
+        return this.selection.getSelectedCount() > 0;
+    };
+    BaseSelectedItemsList.prototype.componentDidUpdate = function (oldProps, oldState) {
+        if (this.state.items && this.state.items !== oldState.items) {
+            this.selection.setItems(this.state.items);
+        }
+    };
+    BaseSelectedItemsList.prototype.unselectAll = function () {
+        this.selection.setAllSelected(false);
+    };
+    BaseSelectedItemsList.prototype.highlightedItems = function () {
+        return this.selection.getSelection();
+    };
+    BaseSelectedItemsList.prototype.componentDidMount = function () {
+        this.selection.setItems(this.state.items);
+    };
+    Object.defineProperty(BaseSelectedItemsList.prototype, "selection", {
+        get: function () {
+            var _a;
+            return (_a = this.props.selection) !== null && _a !== void 0 ? _a : this._defaultSelection;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BaseSelectedItemsList.prototype.render = function () {
+        return this.renderItems();
+    };
+    BaseSelectedItemsList.prototype.onChange = function (items) {
+        if (this.props.onChange) {
+            this.props.onChange(items);
+        }
+    };
+    BaseSelectedItemsList.prototype.copyItems = function (items) {
+        if (this.props.onCopyItems) {
+            var copyText = this.props.onCopyItems(items);
+            var doc = getDocumentEx(this.context); // equivalent to previous behavior of directly using `document`
+            var copyInput = doc.createElement('input');
+            doc.body.appendChild(copyInput);
+            try {
+                // Try to copy the text directly to the clipboard
+                copyInput.value = copyText;
+                copyInput.select();
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                if (!doc.execCommand('copy')) {
+                    // The command failed. Fallback to the method below.
+                    throw new Error();
+                }
+            }
+            catch (err) {
+                // no op
+            }
+            finally {
+                doc.body.removeChild(copyInput);
+            }
+        }
+    };
+    BaseSelectedItemsList.prototype._onSelectedItemsUpdated = function (items, focusIndex) {
+        this.onChange(items);
+    };
+    BaseSelectedItemsList.prototype._canRemoveItem = function (item) {
+        return !this.props.canRemoveItem || this.props.canRemoveItem(item);
+    };
+    BaseSelectedItemsList.contextType = WindowContext;
+    return BaseSelectedItemsList;
+}(React.Component));
+export { BaseSelectedItemsList };
+//# sourceMappingURL=BaseSelectedItemsList.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/BaseSelectedItemsList.types.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ValidationState } from '../../Pickers';
+import { Selection } from '../../Selection';
+import type { IPickerItemProps, ISuggestionModel } from '../../Pickers';
+import type { IRefObject } from '../../Utilities';
+import type { JSXElement } from '@fluentui/utilities';
+export interface IBaseSelectedItemsList<T> {
+    /** Gets the current value of the input. */
+    items: T[] | undefined;
+    addItems: (items: T[]) => void;
+}
+export interface ISelectedItemProps<T> extends IPickerItemProps<T> {
+    onCopyItem: (item: T) => void;
+}
+export interface IBaseSelectedItemsListProps<T> extends React.ClassAttributes<any> {
+    componentRef?: IRefObject<IBaseSelectedItemsList<T>>;
+    /**
+     * The selection
+     */
+    selection?: Selection;
+    /**
+     * A callback for when items are copied
+     */
+    onCopyItems?: (items: T[]) => string;
+    /**
+     * Function that specifies how the selected item will appear.
+     */
+    onRenderItem?: (props: ISelectedItemProps<T>) => JSXElement;
+    /**
+     * Initial items that have already been selected and should appear in the people picker.
+     */
+    defaultSelectedItems?: T[];
+    /**
+     * A callback for when the selected list of items changes.
+     */
+    onChange?: (items?: T[]) => void;
+    /**
+     * Function that specifies how arbitrary text entered into the well is handled.
+     */
+    createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T>;
+    /**
+     * A callback to process a selection after the user selects something from the picker.
+     */
+    onItemSelected?: (selectedItem?: T | T[]) => T | PromiseLike<T> | T[] | PromiseLike<T[]>;
+    /**
+     * The items that the base picker should currently display as selected.
+     * If this is provided then the picker will act as a controlled component.
+     */
+    selectedItems?: T[];
+    /**
+     * Aria label for the 'X' button in the selected item component.
+     * @defaultvalue ''
+     */
+    removeButtonAriaLabel?: string;
+    /**
+     * A callback when an item is deleted
+     * @deprecated Use `onItemsDeleted` instead.
+     */
+    onItemDeleted?: (deletedItem: T) => void;
+    /**
+     * A callback when and item or items are deleted
+     */
+    onItemsDeleted?: (deletedItems: T[]) => void;
+    /**
+     * A callback on whether this item can be deleted
+     */
+    canRemoveItem?: (item: T) => boolean;
+}

node_modules/@fluentui/react/lib/components/SelectedItemsList/BaseSelectedItemsList.types.js

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

node_modules/@fluentui/react/lib/components/SelectedItemsList/BaseSelectedItemsList.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelectedItemsList.types.js","sourceRoot":"../src/","sources":["components/SelectedItemsList/BaseSelectedItemsList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ValidationState } from '../../Pickers';\nimport { Selection } from '../../Selection';\nimport type { IPickerItemProps, ISuggestionModel } from '../../Pickers';\nimport type { IRefObject } from '../../Utilities';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nexport interface IBaseSelectedItemsList<T> {\n  /** Gets the current value of the input. */\n  items: T[] | undefined;\n\n  addItems: (items: T[]) => void;\n}\n\nexport interface ISelectedItemProps<T> extends IPickerItemProps<T> {\n  onCopyItem: (item: T) => void;\n}\n\n// Type T is the type of the item that is displayed\n// For example, if the picker is displaying persona's than type T could either be of Persona or IPersona props\nexport interface IBaseSelectedItemsListProps<T> extends React.ClassAttributes<any> {\n  componentRef?: IRefObject<IBaseSelectedItemsList<T>>;\n\n  /**\n   * The selection\n   */\n  selection?: Selection;\n  /**\n   * A callback for when items are copied\n   */\n  onCopyItems?: (items: T[]) => string;\n  /**\n   * Function that specifies how the selected item will appear.\n   */\n\n  onRenderItem?: (props: ISelectedItemProps<T>) => JSXElement;\n  /**\n   * Initial items that have already been selected and should appear in the people picker.\n   */\n  defaultSelectedItems?: T[];\n  /**\n   * A callback for when the selected list of items changes.\n   */\n  onChange?: (items?: T[]) => void;\n  /**\n   * Function that specifies how arbitrary text entered into the well is handled.\n   */\n  createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T>;\n  /**\n   * A callback to process a selection after the user selects something from the picker.\n   */\n  onItemSelected?: (selectedItem?: T | T[]) => T | PromiseLike<T> | T[] | PromiseLike<T[]>;\n  /**\n   * The items that the base picker should currently display as selected.\n   * If this is provided then the picker will act as a controlled component.\n   */\n  selectedItems?: T[];\n\n  /**\n   * Aria label for the 'X' button in the selected item component.\n   * @defaultvalue ''\n   */\n  removeButtonAriaLabel?: string;\n  /**\n   * A callback when an item is deleted\n   * @deprecated Use `onItemsDeleted` instead.\n   */\n  onItemDeleted?: (deletedItem: T) => void;\n\n  /**\n   * A callback when and item or items are deleted\n   */\n  onItemsDeleted?: (deletedItems: T[]) => void;\n\n  /**\n   * A callback on whether this item can be deleted\n   */\n  canRemoveItem?: (item: T) => boolean;\n}\n"]}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IPeoplePickerItemState } from './ExtendedSelectedItem';
+import type { IEditingSelectedPeopleItemProps } from './EditingItem.types';
+import type { JSXElement } from '@fluentui/utilities';
+export declare class EditingItem extends React.Component<IEditingSelectedPeopleItemProps, IPeoplePickerItemState> {
+    private _editingInput;
+    private _editingFloatingPicker;
+    constructor(props: IEditingSelectedPeopleItemProps);
+    componentDidMount(): void;
+    render(): JSXElement;
+    private _renderEditingSuggestions;
+    private _resolveInputRef;
+    private _onInputClick;
+    private _onInputBlur;
+    private _onInputChange;
+    private _onInputKeyDown;
+    private _onSuggestionSelected;
+}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.js

@@ -0,0 +1,79 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { KeyCodes, getId, getNativeProps, inputProperties, classNamesFunction, initializeComponentRef, } from '../../../../Utilities';
+import { getStyles } from './EditingItem.styles';
+var EditingItem = /** @class */ (function (_super) {
+    __extends(EditingItem, _super);
+    function EditingItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this._editingFloatingPicker = React.createRef();
+        _this._renderEditingSuggestions = function () {
+            var FloatingPicker = _this.props.onRenderFloatingPicker;
+            var floatingPickerProps = _this.props.floatingPickerProps;
+            if (!FloatingPicker || !floatingPickerProps) {
+                return React.createElement(React.Fragment, null);
+            }
+            return (React.createElement(FloatingPicker, __assign({ componentRef: _this._editingFloatingPicker, onChange: _this._onSuggestionSelected, inputElement: _this._editingInput, selectedItems: [] }, floatingPickerProps)));
+        };
+        _this._resolveInputRef = function (ref) {
+            _this._editingInput = ref;
+            _this.forceUpdate(function () {
+                _this._editingInput.focus();
+            });
+        };
+        _this._onInputClick = function () {
+            _this._editingFloatingPicker.current && _this._editingFloatingPicker.current.showPicker(true /*updatevalue*/);
+        };
+        _this._onInputBlur = function (ev) {
+            if (_this._editingFloatingPicker.current && ev.relatedTarget !== null) {
+                var target = ev.relatedTarget;
+                if (target.className.indexOf('ms-Suggestions-itemButton') === -1 &&
+                    target.className.indexOf('ms-Suggestions-sectionButton') === -1) {
+                    _this._editingFloatingPicker.current.forceResolveSuggestion();
+                }
+            }
+        };
+        _this._onInputChange = function (ev) {
+            var value = ev.target.value;
+            if (value === '') {
+                if (_this.props.onRemoveItem) {
+                    _this.props.onRemoveItem();
+                }
+            }
+            else {
+                _this._editingFloatingPicker.current && _this._editingFloatingPicker.current.onQueryStringChanged(value);
+            }
+        };
+        _this._onSuggestionSelected = function (item) {
+            _this.props.onEditingComplete(_this.props.item, item);
+        };
+        initializeComponentRef(_this);
+        _this.state = { contextualMenuVisible: false };
+        return _this;
+    }
+    EditingItem.prototype.componentDidMount = function () {
+        var getEditingItemText = this.props.getEditingItemText;
+        var itemText = getEditingItemText(this.props.item);
+        this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(itemText);
+        this._editingInput.value = itemText;
+        this._editingInput.focus();
+    };
+    EditingItem.prototype.render = function () {
+        var itemId = getId();
+        var nativeProps = getNativeProps(this.props, inputProperties);
+        var getClassNames = classNamesFunction();
+        var classNames = getClassNames(getStyles);
+        return (React.createElement("div", { "aria-labelledby": 'editingItemPersona-' + itemId, className: classNames.root },
+            React.createElement("input", __assign({ autoCapitalize: 'off', autoComplete: 'off' }, nativeProps, { ref: this._resolveInputRef, onChange: this._onInputChange, onKeyDown: this._onInputKeyDown, onBlur: this._onInputBlur, onClick: this._onInputClick, "data-lpignore": true, className: classNames.input, id: itemId })),
+            this._renderEditingSuggestions()));
+    };
+    EditingItem.prototype._onInputKeyDown = function (ev) {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        if (ev.which === KeyCodes.backspace || ev.which === KeyCodes.del) {
+            ev.stopPropagation();
+        }
+    };
+    return EditingItem;
+}(React.Component));
+export { EditingItem };
+//# sourceMappingURL=EditingItem.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss.d.ts

@@ -0,0 +1,2 @@
+export declare const editingInput = "editingInput_7907ca76";
+export declare const editingContainer = "editingContainer_7907ca76";

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import { loadStyles } from '@microsoft/load-themed-styles';
+loadStyles([{ "rawString": ".editingInput_7907ca76{border:0;outline:0;width:100%}.editingInput_7907ca76::-ms-clear{display:none}.editingContainer_7907ca76{margin:4px}" }]);
+export var editingInput = "editingInput_7907ca76";
+export var editingContainer = "editingContainer_7907ca76";
+//# sourceMappingURL=EditingItem.scss.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditingItem.scss.js","sourceRoot":"../src/","sources":["components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,UAAU,CAAC,CAAC,EAAC,WAAW,EAAC,4IAA4I,EAAC,CAAC,CAAC,CAAC;AACzK,MAAM,CAAC,IAAM,YAAY,GAAG,uBAAuB,CAAC;AACpD,MAAM,CAAC,IAAM,gBAAgB,GAAG,2BAA2B,CAAC","sourcesContent":["/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{\"rawString\":\".editingInput_7907ca76{border:0;outline:0;width:100%}.editingInput_7907ca76::-ms-clear{display:none}.editingContainer_7907ca76{margin:4px}\"}]);\nexport const editingInput = \"editingInput_7907ca76\";\nexport const editingContainer = \"editingContainer_7907ca76\";"]}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IEditingSelectedPeopleItemStyles, IEditingSelectedPeopleItemStylesProps } from './EditingItem.types';
+export declare const getStyles: (prop: IEditingSelectedPeopleItemStylesProps) => IEditingSelectedPeopleItemStyles;

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.js

@@ -0,0 +1,37 @@
+import { getGlobalClassNames, getTheme } from '../../../../Styling';
+var GlobalClassNames = {
+    root: 'ms-EditingItem',
+    input: 'ms-EditingItem-input',
+};
+export var getStyles = function (prop) {
+    var theme = getTheme();
+    if (!theme) {
+        throw new Error('theme is undefined or null in Editing item getStyles function.');
+    }
+    var semanticColors = theme.semanticColors;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    return {
+        root: [
+            classNames.root,
+            {
+                margin: '4px',
+            },
+        ],
+        input: [
+            classNames.input,
+            {
+                border: '0px',
+                outline: 'none',
+                width: '100%',
+                backgroundColor: semanticColors.inputBackground,
+                color: semanticColors.inputText,
+                selectors: {
+                    '::-ms-clear': {
+                        display: 'none',
+                    },
+                },
+            },
+        ],
+    };
+};
+//# sourceMappingURL=EditingItem.styles.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditingItem.styles.js","sourceRoot":"../src/","sources":["components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGpE,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,IAA2C;IACnE,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC,CAAC;IACpF,CAAC;IAEO,IAAA,cAAc,GAAK,KAAK,eAAV,CAAW;IACjC,IAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,CAAC,IAAI;YACf;gBACE,MAAM,EAAE,KAAK;aACd;SACF;QACD,KAAK,EAAE;YACL,UAAU,CAAC,KAAK;YAChB;gBACE,MAAM,EAAE,KAAK;gBACb,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,eAAe,EAAE,cAAc,CAAC,eAAe;gBAC/C,KAAK,EAAE,cAAc,CAAC,SAAS;gBAC/B,SAAS,EAAE;oBACT,aAAa,EAAE;wBACb,OAAO,EAAE,MAAM;qBAChB;iBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { getGlobalClassNames, getTheme } from '../../../../Styling';\nimport type { IEditingSelectedPeopleItemStyles, IEditingSelectedPeopleItemStylesProps } from './EditingItem.types';\n\nconst GlobalClassNames = {\n  root: 'ms-EditingItem',\n  input: 'ms-EditingItem-input',\n};\n\nexport const getStyles = (prop: IEditingSelectedPeopleItemStylesProps): IEditingSelectedPeopleItemStyles => {\n  const theme = getTheme();\n\n  if (!theme) {\n    throw new Error('theme is undefined or null in Editing item getStyles function.');\n  }\n\n  const { semanticColors } = theme;\n  const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n  return {\n    root: [\n      classNames.root,\n      {\n        margin: '4px',\n      },\n    ],\n    input: [\n      classNames.input,\n      {\n        border: '0px',\n        outline: 'none',\n        width: '100%',\n        backgroundColor: semanticColors.inputBackground,\n        color: semanticColors.inputText,\n        selectors: {\n          '::-ms-clear': {\n            display: 'none',\n          },\n        },\n      },\n    ],\n  };\n};\n"]}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { IBaseFloatingPickerProps } from '../../../../FloatingPicker';
+import type { ISelectedPeopleItemProps, IExtendedPersonaProps } from '../SelectedPeopleList';
+import type { IPersonaProps } from '../../../../Persona';
+import type { IStyle } from '../../../../Styling';
+export interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps {
+    onEditingComplete: (oldItem: any, newItem: any) => void;
+    onRenderFloatingPicker?: React.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
+    floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
+    getEditingItemText?: (item: IExtendedPersonaProps) => string;
+}
+export interface IEditingSelectedPeopleItemStylesProps {
+}
+export interface IEditingSelectedPeopleItemStyles {
+    root: IStyle;
+    input: IStyle;
+}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.js

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

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditingItem.types.js","sourceRoot":"../src/","sources":["components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IBaseFloatingPickerProps } from '../../../../FloatingPicker';\nimport type { ISelectedPeopleItemProps, IExtendedPersonaProps } from '../SelectedPeopleList';\nimport type { IPersonaProps } from '../../../../Persona';\nimport type { IStyle } from '../../../../Styling';\n\nexport interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps {\n  onEditingComplete: (oldItem: any, newItem: any) => void;\n  onRenderFloatingPicker?: React.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;\n  floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;\n  getEditingItemText?: (item: IExtendedPersonaProps) => string;\n}\n\nexport interface IEditingSelectedPeopleItemStylesProps {}\n\nexport interface IEditingSelectedPeopleItemStyles {\n  root: IStyle;\n  input: IStyle;\n}\n"]}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ISelectedPeopleItemProps } from '../SelectedPeopleList';
+import type { JSXElement } from '@fluentui/utilities';
+export interface IPeoplePickerItemState {
+    contextualMenuVisible: boolean;
+}
+export declare class ExtendedSelectedItem extends React.Component<ISelectedPeopleItemProps, IPeoplePickerItemState> {
+    protected persona: React.RefObject<HTMLDivElement | null>;
+    constructor(props: ISelectedPeopleItemProps);
+    render(): JSXElement;
+    private _onClickIconButton;
+}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.js

@@ -0,0 +1,43 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { IconButton } from '../../../../Button';
+import { css, getId, initializeComponentRef } from '../../../../Utilities';
+import { Persona, PersonaSize } from '../../../../Persona';
+import * as stylesImport from './ExtendedSelectedItem.scss';
+var styles = stylesImport;
+var ExtendedSelectedItem = /** @class */ (function (_super) {
+    __extends(ExtendedSelectedItem, _super);
+    function ExtendedSelectedItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.persona = React.createRef();
+        initializeComponentRef(_this);
+        _this.state = { contextualMenuVisible: false };
+        return _this;
+    }
+    ExtendedSelectedItem.prototype.render = function () {
+        var _a, _b;
+        var _c = this.props, item = _c.item, onExpandItem = _c.onExpandItem, onRemoveItem = _c.onRemoveItem, removeButtonAriaLabel = _c.removeButtonAriaLabel, index = _c.index, selected = _c.selected;
+        var itemId = getId();
+        return (React.createElement("div", { ref: this.persona, className: css('ms-PickerPersona-container', styles.personaContainer, (_a = {}, _a['is-selected ' + styles.personaContainerIsSelected] = selected, _a), (_b = {}, _b['is-invalid ' + styles.validationError] = !item.isValid, _b)), "data-is-focusable": true, "data-is-sub-focuszone": true, "data-selection-index": index, role: 'listitem', "aria-labelledby": 'selectedItemPersona-' + itemId },
+            React.createElement("div", { hidden: !item.canExpand || onExpandItem === undefined },
+                React.createElement(IconButton, { onClick: this._onClickIconButton(onExpandItem), iconProps: { iconName: 'Add', style: { fontSize: '14px' } }, className: css('ms-PickerItem-removeButton', styles.expandButton, styles.actionButton), ariaLabel: removeButtonAriaLabel })),
+            React.createElement("div", { className: css(styles.personaWrapper) },
+                React.createElement("div", { className: css('ms-PickerItem-content', styles.itemContent), id: 'selectedItemPersona-' + itemId },
+                    React.createElement(Persona, __assign({}, item, { 
+                        // eslint-disable-next-line @typescript-eslint/no-deprecated
+                        onRenderCoin: this.props.renderPersonaCoin, onRenderPrimaryText: this.props.renderPrimaryText, size: PersonaSize.size32 }))),
+                React.createElement(IconButton, { onClick: this._onClickIconButton(onRemoveItem), iconProps: { iconName: 'Cancel', style: { fontSize: '14px' } }, className: css('ms-PickerItem-removeButton', styles.removeButton, styles.actionButton), ariaLabel: removeButtonAriaLabel }))));
+    };
+    ExtendedSelectedItem.prototype._onClickIconButton = function (action) {
+        return function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            if (action) {
+                action();
+            }
+        };
+    };
+    return ExtendedSelectedItem;
+}(React.Component));
+export { ExtendedSelectedItem };
+//# sourceMappingURL=ExtendedSelectedItem.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss.d.ts

@@ -0,0 +1,11 @@
+export declare const personaContainer = "personaContainer_6625fd9a";
+export declare const hover = "hover_6625fd9a";
+export declare const actionButton = "actionButton_6625fd9a";
+export declare const personaContainerIsSelected = "personaContainerIsSelected_6625fd9a";
+export declare const validationError = "validationError_6625fd9a";
+export declare const itemContent = "itemContent_6625fd9a";
+export declare const removeButton = "removeButton_6625fd9a";
+export declare const expandButton = "expandButton_6625fd9a";
+export declare const personaWrapper = "personaWrapper_6625fd9a";
+export declare const personaDetails = "personaDetails_6625fd9a";
+export declare const itemContainer = "itemContainer_6625fd9a";

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+import { loadStyles } from '@microsoft/load-themed-styles';
+loadStyles([{ "rawString": ".personaContainer_6625fd9a{border-radius:15px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:" }, { "theme": "themeLighterAlt", "defaultValue": "#eff6fc" }, { "rawString": ";margin:4px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;position:relative}.personaContainer_6625fd9a::-moz-focus-inner{border:0}.personaContainer_6625fd9a{outline:transparent}.personaContainer_6625fd9a{position:relative}.ms-Fabric--isFocusVisible .personaContainer_6625fd9a:focus:after{-webkit-box-sizing:border-box;box-sizing:border-box;content:\"\";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;pointer-events:none;border:1px solid " }, { "theme": "focusBorder", "defaultValue": "#605e5c" }, { "rawString": ";border-radius:0}.personaContainer_6625fd9a .ms-Persona-primaryText{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";font-size:14px;font-weight:400}.personaContainer_6625fd9a .ms-Persona-primaryText.hover_6625fd9a{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.personaContainer_6625fd9a .ms-Persona-primaryText{color:HighlightText}}.personaContainer_6625fd9a .actionButton_6625fd9a:hover{background:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.personaContainer_6625fd9a .actionButton_6625fd9a .ms-Button-icon{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.personaContainer_6625fd9a .actionButton_6625fd9a .ms-Button-icon{color:HighlightText}}.personaContainer_6625fd9a:hover{background:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.personaContainer_6625fd9a:hover .ms-Persona-primaryText{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";font-size:14px;font-weight:400}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.personaContainer_6625fd9a:hover .ms-Persona-primaryText{color:HighlightText}}.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a{background:" }, { "theme": "themePrimary", "defaultValue": "#0078d4" }, { "rawString": "}.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a .ms-Persona-primaryText{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a .ms-Persona-primaryText{color:HighlightText}}.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a .actionButton_6625fd9a{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a .actionButton_6625fd9a .ms-Button-icon{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a .actionButton_6625fd9a .ms-Button-icon:hover{background:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a .actionButton_6625fd9a .ms-Button-icon{color:HighlightText}}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.personaContainer_6625fd9a.personaContainerIsSelected_6625fd9a{border-color:Highlight;background:Highlight;-ms-high-contrast-adjust:none}}.personaContainer_6625fd9a.validationError_6625fd9a .ms-Persona-primaryText{color:" }, { "theme": "red", "defaultValue": "#e81123" }, { "rawString": "}.personaContainer_6625fd9a.validationError_6625fd9a .ms-Persona-initials{font-size:20px}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.personaContainer_6625fd9a{border:1px solid WindowText}}.personaContainer_6625fd9a .itemContent_6625fd9a{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:0;max-width:100%}.personaContainer_6625fd9a .removeButton_6625fd9a{border-radius:15px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:33px;height:33px;-ms-flex-preferred-size:32px;flex-basis:32px}.personaContainer_6625fd9a .expandButton_6625fd9a{border-radius:15px 0 0 15px;height:33px;width:44px;padding-right:16px;position:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:-17px}.personaContainer_6625fd9a .personaWrapper_6625fd9a{position:relative;display:inherit}.personaContainer_6625fd9a .personaWrapper_6625fd9a .ms-Persona-details{padding:0 8px}.personaContainer_6625fd9a .personaDetails_6625fd9a{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.itemContainer_6625fd9a{display:inline-block;vertical-align:top}" }]);
+export var personaContainer = "personaContainer_6625fd9a";
+export var hover = "hover_6625fd9a";
+export var actionButton = "actionButton_6625fd9a";
+export var personaContainerIsSelected = "personaContainerIsSelected_6625fd9a";
+export var validationError = "validationError_6625fd9a";
+export var itemContent = "itemContent_6625fd9a";
+export var removeButton = "removeButton_6625fd9a";
+export var expandButton = "expandButton_6625fd9a";
+export var personaWrapper = "personaWrapper_6625fd9a";
+export var personaDetails = "personaDetails_6625fd9a";
+export var itemContainer = "itemContainer_6625fd9a";
+//# sourceMappingURL=ExtendedSelectedItem.scss.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { IBaseProps } from '../../../../Utilities';
+import type { IExtendedPersonaProps } from '../SelectedPeopleList';
+import type { IContextualMenuItem } from '../../../../ContextualMenu';
+import type { JSXElement } from '@fluentui/utilities';
+export interface IPeoplePickerItemState {
+    contextualMenuVisible: boolean;
+}
+export interface ISelectedItemWithContextMenuProps extends IBaseProps {
+    renderedItem: JSXElement;
+    beginEditing?: (item: IExtendedPersonaProps) => void;
+    menuItems: IContextualMenuItem[];
+    item: IExtendedPersonaProps;
+}
+export declare class SelectedItemWithContextMenu extends React.Component<ISelectedItemWithContextMenuProps, IPeoplePickerItemState> {
+    protected itemElement: React.RefObject<HTMLDivElement | null>;
+    constructor(props: ISelectedItemWithContextMenuProps);
+    render(): JSXElement;
+    private _onClick;
+    private _onCloseContextualMenu;
+}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.js

@@ -0,0 +1,34 @@
+import { __extends } from "tslib";
+import * as React from 'react';
+import { initializeComponentRef } from '../../../../Utilities';
+import { ContextualMenu, DirectionalHint } from '../../../../ContextualMenu';
+var SelectedItemWithContextMenu = /** @class */ (function (_super) {
+    __extends(SelectedItemWithContextMenu, _super);
+    function SelectedItemWithContextMenu(props) {
+        var _this = _super.call(this, props) || this;
+        _this.itemElement = React.createRef();
+        _this._onClick = function (ev) {
+            ev.preventDefault();
+            if (_this.props.beginEditing && !_this.props.item.isValid) {
+                _this.props.beginEditing(_this.props.item);
+            }
+            else {
+                _this.setState({ contextualMenuVisible: true });
+            }
+        };
+        _this._onCloseContextualMenu = function (ev) {
+            _this.setState({ contextualMenuVisible: false });
+        };
+        initializeComponentRef(_this);
+        _this.state = { contextualMenuVisible: false };
+        return _this;
+    }
+    SelectedItemWithContextMenu.prototype.render = function () {
+        return (React.createElement("div", { ref: this.itemElement, onContextMenu: this._onClick },
+            this.props.renderedItem,
+            this.state.contextualMenuVisible ? (React.createElement(ContextualMenu, { items: this.props.menuItems, shouldFocusOnMount: true, target: this.itemElement.current, onDismiss: this._onCloseContextualMenu, directionalHint: DirectionalHint.bottomLeftEdge })) : null));
+    };
+    return SelectedItemWithContextMenu;
+}(React.Component));
+export { SelectedItemWithContextMenu };
+//# sourceMappingURL=SelectedItemWithContextMenu.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedItemWithContextMenu.js","sourceRoot":"../src/","sources":["components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAkB7E;IAAiD,+CAGhD;IAGC,qCAAY,KAAwC;QAClD,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAHL,iBAAW,GAA2C,KAAK,CAAC,SAAS,EAAkB,CAAC;QA0B1F,cAAQ,GAAG,UAAC,EAAiC;YACnD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,KAAI,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACxD,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACN,KAAI,CAAC,QAAQ,CAAC,EAAE,qBAAqB,EAAE,IAAI,EAAE,CAAC,CAAC;YACjD,CAAC;QACH,CAAC,CAAC;QAEM,4BAAsB,GAAG,UAAC,EAA0C;YAC1E,KAAI,CAAC,QAAQ,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;QAhCA,sBAAsB,CAAC,KAAI,CAAC,CAAC;QAC7B,KAAI,CAAC,KAAK,GAAG,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC;;IAChD,CAAC;IAEM,4CAAM,GAAb;QACE,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ;YACrD,IAAI,CAAC,KAAK,CAAC,YAAY;YACvB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAClC,oBAAC,cAAc,IACb,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC3B,kBAAkB,EAAE,IAAI,EACxB,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAChC,SAAS,EAAE,IAAI,CAAC,sBAAsB,EACtC,eAAe,EAAE,eAAe,CAAC,cAAc,GAC/C,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;IACJ,CAAC;IAcH,kCAAC;AAAD,CAAC,AA1CD,CAAiD,KAAK,CAAC,SAAS,GA0C/D","sourcesContent":["import * as React from 'react';\nimport { initializeComponentRef } from '../../../../Utilities';\nimport { ContextualMenu, DirectionalHint } from '../../../../ContextualMenu';\nimport type { IBaseProps } from '../../../../Utilities';\nimport type { IExtendedPersonaProps } from '../SelectedPeopleList';\nimport type { IContextualMenuItem } from '../../../../ContextualMenu';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nexport interface IPeoplePickerItemState {\n  contextualMenuVisible: boolean;\n}\n\nexport interface ISelectedItemWithContextMenuProps extends IBaseProps {\n  renderedItem: JSXElement;\n  beginEditing?: (item: IExtendedPersonaProps) => void;\n  menuItems: IContextualMenuItem[];\n  item: IExtendedPersonaProps;\n}\n\nexport class SelectedItemWithContextMenu extends React.Component<\n  ISelectedItemWithContextMenuProps,\n  IPeoplePickerItemState\n> {\n  protected itemElement: React.RefObject<HTMLDivElement | null> = React.createRef<HTMLDivElement>();\n\n  constructor(props: ISelectedItemWithContextMenuProps) {\n    super(props);\n\n    initializeComponentRef(this);\n    this.state = { contextualMenuVisible: false };\n  }\n\n  public render(): JSXElement {\n    return (\n      <div ref={this.itemElement} onContextMenu={this._onClick}>\n        {this.props.renderedItem}\n        {this.state.contextualMenuVisible ? (\n          <ContextualMenu\n            items={this.props.menuItems}\n            shouldFocusOnMount={true}\n            target={this.itemElement.current}\n            onDismiss={this._onCloseContextualMenu}\n            directionalHint={DirectionalHint.bottomLeftEdge}\n          />\n        ) : null}\n      </div>\n    );\n  }\n\n  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {\n    ev.preventDefault();\n    if (this.props.beginEditing && !this.props.item.isValid) {\n      this.props.beginEditing(this.props.item);\n    } else {\n      this.setState({ contextualMenuVisible: true });\n    }\n  };\n\n  private _onCloseContextualMenu = (ev: React.MouseEvent | React.KeyboardEvent): void => {\n    this.setState({ contextualMenuVisible: false });\n  };\n}\n"]}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { BaseSelectedItemsList } from '../BaseSelectedItemsList';
+import type { IBaseSelectedItemsListProps, ISelectedItemProps } from '../BaseSelectedItemsList.types';
+import type { IPersonaProps } from '../../../Persona';
+import type { IRenderFunction } from '../../../Utilities';
+import type { IBaseFloatingPickerProps } from '../../../FloatingPicker';
+import type { JSXElement } from '@fluentui/utilities';
+/**
+ * {@docCategory SelectedPeopleList}
+ */
+export interface IExtendedPersonaProps extends IPersonaProps {
+    key?: React.Key;
+    isValid: boolean;
+    blockRecipientRemoval?: boolean;
+    shouldBlockSelection?: boolean;
+    canExpand?: boolean;
+    isEditing?: boolean;
+}
+/**
+ * {@docCategory SelectedPeopleList}
+ */
+export interface ISelectedPeopleItemProps extends ISelectedItemProps<IExtendedPersonaProps> {
+    onExpandItem?: () => void;
+    renderPersonaCoin?: IRenderFunction<IPersonaProps>;
+    renderPrimaryText?: IRenderFunction<IPersonaProps>;
+}
+/**
+ * {@docCategory SelectedPeopleList}
+ */
+export interface ISelectedPeopleProps extends IBaseSelectedItemsListProps<IExtendedPersonaProps> {
+    onExpandGroup?: (item: IExtendedPersonaProps) => void;
+    removeMenuItemText?: string;
+    copyMenuItemText?: string;
+    editMenuItemText?: string;
+    getEditingItemText?: (item: IExtendedPersonaProps) => string;
+    onRenderFloatingPicker?: React.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
+    floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
+}
+/**
+ * {@docCategory SelectedPeopleList}
+ */
+export declare class BasePeopleSelectedItemsList extends BaseSelectedItemsList<IExtendedPersonaProps, ISelectedPeopleProps> {
+}
+/**
+ * Standard People Picker.
+ */
+export declare class SelectedPeopleList extends BasePeopleSelectedItemsList {
+    static defaultProps: any;
+    protected renderItems: () => JSXElement[];
+    private _renderItem;
+    private _beginEditing;
+    private _completeEditing;
+    private _createMenuItems;
+}

node_modules/@fluentui/react/lib/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.js

@@ -0,0 +1,114 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { BaseSelectedItemsList } from '../BaseSelectedItemsList';
+import { ExtendedSelectedItem } from './Items/ExtendedSelectedItem';
+import { SelectedItemWithContextMenu } from './Items/SelectedItemWithContextMenu';
+import { EditingItem } from './Items/EditingItem';
+/**
+ * {@docCategory SelectedPeopleList}
+ */
+var BasePeopleSelectedItemsList = /** @class */ (function (_super) {
+    __extends(BasePeopleSelectedItemsList, _super);
+    function BasePeopleSelectedItemsList() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return BasePeopleSelectedItemsList;
+}(BaseSelectedItemsList));
+export { BasePeopleSelectedItemsList };
+/**
+ * Standard People Picker.
+ */
+var SelectedPeopleList = /** @class */ (function (_super) {
+    __extends(SelectedPeopleList, _super);
+    function SelectedPeopleList() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderItems = function () {
+            var items = _this.state.items;
+            return items.map(function (item, index) { return _this._renderItem(item, index); });
+        };
+        _this._beginEditing = function (item) {
+            item.isEditing = true;
+            _this.forceUpdate();
+        };
+        _this._completeEditing = function (oldItem, newItem) {
+            oldItem.isEditing = false;
+            _this.replaceItem(oldItem, newItem);
+        };
+        return _this;
+    }
+    SelectedPeopleList.prototype._renderItem = function (item, index) {
+        var _this = this;
+        var removeButtonAriaLabel = this.props.removeButtonAriaLabel;
+        var expandGroup = this.props.onExpandGroup;
+        var props = {
+            item: item,
+            index: index,
+            // eslint-disable-next-line  @fluentui/max-len
+            // react 18 types added `bigint` to React.Key union, which is not compatible with components which consume our defined props
+            key: (item.key ? item.key : index),
+            selected: this.selection.isIndexSelected(index),
+            onRemoveItem: function () { return _this.removeItem(item); },
+            onItemChange: this.onItemChange,
+            removeButtonAriaLabel: removeButtonAriaLabel,
+            onCopyItem: function (itemToCopy) { return _this.copyItems([itemToCopy]); },
+            onExpandItem: expandGroup ? function () { return expandGroup(item); } : undefined,
+            menuItems: this._createMenuItems(item),
+        };
+        var hasContextMenu = props.menuItems.length > 0;
+        if (item.isEditing && hasContextMenu) {
+            return (React.createElement(EditingItem, __assign({}, props, { onRenderFloatingPicker: this.props.onRenderFloatingPicker, floatingPickerProps: this.props.floatingPickerProps, onEditingComplete: this._completeEditing, getEditingItemText: this.props.getEditingItemText })));
+        }
+        else {
+            // This cast is here because we are guaranteed that onRenderItem is set
+            // from static defaultProps
+            // TODO: Move this component to composition with required onRenderItem to remove
+            // this cast.
+            var onRenderItem = this.props.onRenderItem;
+            var renderedItem = onRenderItem(props);
+            return hasContextMenu ? (React.createElement(SelectedItemWithContextMenu, { key: props.key, renderedItem: renderedItem, beginEditing: this._beginEditing, menuItems: this._createMenuItems(props.item), item: props.item })) : (renderedItem);
+        }
+    };
+    SelectedPeopleList.prototype._createMenuItems = function (item) {
+        var _this = this;
+        var menuItems = [];
+        if (this.props.editMenuItemText && this.props.getEditingItemText) {
+            menuItems.push({
+                key: 'Edit',
+                text: this.props.editMenuItemText,
+                onClick: function (ev, menuItem) {
+                    _this._beginEditing(menuItem.data);
+                },
+                data: item,
+            });
+        }
+        if (this.props.removeMenuItemText) {
+            menuItems.push({
+                key: 'Remove',
+                text: this.props.removeMenuItemText,
+                onClick: function (ev, menuItem) {
+                    _this.removeItem(menuItem.data);
+                },
+                data: item,
+            });
+        }
+        if (this.props.copyMenuItemText) {
+            menuItems.push({
+                key: 'Copy',
+                text: this.props.copyMenuItemText,
+                onClick: function (ev, menuItem) {
+                    if (_this.props.onCopyItems) {
+                        _this.copyItems([menuItem.data]);
+                    }
+                },
+                data: item,
+            });
+        }
+        return menuItems;
+    };
+    SelectedPeopleList.defaultProps = {
+        onRenderItem: function (props) { return React.createElement(ExtendedSelectedItem, __assign({}, props)); },
+    };
+    return SelectedPeopleList;
+}(BasePeopleSelectedItemsList));
+export { SelectedPeopleList };
+//# sourceMappingURL=SelectedPeopleList.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './BaseSelectedItemsList.types';
+export * from './BaseSelectedItemsList';
+export * from './SelectedPeopleList/SelectedPeopleList';
+export * from './SelectedPeopleList/Items/ExtendedSelectedItem';
+export * from './SelectedPeopleList/Items/EditingItem.types';

node_modules/@fluentui/react/lib/components/SelectedItemsList/index.js

@@ -0,0 +1,6 @@
+export * from './BaseSelectedItemsList.types';
+export * from './BaseSelectedItemsList';
+export * from './SelectedPeopleList/SelectedPeopleList';
+export * from './SelectedPeopleList/Items/ExtendedSelectedItem';
+export * from './SelectedPeopleList/Items/EditingItem.types';
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib/components/SelectedItemsList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SelectedItemsList/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAC;AACxD,cAAc,iDAAiD,CAAC;AAChE,cAAc,8CAA8C,CAAC","sourcesContent":["export * from './BaseSelectedItemsList.types';\nexport * from './BaseSelectedItemsList';\nexport * from './SelectedPeopleList/SelectedPeopleList';\nexport * from './SelectedPeopleList/Items/ExtendedSelectedItem';\nexport * from './SelectedPeopleList/Items/EditingItem.types';\n"]}