import { __assign, __rest } from "tslib";
import * as React from 'react';
import { MenuButton } from '@fluentui/react-button';
import { Callout, ContextualMenu, Stack, Text } from 'office-ui-fabric-react';
import { useMenuContext } from '@fluentui/react-shared-contexts';
import * as classes from '../Button.stories.scss';
var menuProps = {
    items: [
        {
            key: 'a',
            name: 'Item a',
        },
        {
            key: 'b',
            name: 'Item b',
        },
    ],
};
var MenuButtonExamples = function (props) { return (React.createElement("div", { className: classes.hStack },
    React.createElement(MenuButton, __assign({ icon: "O" }, props), "Hello, world"),
    React.createElement(MenuButton, __assign({ icon: "O", disabled: true }, props), "Hello, world"),
    React.createElement(MenuButton, __assign({ icon: "O", primary: true }, props), "Hello, world"),
    React.createElement(MenuButton, __assign({ icon: "O", primary: true, disabled: true }, props), "Hello, world"),
    React.createElement(MenuButton, __assign({ icon: "O", ghost: true }, props), "Hello, world"),
    React.createElement(MenuButton, __assign({ icon: "O", ghost: true, disabled: true }, props), "Hello, world"),
    React.createElement(MenuButton, __assign({ icon: "O", transparent: true }, props), "Hello, world"),
    React.createElement(MenuButton, __assign({ icon: "O", transparent: true, disabled: true }, props), "Hello, world"))); };
export var DefaultMenuButtons = function () {
    return (React.createElement(Stack, { gap: 20 },
        React.createElement(Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
        React.createElement(MenuButtonExamples, { menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
        React.createElement(MenuButtonExamples, { circular: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can fill the width of its container using the `block` prop."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(MenuButtonExamples, { block: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) })),
        React.createElement(Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
        React.createElement(MenuButtonExamples, { iconOnly: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
        React.createElement(Text, null, "A button can be both `circular` and `iconOnly`."),
        React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
        React.createElement(MenuButtonExamples, { loading: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can be sized."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(MenuButtonExamples, { size: "smallest", menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "smaller", menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "small", menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "large", menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "larger", menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "largest", menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }))));
};
var JSXMenu = function () { return React.createElement(ContextualMenu, __assign({}, useMenuContext(), menuProps)); };
export var MenuButtonsWithMenuAsJsx = function () {
    return (React.createElement(Stack, { gap: 20 },
        React.createElement(Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
        React.createElement(MenuButtonExamples, { menu: React.createElement(JSXMenu, null) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
        React.createElement(MenuButtonExamples, { circular: true, menu: React.createElement(JSXMenu, null) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can fill the width of its container using the `block` prop."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(MenuButtonExamples, { block: true, menu: React.createElement(JSXMenu, null) })),
        React.createElement(Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
        React.createElement(MenuButtonExamples, { iconOnly: true, menu: React.createElement(JSXMenu, null) }),
        React.createElement(Text, null, "A button can be both `circular` and `iconOnly`."),
        React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: React.createElement(JSXMenu, null) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
        React.createElement(MenuButtonExamples, { loading: true, menu: React.createElement(JSXMenu, null) }),
        React.createElement(Text, { variant: "xLarge" }, "A button can be sized."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(MenuButtonExamples, { size: "smallest", menu: React.createElement(JSXMenu, null) }),
            React.createElement(MenuButtonExamples, { size: "smaller", menu: React.createElement(JSXMenu, null) }),
            React.createElement(MenuButtonExamples, { size: "small", menu: React.createElement(JSXMenu, null) }),
            React.createElement(MenuButtonExamples, { size: "large", menu: React.createElement(JSXMenu, null) }),
            React.createElement(MenuButtonExamples, { size: "larger", menu: React.createElement(JSXMenu, null) }),
            React.createElement(MenuButtonExamples, { size: "largest", menu: React.createElement(JSXMenu, null) }))));
};
var FunctionMenu = function (props) {
    var hidden = props.hidden, rest = __rest(props, ["hidden"]);
    return !hidden ? React.createElement(ContextualMenu, __assign({}, rest, menuProps)) : null;
};
export var MenuButtonsWithMenuAsFunction = function () { return (React.createElement(Stack, { gap: 20 },
    React.createElement(Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
    React.createElement(MenuButtonExamples, { menu: FunctionMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
    React.createElement(MenuButtonExamples, { circular: true, menu: FunctionMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can fill the width of its container using the `block` prop."),
    React.createElement("div", { className: classes.vStack },
        React.createElement(MenuButtonExamples, { block: true, menu: FunctionMenu })),
    React.createElement(Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
    React.createElement(MenuButtonExamples, { iconOnly: true, menu: FunctionMenu }),
    React.createElement(Text, null, "A button can be both `circular` and `iconOnly`."),
    React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: FunctionMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
    React.createElement(MenuButtonExamples, { loading: true, menu: FunctionMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can be sized."),
    React.createElement("div", { className: classes.vStack },
        React.createElement(MenuButtonExamples, { size: "smallest", menu: FunctionMenu }),
        React.createElement(MenuButtonExamples, { size: "smaller", menu: FunctionMenu }),
        React.createElement(MenuButtonExamples, { size: "small", menu: FunctionMenu }),
        React.createElement(MenuButtonExamples, { size: "large", menu: FunctionMenu }),
        React.createElement(MenuButtonExamples, { size: "larger", menu: FunctionMenu }),
        React.createElement(MenuButtonExamples, { size: "largest", menu: FunctionMenu })))); };
var CustomMenu = function (props) {
    var hidden = props.hidden, rest = __rest(props, ["hidden"]);
    return !hidden ? React.createElement(Callout, __assign({}, rest), "This is a custom menu") : null;
};
export var MenuButtonsWithCustomMenus = function () { return (React.createElement(Stack, { gap: 20 },
    React.createElement(Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
    React.createElement(MenuButtonExamples, { menu: CustomMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
    React.createElement(MenuButtonExamples, { circular: true, menu: CustomMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can fill the width of its container using the `block` prop."),
    React.createElement("div", { className: classes.vStack },
        React.createElement(MenuButtonExamples, { block: true, menu: CustomMenu })),
    React.createElement(Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
    React.createElement(MenuButtonExamples, { iconOnly: true, menu: CustomMenu }),
    React.createElement(Text, null, "A button can be both `circular` and `iconOnly`."),
    React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: CustomMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
    React.createElement(MenuButtonExamples, { loading: true, menu: CustomMenu }),
    React.createElement(Text, { variant: "xLarge" }, "A button can be sized."),
    React.createElement("div", { className: classes.vStack },
        React.createElement(MenuButtonExamples, { size: "smallest", menu: CustomMenu }),
        React.createElement(MenuButtonExamples, { size: "smaller", menu: CustomMenu }),
        React.createElement(MenuButtonExamples, { size: "small", menu: CustomMenu }),
        React.createElement(MenuButtonExamples, { size: "large", menu: CustomMenu }),
        React.createElement(MenuButtonExamples, { size: "larger", menu: CustomMenu }),
        React.createElement(MenuButtonExamples, { size: "largest", menu: CustomMenu })))); };
//# sourceMappingURL=MenuButton.stories.js.map