define(["require", "exports", "tslib", "react", "@uifabric/experiments", "office-ui-fabric-react", "office-ui-fabric-react/lib/Keytips"], function (require, exports, tslib_1, React, experiments_1, office_ui_fabric_react_1, Keytips_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var btnExecute = function (el) {
        el.click();
    };
    // Setup keytips
    var keytipConfig = {
        keytips: [
            {
                id: 'Button',
                content: '1A',
                optionalProps: {
                    onExecute: btnExecute,
                },
            },
            {
                id: 'MenuButton',
                content: '1B',
                optionalProps: {
                    onExecute: btnExecute,
                },
                children: [
                    {
                        id: 'MenuItem1',
                        content: 'E',
                    },
                    {
                        id: 'MenuItem2',
                        content: '8',
                    },
                ],
            },
            {
                id: 'MenuButton2',
                content: '1C',
                optionalProps: {
                    onExecute: btnExecute,
                },
                children: [
                    {
                        id: 'MenuItem1',
                        content: 'E',
                    },
                    {
                        id: 'MenuItem2',
                        content: '8',
                    },
                ],
            },
            {
                id: 'SplitButton',
                content: '2',
                optionalProps: {
                    onExecute: btnExecute,
                },
            },
        ],
    };
    var keytipMap = Keytips_1.buildKeytipConfigMap(keytipConfig);
    var alertClicked = function () {
        alert('Clicked');
    };
    var menuProps = {
        items: [
            {
                key: 'a',
                text: 'Item a',
                keytipProps: keytipMap.MenuItem1,
            },
            {
                key: 'b',
                text: 'Item b',
                keytipProps: keytipMap.MenuItem2,
            },
        ],
        shouldFocusOnContainer: true,
        shouldFocusOnMount: true,
    };
    var ButtonKeytipsExample = /** @class */ (function (_super) {
        tslib_1.__extends(ButtonKeytipsExample, _super);
        function ButtonKeytipsExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ButtonKeytipsExample.prototype.render = function () {
            var stackTokens = { childrenGap: 12 };
            return (React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, disableShrink: true, tokens: stackTokens },
                React.createElement(experiments_1.Button, { content: "Button with keytip", onClick: alertClicked, keytipProps: keytipMap.Button }),
                React.createElement(experiments_1.Button, { content: "Button without keytip", onClick: alertClicked }),
                React.createElement(experiments_1.MenuButton, { content: "Menu Button with keytip", keytipProps: keytipMap.MenuButton, menu: menuProps }),
                React.createElement(experiments_1.SplitButton, { content: "Split Button with keytip", keytipProps: keytipMap.SplitButton, menu: menuProps })));
        };
        return ButtonKeytipsExample;
    }(React.Component));
    exports.ButtonKeytipsExample = ButtonKeytipsExample;
});
//# sourceMappingURL=Button.Keytips.Example.js.map