"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextualMenuSubmenuExample = void 0;
var React = require("react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var TextField_1 = require("@fluentui/react/lib-commonjs/TextField");
var textFieldStyles = {
    subComponentStyles: {
        label: { root: { display: 'inline-block', marginRight: '10px' } },
    },
    fieldGroup: { display: 'inline-flex', maxWidth: '100px' },
    wrapper: { display: 'block', marginBottom: '10px' },
};
var ContextualMenuSubmenuExample = function () {
    var _a = React.useState(250), hoverDelay = _a[0], setHoverDelay = _a[1];
    var onHoverDelayChanged = React.useCallback(function (ev, newValue) {
        setHoverDelay(Number(newValue) || 0);
    }, []);
    var menuProps = React.useMemo(function () { return ({
        shouldFocusOnMount: true,
        subMenuHoverDelay: hoverDelay,
        items: menuItems,
    }); }, [hoverDelay]);
    return (React.createElement("div", null,
        React.createElement(TextField_1.TextField, { value: String(hoverDelay), label: "Hover delay (ms)", type: "number", onChange: onHoverDelayChanged, styles: textFieldStyles }),
        React.createElement(Button_1.DefaultButton, { text: "Click for ContextualMenu", menuProps: menuProps })));
};
exports.ContextualMenuSubmenuExample = ContextualMenuSubmenuExample;
var menuItems = [
    {
        key: 'newItem',
        subMenuProps: {
            items: [
                { key: 'emailMessage', text: 'Email message', title: 'Create an email' },
                { key: 'calendarEvent', text: 'Calendar event', title: 'Create a calendar event' },
            ],
        },
        href: 'https://bing.com',
        text: 'New',
        target: '_blank',
        ariaLabel: 'New. Press enter or right arrow keys to open submenu.',
    },
    {
        key: 'share',
        subMenuProps: {
            items: [
                { key: 'sharetotwitter', text: 'Share to Twitter' },
                { key: 'sharetofacebook', text: 'Share to Facebook' },
                {
                    key: 'sharetoemail',
                    text: 'Share to Email',
                    subMenuProps: {
                        items: [
                            { key: 'sharetooutlook_1', text: 'Share to Outlook', title: 'Share to Outlook' },
                            { key: 'sharetogmail_1', text: 'Share to Gmail', title: 'Share to Gmail' },
                        ],
                    },
                },
            ],
        },
        text: 'Share',
        ariaLabel: 'Share. Press enter, space or right arrow keys to open submenu.',
    },
    {
        key: 'shareSplit',
        split: true,
        'aria-roledescription': 'split button',
        subMenuProps: {
            items: [
                { key: 'sharetotwittersplit', text: 'Share to Twitter' },
                { key: 'sharetofacebooksplit', text: 'Share to Facebook' },
                {
                    key: 'sharetoemailsplit',
                    text: 'Share to Email',
                    subMenuProps: {
                        items: [
                            { key: 'sharetooutlooksplit_1', text: 'Share to Outlook', title: 'Share to Outlook' },
                            { key: 'sharetogmailsplit_1', text: 'Share to Gmail', title: 'Share to Gmail' },
                        ],
                    },
                },
            ],
        },
        text: 'Share w/ Split',
        ariaLabel: 'Share w/ Split. Press enter or space keys to trigger action. Press right arrow key to open submenu.',
    },
];
//# sourceMappingURL=ContextualMenu.Submenu.Example.js.map