define(["require", "exports", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/OverflowSet", "office-ui-fabric-react/lib/Tooltip"], function (require, exports, React, Button_1, OverflowSet_1, Tooltip_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var noOp = function () { return undefined; };
    var onRenderItemStyles = {
        root: { padding: '10px' },
    };
    var onRenderOverflowButtonStyles = {
        root: { padding: '10px' },
        menuIcon: { fontSize: '16px' },
    };
    var onRenderItem = function (item) {
        return (React.createElement(Tooltip_1.TooltipHost, { content: item.title, directionalHint: Tooltip_1.DirectionalHint.rightCenter },
            React.createElement(Button_1.CommandBarButton, { role: "menuitem", "aria-label": item.name, styles: onRenderItemStyles, iconProps: { iconName: item.icon }, onClick: item.onClick })));
    };
    var onRenderOverflowButton = function (overflowItems) {
        return (React.createElement(Tooltip_1.TooltipHost, { content: "More items", directionalHint: Tooltip_1.DirectionalHint.rightCenter },
            React.createElement(Button_1.CommandBarButton, { role: "menuitem", "aria-label": "More items", styles: onRenderOverflowButtonStyles, menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems } })));
    };
    exports.OverflowSetVerticalExample = function () { return (React.createElement(OverflowSet_1.OverflowSet, { "aria-label": "Vertical Example", role: "menubar", vertical: true, items: [
            {
                key: 'item1',
                icon: 'Add',
                name: 'Add',
                title: 'Add',
                ariaLabel: 'New. Use left and right arrow keys to navigate',
                onClick: noOp,
            },
            {
                key: 'item2',
                icon: 'Upload',
                name: 'Upload',
                title: 'Upload',
                onClick: noOp,
            },
            {
                key: 'item3',
                icon: 'Share',
                name: 'Share',
                title: 'Share',
                onClick: noOp,
            },
        ], overflowItems: [
            {
                key: 'item4',
                name: 'Overflow Link 1',
                onClick: noOp,
            },
            {
                key: 'item5',
                name: 'Overflow Link 2',
                onClick: noOp,
            },
        ], onRenderOverflowButton: onRenderOverflowButton, onRenderItem: onRenderItem })); };
});
//# sourceMappingURL=OverflowSet.Vertical.Example.js.map