import * as React from 'react';
import { CommandBarButton } from '@fluentui/react/lib/Button';
import { OverflowSet } from '@fluentui/react/lib/OverflowSet';
import { DirectionalHint, TooltipHost } from '@fluentui/react';
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(TooltipHost, { content: item.title, directionalHint: DirectionalHint.rightCenter },
        React.createElement(CommandBarButton, { role: "menuitem", "aria-label": item.name, styles: onRenderItemStyles, iconProps: { iconName: item.icon }, onClick: item.onClick })));
};
var onRenderOverflowButton = function (overflowItems) {
    return (React.createElement(TooltipHost, { content: "More items", directionalHint: DirectionalHint.rightCenter },
        React.createElement(CommandBarButton, { role: "menuitem", "aria-label": "More items", styles: onRenderOverflowButtonStyles, menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems } })));
};
export var OverflowSetVerticalExample = function () { return (React.createElement(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