import * as React from 'react';
import { useConst, useBoolean } from '@fluentui/react-hooks';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { Callout } from '@fluentui/react/lib/Callout';
import { ContextualMenuItemType, } from '@fluentui/react/lib/ContextualMenu';
import { Icon } from '@fluentui/react/lib/Icon';
import { mergeStyleSets, getTheme } from '@fluentui/react/lib/Styling';
export var ContextualMenuIconExample = function () {
    var _a = useBoolean(false), showCallout = _a[0], _b = _a[1], onShowCallout = _b.setTrue, onHideCallout = _b.setFalse;
    var menuProps = useConst({
        shouldFocusOnMount: true,
        items: [
            {
                key: 'openInWord',
                text: 'Open in Word',
                onRenderIcon: function (props) {
                    return (React.createElement("span", { className: classNames.iconContainer },
                        React.createElement(Icon, { iconName: "WordLogoFill16", className: classNames.logoFillIcon }),
                        React.createElement(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: 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(DefaultButton, { text: "Click for ContextualMenu", menuProps: menuProps }),
        showCallout && (React.createElement(Callout, { setInitialFocus: true, onDismiss: onHideCallout },
            React.createElement(DefaultButton, { onClick: onHideCallout, text: "Hello Popup" })))));
};
var theme = getTheme();
var classNames = 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