first commit

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.base.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { IFacepileProps } from './Facepile.types';
+import type { JSXElement } from '@fluentui/utilities';
+/**
+ * FacePile with no default styles.
+ * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)
+ */
+export declare class FacepileBase extends React.Component<IFacepileProps, {}> {
+    static defaultProps: IFacepileProps;
+    private _ariaDescriptionId;
+    private _classNames;
+    constructor(props: IFacepileProps);
+    render(): JSXElement;
+    protected onRenderAriaDescription(): JSXElement | undefined;
+    private _onRenderVisiblePersonas;
+    private _getPersonaControl;
+    private _getPersonaCoinControl;
+    private _getElementWithOnClickEvent;
+    private _getElementWithoutOnClickEvent;
+    private _getElementProps;
+    private _getOverflowElement;
+    private _getDescriptiveOverflowElement;
+    private _getIconElement;
+    private _getAddNewElement;
+    private _onPersonaClick;
+    private _onPersonaMouseMove;
+    private _onPersonaMouseOut;
+    private _renderInitials;
+    private _renderInitialsNotPictured;
+}

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.base.js

@@ -0,0 +1,170 @@
+define(["require", "exports", "tslib", "react", "../../Utilities", "./Facepile.types", "./FacepileButton", "../../Icon", "../../Persona", "../../PersonaCoin"], function (require, exports, tslib_1, React, Utilities_1, Facepile_types_1, FacepileButton_1, Icon_1, Persona_1, PersonaCoin_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.FacepileBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    /**
+     * FacePile with no default styles.
+     * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)
+     */
+    var FacepileBase = /** @class */ (function (_super) {
+        tslib_1.__extends(FacepileBase, _super);
+        function FacepileBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._classNames = getClassNames(_this.props.styles, {
+                theme: _this.props.theme,
+                className: _this.props.className,
+            });
+            _this._getPersonaControl = function (persona) {
+                var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;
+                var personaStyles = {
+                    details: {
+                        flex: '1 0 auto',
+                    },
+                };
+                return (React.createElement(Persona_1.Persona, tslib_1.__assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null), { styles: personaStyles })));
+            };
+            _this._getPersonaCoinControl = function (persona) {
+                var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;
+                return (React.createElement(PersonaCoin_1.PersonaCoin, tslib_1.__assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null))));
+            };
+            (0, Utilities_1.initializeComponentRef)(_this);
+            _this._ariaDescriptionId = (0, Utilities_1.getId)();
+            return _this;
+        }
+        FacepileBase.prototype.render = function () {
+            var overflowButtonProps = this.props.overflowButtonProps;
+            var _a = this.props, chevronButtonProps = _a.chevronButtonProps, // eslint-disable-line @typescript-eslint/no-deprecated
+            maxDisplayablePersonas = _a.maxDisplayablePersonas, personas = _a.personas, overflowPersonas = _a.overflowPersonas, showAddButton = _a.showAddButton, ariaLabel = _a.ariaLabel, _b = _a.showTooltip, showTooltip = _b === void 0 ? true : _b;
+            var _classNames = this._classNames;
+            // Add a check to make sure maxDisplayalePersonas is defined to cover the edge case of it being 0.
+            var numPersonasToShow = typeof maxDisplayablePersonas === 'number' ? Math.min(personas.length, maxDisplayablePersonas) : personas.length;
+            // Added for deprecating chevronButtonProps.  Can remove after v1.0
+            if (chevronButtonProps && !overflowButtonProps) {
+                overflowButtonProps = chevronButtonProps;
+            }
+            var hasOverflowPersonas = overflowPersonas && overflowPersonas.length > 0;
+            var personasPrimary = hasOverflowPersonas ? personas : personas.slice(0, numPersonasToShow);
+            var personasOverflow = (hasOverflowPersonas ? overflowPersonas : personas.slice(numPersonasToShow)) || [];
+            return (React.createElement("div", { className: _classNames.root },
+                this.onRenderAriaDescription(),
+                React.createElement("div", { className: _classNames.itemContainer },
+                    showAddButton ? this._getAddNewElement() : null,
+                    React.createElement("ul", { className: _classNames.members, "aria-label": ariaLabel }, this._onRenderVisiblePersonas(personasPrimary, personasOverflow.length === 0 && personas.length === 1, showTooltip)),
+                    overflowButtonProps ? this._getOverflowElement(personasOverflow) : null)));
+        };
+        FacepileBase.prototype.onRenderAriaDescription = function () {
+            var ariaDescription = this.props.ariaDescription;
+            var _classNames = this._classNames;
+            // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
+            // otherwise it will be assigned to descriptionSpan.
+            return ariaDescription ? (React.createElement("span", { className: _classNames.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription)) : undefined;
+        };
+        FacepileBase.prototype._onRenderVisiblePersonas = function (personas, singlePersona, showTooltip) {
+            var _this = this;
+            var _a = this.props, _b = _a.onRenderPersona, onRenderPersona = _b === void 0 ? this._getPersonaControl : _b, _c = _a.onRenderPersonaCoin, onRenderPersonaCoin = _c === void 0 ? this._getPersonaCoinControl : _c, onRenderPersonaWrapper = _a.onRenderPersonaWrapper;
+            return personas.map(function (persona, index) {
+                var personaControl = singlePersona
+                    ? onRenderPersona(persona, _this._getPersonaControl)
+                    : onRenderPersonaCoin(persona, _this._getPersonaCoinControl);
+                var defaultPersonaRender = persona.onClick
+                    ? function () { return _this._getElementWithOnClickEvent(personaControl, persona, showTooltip, index); }
+                    : function () { return _this._getElementWithoutOnClickEvent(personaControl, persona, showTooltip, index); };
+                return (React.createElement("li", { key: "".concat(singlePersona ? 'persona' : 'personaCoin', "-").concat(index), className: _this._classNames.member }, onRenderPersonaWrapper ? onRenderPersonaWrapper(persona, defaultPersonaRender) : defaultPersonaRender()));
+            });
+        };
+        FacepileBase.prototype._getElementWithOnClickEvent = function (personaControl, persona, showTooltip, index) {
+            var keytipProps = persona.keytipProps;
+            return (React.createElement(FacepileButton_1.FacepileButton, tslib_1.__assign({}, (0, Utilities_1.getNativeProps)(persona, Utilities_1.buttonProperties), this._getElementProps(persona, showTooltip, index), { keytipProps: keytipProps, 
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick: this._onPersonaClick.bind(this, persona) }), personaControl));
+        };
+        FacepileBase.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, showTooltip, index) {
+            return (React.createElement("div", tslib_1.__assign({}, (0, Utilities_1.getNativeProps)(persona, Utilities_1.buttonProperties), this._getElementProps(persona, showTooltip, index)), personaControl));
+        };
+        FacepileBase.prototype._getElementProps = function (persona, showTooltip, index) {
+            var _classNames = this._classNames;
+            return {
+                key: (persona.imageUrl ? 'i' : '') + index,
+                'data-is-focusable': true,
+                className: _classNames.itemButton,
+                title: showTooltip ? persona.personaName : undefined,
+                onMouseMove: this._onPersonaMouseMove.bind(this, persona),
+                onMouseOut: this._onPersonaMouseOut.bind(this, persona),
+            };
+        };
+        FacepileBase.prototype._getOverflowElement = function (personasOverflow) {
+            switch (this.props.overflowButtonType) {
+                case Facepile_types_1.OverflowButtonType.descriptive:
+                    return this._getDescriptiveOverflowElement(personasOverflow);
+                case Facepile_types_1.OverflowButtonType.downArrow:
+                    return this._getIconElement('ChevronDown');
+                case Facepile_types_1.OverflowButtonType.more:
+                    return this._getIconElement('More');
+                default:
+                    return null;
+            }
+        };
+        FacepileBase.prototype._getDescriptiveOverflowElement = function (personasOverflow) {
+            var personaSize = this.props.personaSize;
+            if (!personasOverflow || personasOverflow.length < 1) {
+                return null;
+            }
+            var personaNames = personasOverflow.map(function (p) { return p.personaName; }).join(', ');
+            var overflowButtonProps = tslib_1.__assign({ title: personaNames }, this.props.overflowButtonProps);
+            var numPersonasNotPictured = Math.max(personasOverflow.length, 0);
+            var _classNames = this._classNames;
+            return (React.createElement(FacepileButton_1.FacepileButton, tslib_1.__assign({}, overflowButtonProps, { ariaDescription: overflowButtonProps.title, className: _classNames.descriptiveOverflowButton }),
+                React.createElement(PersonaCoin_1.PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitialsNotPictured(numPersonasNotPictured), initialsColor: PersonaCoin_1.PersonaInitialsColor.transparent })));
+        };
+        FacepileBase.prototype._getIconElement = function (icon) {
+            var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize;
+            var overflowInitialsIcon = true;
+            var _classNames = this._classNames;
+            return (React.createElement(FacepileButton_1.FacepileButton, tslib_1.__assign({}, overflowButtonProps, { className: _classNames.overflowButton }),
+                React.createElement(PersonaCoin_1.PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials(icon, overflowInitialsIcon), initialsColor: PersonaCoin_1.PersonaInitialsColor.transparent })));
+        };
+        FacepileBase.prototype._getAddNewElement = function () {
+            var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize;
+            var _classNames = this._classNames;
+            return (React.createElement(FacepileButton_1.FacepileButton, tslib_1.__assign({}, addButtonProps, { className: _classNames.addButton }),
+                React.createElement(PersonaCoin_1.PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials('AddFriend') })));
+        };
+        FacepileBase.prototype._onPersonaClick = function (persona, ev) {
+            persona.onClick(ev, persona);
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        FacepileBase.prototype._onPersonaMouseMove = function (persona, ev) {
+            if (persona.onMouseMove) {
+                persona.onMouseMove(ev, persona);
+            }
+        };
+        FacepileBase.prototype._onPersonaMouseOut = function (persona, ev) {
+            if (persona.onMouseOut) {
+                persona.onMouseOut(ev, persona);
+            }
+        };
+        FacepileBase.prototype._renderInitials = function (iconName, overflowButton) {
+            var _classNames = this._classNames;
+            return function () {
+                return React.createElement(Icon_1.Icon, { iconName: iconName, className: overflowButton ? _classNames.overflowInitialsIcon : '' });
+            };
+        };
+        FacepileBase.prototype._renderInitialsNotPictured = function (numPersonasNotPictured) {
+            var _classNames = this._classNames;
+            return function () {
+                return (React.createElement("span", { className: _classNames.overflowInitialsIcon }, numPersonasNotPictured < 100 ? '+' + numPersonasNotPictured : '99+'));
+            };
+        };
+        FacepileBase.defaultProps = {
+            maxDisplayablePersonas: 5,
+            personas: [],
+            overflowPersonas: [],
+            personaSize: PersonaCoin_1.PersonaSize.size32,
+        };
+        return FacepileBase;
+    }(React.Component));
+    exports.FacepileBase = FacepileBase;
+});
+//# sourceMappingURL=Facepile.base.js.map

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IFacepileProps } from './Facepile.types';
+/**
+ * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.
+ */
+export declare const Facepile: React.FunctionComponent<IFacepileProps>;

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.js

@@ -0,0 +1,12 @@
+define(["require", "exports", "../../Utilities", "./Facepile.base", "./Facepile.styles"], function (require, exports, Utilities_1, Facepile_base_1, Facepile_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Facepile = void 0;
+    /**
+     * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.
+     */
+    exports.Facepile = (0, Utilities_1.styled)(Facepile_base_1.FacepileBase, Facepile_styles_1.styles, undefined, {
+        scope: 'Facepile',
+    });
+});
+//# sourceMappingURL=Facepile.js.map

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Facepile.js","sourceRoot":"../src/","sources":["components/Facepile/Facepile.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,QAAQ,GAA4C,IAAA,kBAAM,EAIrE,4BAAY,EAAE,wBAAM,EAAE,SAAS,EAAE;QACjC,KAAK,EAAE,UAAU;KAClB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { FacepileBase } from './Facepile.base';\nimport { styles } from './Facepile.styles';\nimport type { IFacepileProps, IFacepileStyleProps, IFacepileStyles } from './Facepile.types';\n\n/**\n * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.\n */\nexport const Facepile: React.FunctionComponent<IFacepileProps> = styled<\n  IFacepileProps,\n  IFacepileStyleProps,\n  IFacepileStyles\n>(FacepileBase, styles, undefined, {\n  scope: 'Facepile',\n});\n"]}

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IFacepileStyleProps, IFacepileStyles } from './Facepile.types';
+export declare const styles: (props: IFacepileStyleProps) => IFacepileStyles;

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.styles.js

@@ -0,0 +1,131 @@
+define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.styles = void 0;
+    var GlobalClassNames = {
+        root: 'ms-Facepile',
+        addButton: 'ms-Facepile-addButton ms-Facepile-itemButton',
+        descriptiveOverflowButton: 'ms-Facepile-descriptiveOverflowButton ms-Facepile-itemButton',
+        itemButton: 'ms-Facepile-itemButton ms-Facepile-person',
+        itemContainer: 'ms-Facepile-itemContainer',
+        members: 'ms-Facepile-members',
+        member: 'ms-Facepile-member',
+        overflowButton: 'ms-Facepile-overflowButton ms-Facepile-itemButton',
+    };
+    var styles = function (props) {
+        var _a;
+        var className = props.className, theme = props.theme, _b = props.spacingAroundItemButton, spacingAroundItemButton = _b === void 0 ? 2 : _b;
+        var palette = theme.palette, fonts = theme.fonts;
+        var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
+        var ItemButtonStyles = {
+            textAlign: 'center',
+            padding: 0,
+            borderRadius: '50%',
+            verticalAlign: 'top',
+            display: 'inline',
+            backgroundColor: 'transparent',
+            border: 'none',
+            selectors: {
+                '&::-moz-focus-inner': {
+                    padding: 0,
+                    border: 0,
+                },
+            },
+        };
+        return {
+            root: [
+                classNames.root,
+                theme.fonts.medium,
+                {
+                    width: 'auto',
+                },
+                className,
+            ],
+            addButton: [
+                classNames.addButton,
+                (0, Styling_1.getFocusStyle)(theme, { inset: -1 }),
+                ItemButtonStyles,
+                {
+                    fontSize: fonts.medium.fontSize,
+                    color: palette.white,
+                    backgroundColor: palette.themePrimary,
+                    marginRight: spacingAroundItemButton * 2 + 'px',
+                    selectors: {
+                        '&:hover': {
+                            backgroundColor: palette.themeDark,
+                        },
+                        '&:focus': {
+                            backgroundColor: palette.themeDark,
+                        },
+                        '&:active': {
+                            backgroundColor: palette.themeDarker,
+                        },
+                        '&:disabled': {
+                            backgroundColor: palette.neutralTertiaryAlt,
+                        },
+                    },
+                },
+            ],
+            descriptiveOverflowButton: [
+                classNames.descriptiveOverflowButton,
+                (0, Styling_1.getFocusStyle)(theme, { inset: -1 }),
+                ItemButtonStyles,
+                {
+                    fontSize: fonts.small.fontSize,
+                    color: palette.neutralSecondary,
+                    backgroundColor: palette.neutralLighter,
+                    marginLeft: "".concat(spacingAroundItemButton * 2, "px"),
+                },
+            ],
+            itemButton: [classNames.itemButton, ItemButtonStyles],
+            itemContainer: [
+                classNames.itemContainer,
+                {
+                    display: 'flex',
+                },
+            ],
+            members: [
+                classNames.members,
+                {
+                    display: 'flex',
+                    overflow: 'hidden',
+                    listStyleType: 'none',
+                    padding: 0,
+                    margin: "-".concat(spacingAroundItemButton, "px"),
+                },
+            ],
+            member: [
+                classNames.member,
+                {
+                    display: 'inline-flex',
+                    flex: '0 0 auto',
+                    margin: "".concat(spacingAroundItemButton, "px"),
+                },
+            ],
+            overflowButton: [
+                classNames.overflowButton,
+                (0, Styling_1.getFocusStyle)(theme, { inset: -1 }),
+                ItemButtonStyles,
+                {
+                    fontSize: fonts.medium.fontSize,
+                    color: palette.neutralSecondary,
+                    backgroundColor: palette.neutralLighter,
+                    marginLeft: "".concat(spacingAroundItemButton * 2, "px"),
+                },
+            ],
+            overflowInitialsIcon: [
+                {
+                    color: palette.neutralPrimary,
+                    selectors: (_a = {},
+                        _a[Styling_1.HighContrastSelector] = {
+                            color: 'WindowText',
+                        },
+                        _a),
+                },
+            ],
+            screenReaderOnly: Styling_1.hiddenContentStyle,
+        };
+    };
+    exports.styles = styles;
+});
+//# sourceMappingURL=Facepile.styles.js.map

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.types.d.ts

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { FacepileBase } from './Facepile.base';
+import { PersonaInitialsColor, PersonaSize } from '../../Persona';
+import type { IStyle, ITheme } from '../../Styling';
+import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
+import type { IButtonProps } from '../../Button';
+import type { IPersonaSharedProps } from '../../Persona';
+import type { IKeytipProps } from '../../Keytip';
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepile {
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepileProps extends React.ClassAttributes<FacepileBase> {
+    /**
+     * Optional callback to access the IFacepile interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IFacepile>;
+    /**
+     * Whether the default tooltip (the persona name) is shown using the `title` prop.
+     * Set this to false if you'd like to display a custom tooltip, for example using a custom renderer and TooltipHost
+     * @defaultvalue true
+     */
+    showTooltip?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IFacepileStyleProps, IFacepileStyles>;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Additional css class to apply to the Facepile
+     * @defaultvalue undefined
+     */
+    className?: string;
+    /**
+     * Array of IPersonaProps that define each Persona.
+     */
+    personas: IFacepilePersona[];
+    /**
+     * Personas to place in the overflow
+     */
+    overflowPersonas?: IFacepilePersona[];
+    /** Maximum number of personas to show */
+    maxDisplayablePersonas?: number;
+    /** Size to display the personas */
+    personaSize?: PersonaSize;
+    /** ARIA label for persona list */
+    ariaDescription?: string;
+    /**
+     * Defines the aria label that the screen readers use when focus goes on a list of personas.
+     */
+    ariaLabel?: string;
+    /** Show add person button */
+    showAddButton?: boolean;
+    /** Button properties for the add face button */
+    addButtonProps?: IButtonProps;
+    /**
+     * Deprecated at v0.70, use `overflowButtonProps` instead.
+     * @deprecated Use `overflowButtonProps` instead.
+     */
+    chevronButtonProps?: IButtonProps;
+    /**
+     * Properties for the overflow icon. It is used to provide an event handler for the overflow button.
+     */
+    overflowButtonProps?: IButtonProps;
+    /**
+     * Type of overflow icon to use. If `overflowButtonType` is set to anything other than `none`
+     * then we have to provide `overflowButtonProps` to render the overflow button.
+     */
+    overflowButtonType?: OverflowButtonType;
+    /** Optional custom renderer for the persona, gets called when there is one persona in personas array*/
+    onRenderPersona?: IRenderFunction<IFacepilePersona>;
+    /** Optional custom renderer for the persona coins, gets called when there are multiple persona in personas array*/
+    onRenderPersonaCoin?: IRenderFunction<IFacepilePersona>;
+    /** Optional custom renderer for the FacepileButton that renders each clickable Persona */
+    onRenderPersonaWrapper?: IRenderFunction<IFacepilePersona>;
+    /** Method to access properties on the underlying Persona control */
+    getPersonaProps?: (persona: IFacepilePersona) => IPersonaSharedProps;
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepilePersona extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement> {
+    /**
+     * Name of the person.
+     */
+    personaName?: string;
+    /**
+     * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.
+     */
+    imageUrl?: string;
+    /**
+     * The user's initials to display in the image area when there is no image.
+     * @defaultvalue Derived from `personaName`
+     */
+    imageInitials?: string;
+    /**
+     * Whether initials are calculated for phone numbers and number sequences.
+     * Example: Set property to true to get initials for project names consisting of numbers only.
+     * @defaultvalue false
+     */
+    allowPhoneInitials?: boolean;
+    /**
+     * The background color when the user's initials are displayed.
+     * @defaultvalue Derived from `personaName`
+     */
+    initialsColor?: PersonaInitialsColor;
+    /**
+     * If provided, persona will be rendered with cursor:pointer and the handler will be
+     * called on click.
+     */
+    onClick?: (ev?: React.MouseEvent<HTMLElement>, persona?: IFacepilePersona) => void;
+    /**
+     * If provided, the handler will be called on mouse move.
+     */
+    onMouseMove?: (ev?: React.MouseEvent<HTMLElement>, persona?: IFacepilePersona) => void;
+    /**
+     * If provided, the handler will be called when mouse moves out of the component.
+     */
+    onMouseOut?: (ev?: React.MouseEvent<HTMLElement>, persona?: IFacepilePersona) => void;
+    /**
+     * Extra data - not used directly but can be handy for passing additional data to custom event
+     * handlers.
+     */
+    data?: any;
+    /**
+     * Optional keytip for this button that is only added when 'onClick' is defined for the persona
+     */
+    keytipProps?: IKeytipProps;
+}
+/**
+ * {@docCategory Facepile}
+ */
+export declare enum OverflowButtonType {
+    /** No overflow */
+    none = 0,
+    /** +1 overflow icon */
+    descriptive = 1,
+    /** More overflow icon */
+    more = 2,
+    /** Chevron overflow icon */
+    downArrow = 3
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepileStyleProps {
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme: ITheme;
+    /**
+     * Accept custom classNames
+     */
+    className?: string;
+    /**
+     * Pixel value for spacing around button. Number value set in pixels
+     */
+    spacingAroundItemButton?: number;
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepileStyles {
+    /**
+     * Style for the root element.
+     */
+    root: IStyle;
+    addButton: IStyle;
+    descriptiveOverflowButton: IStyle;
+    itemContainer: IStyle;
+    itemButton: IStyle;
+    members: IStyle;
+    member: IStyle;
+    overflowButton: IStyle;
+    overflowInitialsIcon: IStyle;
+    screenReaderOnly: IStyle;
+}

node_modules/@fluentui/react/lib-amd/components/Facepile/Facepile.types.js

@@ -0,0 +1,20 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.OverflowButtonType = void 0;
+    /**
+     * {@docCategory Facepile}
+     */
+    var OverflowButtonType;
+    (function (OverflowButtonType) {
+        /** No overflow */
+        OverflowButtonType[OverflowButtonType["none"] = 0] = "none";
+        /** +1 overflow icon */
+        OverflowButtonType[OverflowButtonType["descriptive"] = 1] = "descriptive";
+        /** More overflow icon */
+        OverflowButtonType[OverflowButtonType["more"] = 2] = "more";
+        /** Chevron overflow icon */
+        OverflowButtonType[OverflowButtonType["downArrow"] = 3] = "downArrow";
+    })(OverflowButtonType || (exports.OverflowButtonType = OverflowButtonType = {}));
+});
+//# sourceMappingURL=Facepile.types.js.map

node_modules/@fluentui/react/lib-amd/components/Facepile/FacepileButton.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IButtonProps } from '../../Button';
+import type { JSXElement } from '@fluentui/utilities';
+export declare class FacepileButton extends React.Component<IButtonProps, {}> {
+    render(): JSXElement;
+}

node_modules/@fluentui/react/lib-amd/components/Facepile/FacepileButton.js

@@ -0,0 +1,22 @@
+define(["require", "exports", "tslib", "react", "../../Button", "../../Utilities", "./FacepileButton.styles"], function (require, exports, tslib_1, React, Button_1, Utilities_1, FacepileButton_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.FacepileButton = void 0;
+    var FacepileButton = /** @class */ (function (_super) {
+        tslib_1.__extends(FacepileButton, _super);
+        function FacepileButton() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        FacepileButton.prototype.render = function () {
+            var _a = this.props, className = _a.className, styles = _a.styles, rest = tslib_1.__rest(_a, ["className", "styles"]);
+            var customStyles = (0, FacepileButton_styles_1.getStyles)(this.props.theme, className, styles);
+            return (React.createElement(Button_1.BaseButton, tslib_1.__assign({}, rest, { variantClassName: "ms-Button--facepile", styles: customStyles, onRenderDescription: Utilities_1.nullRender })));
+        };
+        FacepileButton = tslib_1.__decorate([
+            (0, Utilities_1.customizable)('FacepileButton', ['theme', 'styles'], true)
+        ], FacepileButton);
+        return FacepileButton;
+    }(React.Component));
+    exports.FacepileButton = FacepileButton;
+});
+//# sourceMappingURL=FacepileButton.js.map

node_modules/@fluentui/react/lib-amd/components/Facepile/FacepileButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacepileButton.js","sourceRoot":"../src/","sources":["components/Facepile/FacepileButton.tsx"],"names":[],"mappings":";;;;IASA;QAAoC,0CAAiC;QAArE;;QAeA,CAAC;QAdQ,+BAAM,GAAb;YACE,IAAM,KAAiC,IAAI,CAAC,KAAK,EAAzC,SAAS,eAAA,EAAE,MAAM,YAAA,EAAK,IAAI,sBAA5B,uBAA8B,CAAa,CAAC;YAElD,IAAM,YAAY,GAAG,IAAA,iCAAS,EAAC,IAAI,CAAC,KAAK,CAAC,KAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;YAErE,OAAO,CACL,oBAAC,mBAAU,uBACL,IAAI,IACR,gBAAgB,EAAC,qBAAqB,EACtC,MAAM,EAAE,YAAY,EACpB,mBAAmB,EAAE,sBAAU,IAC/B,CACH,CAAC;QACJ,CAAC;QAdU,cAAc;YAD1B,IAAA,wBAAY,EAAC,gBAAgB,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,IAAI,CAAC;WAC7C,cAAc,CAe1B;QAAD,qBAAC;KAAA,AAfD,CAAoC,KAAK,CAAC,SAAS,GAelD;IAfY,wCAAc","sourcesContent":["import * as React from 'react';\nimport { BaseButton } from '../../Button';\nimport { customizable, nullRender } from '../../Utilities';\nimport { getStyles } from './FacepileButton.styles';\nimport type { IButtonProps } from '../../Button';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\n@customizable('FacepileButton', ['theme', 'styles'], true)\nexport class FacepileButton extends React.Component<IButtonProps, {}> {\n  public render(): JSXElement {\n    const { className, styles, ...rest } = this.props;\n\n    const customStyles = getStyles(this.props.theme!, className, styles);\n\n    return (\n      <BaseButton\n        {...rest}\n        variantClassName=\"ms-Button--facepile\"\n        styles={customStyles}\n        onRenderDescription={nullRender}\n      />\n    );\n  }\n}\n"]}

node_modules/@fluentui/react/lib-amd/components/Facepile/FacepileButton.styles.d.ts

@@ -0,0 +1,3 @@
+import type { ITheme } from '../../Styling';
+import type { IButtonStyles } from '../../Button';
+export declare const getStyles: (theme: ITheme, className?: string, customStyles?: IButtonStyles) => IButtonStyles;

node_modules/@fluentui/react/lib-amd/components/Facepile/FacepileButton.styles.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "../../Styling", "../../Utilities", "../Button/BaseButton.styles"], function (require, exports, tslib_1, Styling_1, Utilities_1, BaseButton_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    exports.getStyles = (0, Utilities_1.memoizeFunction)(function (theme, className, customStyles) {
+        var baseButtonStyles = (0, BaseButton_styles_1.getStyles)(theme);
+        var customButtonStyles = (0, Styling_1.concatStyleSets)(baseButtonStyles, customStyles);
+        return tslib_1.__assign(tslib_1.__assign({}, customButtonStyles), { root: [baseButtonStyles.root, className, theme.fonts.medium, customStyles && customStyles.root] });
+    });
+});
+//# sourceMappingURL=FacepileButton.styles.js.map

node_modules/@fluentui/react/lib-amd/components/Facepile/FacepileButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacepileButton.styles.js","sourceRoot":"../src/","sources":["components/Facepile/FacepileButton.styles.ts"],"names":[],"mappings":";;;;IAMa,QAAA,SAAS,GAAG,IAAA,2BAAe,EACtC,UAAC,KAAa,EAAE,SAAkB,EAAE,YAA4B;QAC9D,IAAM,gBAAgB,GAAkB,IAAA,6BAAmB,EAAC,KAAK,CAAC,CAAC;QAEnE,IAAM,kBAAkB,GAAG,IAAA,yBAAe,EAAC,gBAAgB,EAAE,YAAY,CAAE,CAAC;QAE5E,OAAO,sCACF,kBAAkB,KACrB,IAAI,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,GAC/E,CAAC;IACrB,CAAC,CACF,CAAC","sourcesContent":["import { concatStyleSets } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../Button/BaseButton.styles';\nimport type { ITheme } from '../../Styling';\nimport type { IButtonStyles } from '../../Button';\n\nexport const getStyles = memoizeFunction(\n  (theme: ITheme, className?: string, customStyles?: IButtonStyles): IButtonStyles => {\n    const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n\n    const customButtonStyles = concatStyleSets(baseButtonStyles, customStyles)!;\n\n    return {\n      ...customButtonStyles,\n      root: [baseButtonStyles.root, className, theme.fonts.medium, customStyles && customStyles.root],\n    } as IButtonStyles;\n  },\n);\n"]}

node_modules/@fluentui/react/lib-amd/components/Facepile/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Facepile.types';
+export * from './Facepile.base';
+export * from './Facepile';

node_modules/@fluentui/react/lib-amd/components/Facepile/index.js

@@ -0,0 +1,8 @@
+define(["require", "exports", "tslib", "./Facepile.types", "./Facepile.base", "./Facepile"], function (require, exports, tslib_1, Facepile_types_1, Facepile_base_1, Facepile_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Facepile_types_1, exports);
+    tslib_1.__exportStar(Facepile_base_1, exports);
+    tslib_1.__exportStar(Facepile_1, exports);
+});
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib-amd/components/Facepile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Facepile/index.ts"],"names":[],"mappings":";;;IAAA,gDAAiC;IACjC,+CAAgC;IAChC,0CAA2B","sourcesContent":["export * from './Facepile.types';\nexport * from './Facepile.base';\nexport * from './Facepile';\n"]}