define(["require", "exports", "react", "@fluentui/react-next/lib/compat/Button", "@uifabric/react-hooks"], function (require, exports, React, Button_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ContextualMenuIconCustomLayoutExample = function () {
        var menuProps = react_hooks_1.useConst(function () { return ({
            shouldFocusOnMount: true,
            styles: {
                subComponentStyles: {
                    menuItem: {
                        root: { height: 'unset' },
                        label: { margin: '0', fontSize: '14px', lineHeight: '18px' },
                        secondaryText: { paddingLeft: '0', textAlign: 'left', fontSize: '10px', lineHeight: '14px' },
                    },
                },
            },
            items: [
                {
                    key: 'Later Today',
                    iconProps: { iconName: 'Clock' },
                    text: 'Later Today',
                    secondaryText: '7:00 PM',
                    onRenderContent: renderContent,
                },
                {
                    key: 'Tomorrow',
                    iconProps: { iconName: 'Coffeescript' },
                    text: 'Tomorrow',
                    secondaryText: 'Thu. 8:00 AM',
                    onRenderContent: renderContent,
                },
                {
                    key: 'This Weekend',
                    iconProps: { iconName: 'Vacation' },
                    text: 'This Weekend',
                    secondaryText: 'Sat. 10:00 AM',
                    onRenderContent: renderContent,
                },
                {
                    key: 'Next Week',
                    iconProps: { iconName: 'Suitcase' },
                    text: 'Next Week',
                    secondaryText: 'Mon. 8:00 AM',
                    onRenderContent: renderContent,
                },
            ],
        }); });
        return React.createElement(Button_1.DefaultButton, { text: "Click for ContextualMenu", menuProps: menuProps });
    };
    var renderContent = function (props, defaultRenders) {
        return (React.createElement(React.Fragment, null,
            defaultRenders.renderCheckMarkIcon(props),
            defaultRenders.renderItemIcon(props),
            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', margin: '8px 4px' } },
                defaultRenders.renderItemName(props),
                defaultRenders.renderSecondaryText(props)),
            defaultRenders.renderSubMenuIcon(props)));
    };
});
//# sourceMappingURL=ContextualMenu.Icon.CustomLayout.Example.js.map