define(["require", "exports", "react", "@fluentui/react-hooks", "@fluentui/react/lib/Button", "@fluentui/react/lib/Callout", "@fluentui/react/lib/ContextualMenu", "@fluentui/react/lib/Icon", "@fluentui/react/lib/Styling"], function (require, exports, React, react_hooks_1, Button_1, Callout_1, ContextualMenu_1, Icon_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ContextualMenuIconExample = void 0;
    var ContextualMenuIconExample = function () {
        var _a = react_hooks_1.useBoolean(false), showCallout = _a[0], _b = _a[1], onShowCallout = _b.setTrue, onHideCallout = _b.setFalse;
        var menuProps = react_hooks_1.useConst({
            shouldFocusOnMount: true,
            items: [
                {
                    key: 'openInWord',
                    text: 'Open in Word',
                    onRenderIcon: function (props) {
                        return (React.createElement("span", { className: classNames.iconContainer },
                            React.createElement(Icon_1.Icon, { iconName: "WordLogoFill16", className: classNames.logoFillIcon }),
                            React.createElement(Icon_1.Icon, { iconName: "WordLogo16", className: classNames.logoIcon })));
                    },
                },
                { key: 'newItem', iconProps: { iconName: 'Add' }, text: 'New' },
                {
                    key: 'upload',
                    onClick: onShowCallout,
                    iconProps: { iconName: 'Upload', style: { color: 'salmon' } },
                    text: 'Upload (Click for popup)',
                    title: 'Upload a file',
                },
                { key: 'divider_1', itemType: ContextualMenu_1.ContextualMenuItemType.Divider },
                { key: 'share', iconProps: { iconName: 'Share' }, text: 'Share' },
                { key: 'print', iconProps: { iconName: 'Print' }, text: 'Print' },
                { key: 'music', iconProps: { iconName: 'MusicInCollectionFill' }, text: 'Music' },
            ],
        });
        return (React.createElement("div", null,
            React.createElement(Button_1.DefaultButton, { text: "Click for ContextualMenu", menuProps: menuProps }),
            showCallout && (React.createElement(Callout_1.Callout, { setInitialFocus: true, onDismiss: onHideCallout },
                React.createElement(Button_1.DefaultButton, { onClick: onHideCallout, text: "Hello Popup" })))));
    };
    exports.ContextualMenuIconExample = ContextualMenuIconExample;
    var theme = Styling_1.getTheme();
    var classNames = Styling_1.mergeStyleSets({
        iconContainer: {
            position: 'relative',
            margin: '0 4px',
            height: 32,
            width: 14,
        },
        logoIcon: {
            position: 'absolute',
            left: 0,
            right: 0,
            color: theme.palette.themeDarkAlt,
        },
        logoFillIcon: {
            position: 'absolute',
            left: 0,
            right: 0,
            color: theme.palette.white,
        },
    });
});
//# sourceMappingURL=ContextualMenu.Icon.Example.js.map