import * as React from 'react';
import { Facepile, OverflowButtonType } from '@fluentui/react/lib/Facepile';
import { facepilePersonas } from '@fluentui/example-data';
import { Announced } from '@fluentui/react';
var overflowButtonProps = {
    ariaLabel: 'More users',
    onClick: function (ev) { return alert('overflow icon clicked'); },
};
export var FacepileAddFaceExample = function () {
    var _a = React.useState(0), numberOfFaces = _a[0], setNumberOfFaces = _a[1];
    var personas = React.useMemo(function () { return facepilePersonas.slice(0, numberOfFaces); }, [numberOfFaces]);
    var addButtonProps = React.useMemo(function () { return ({
        ariaLabel: 'Add a new person to the Facepile',
        onClick: function (ev) {
            setNumberOfFaces(numberOfFaces + 1);
        },
    }); }, [numberOfFaces]);
    return (React.createElement(React.Fragment, null,
        numberOfFaces > 0 ? (React.createElement(Announced, { message: "New person added, currently " + numberOfFaces + " in the Facepile.", "aria-live": "assertive" })) : null,
        React.createElement(Facepile, { personas: personas, maxDisplayablePersonas: 5, overflowButtonProps: overflowButtonProps, overflowButtonType: OverflowButtonType.descriptive, showAddButton: true, addButtonProps: addButtonProps, ariaDescription: "To move through the items use left and right arrow keys." })));
};
//# sourceMappingURL=Facepile.AddFace.Example.js.map