"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_button_1 = require("@fluentui/react-button");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var react_shared_contexts_1 = require("@fluentui/react-shared-contexts");
var classes = require("../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(react_button_1.MenuButton, tslib_1.__assign({ icon: "O" }, props), "Hello, world"),
    React.createElement(react_button_1.MenuButton, tslib_1.__assign({ icon: "O", disabled: true }, props), "Hello, world"),
    React.createElement(react_button_1.MenuButton, tslib_1.__assign({ icon: "O", primary: true }, props), "Hello, world"),
    React.createElement(react_button_1.MenuButton, tslib_1.__assign({ icon: "O", primary: true, disabled: true }, props), "Hello, world"),
    React.createElement(react_button_1.MenuButton, tslib_1.__assign({ icon: "O", ghost: true }, props), "Hello, world"),
    React.createElement(react_button_1.MenuButton, tslib_1.__assign({ icon: "O", ghost: true, disabled: true }, props), "Hello, world"),
    React.createElement(react_button_1.MenuButton, tslib_1.__assign({ icon: "O", transparent: true }, props), "Hello, world"),
    React.createElement(react_button_1.MenuButton, tslib_1.__assign({ icon: "O", transparent: true, disabled: true }, props), "Hello, world"))); };
exports.DefaultMenuButtons = function () {
    return (React.createElement(office_ui_fabric_react_1.Stack, { gap: 20 },
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
        React.createElement(MenuButtonExamples, { menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
        React.createElement(MenuButtonExamples, { circular: true, menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
        React.createElement(office_ui_fabric_react_1.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(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) })),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
        React.createElement(MenuButtonExamples, { iconOnly: true, menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
        React.createElement(office_ui_fabric_react_1.Text, null, "A button can be both `circular` and `iconOnly`."),
        React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
        React.createElement(MenuButtonExamples, { loading: true, menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can be sized."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(MenuButtonExamples, { size: "smallest", menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "smaller", menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "small", menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "large", menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "larger", menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }),
            React.createElement(MenuButtonExamples, { size: "largest", menu: React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, menuProps)) }))));
};
var JSXMenu = function () { return React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, react_shared_contexts_1.useMenuContext(), menuProps)); };
exports.MenuButtonsWithMenuAsJsx = function () {
    return (React.createElement(office_ui_fabric_react_1.Stack, { gap: 20 },
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
        React.createElement(MenuButtonExamples, { menu: React.createElement(JSXMenu, null) }),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
        React.createElement(MenuButtonExamples, { circular: true, menu: React.createElement(JSXMenu, null) }),
        React.createElement(office_ui_fabric_react_1.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(office_ui_fabric_react_1.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(office_ui_fabric_react_1.Text, null, "A button can be both `circular` and `iconOnly`."),
        React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: React.createElement(JSXMenu, null) }),
        React.createElement(office_ui_fabric_react_1.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(office_ui_fabric_react_1.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 = tslib_1.__rest(props, ["hidden"]);
    return !hidden ? React.createElement(office_ui_fabric_react_1.ContextualMenu, tslib_1.__assign({}, rest, menuProps)) : null;
};
exports.MenuButtonsWithMenuAsFunction = function () { return (React.createElement(office_ui_fabric_react_1.Stack, { gap: 20 },
    React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
    React.createElement(MenuButtonExamples, { menu: FunctionMenu }),
    React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
    React.createElement(MenuButtonExamples, { circular: true, menu: FunctionMenu }),
    React.createElement(office_ui_fabric_react_1.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(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
    React.createElement(MenuButtonExamples, { iconOnly: true, menu: FunctionMenu }),
    React.createElement(office_ui_fabric_react_1.Text, null, "A button can be both `circular` and `iconOnly`."),
    React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: FunctionMenu }),
    React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
    React.createElement(MenuButtonExamples, { loading: true, menu: FunctionMenu }),
    React.createElement(office_ui_fabric_react_1.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 = tslib_1.__rest(props, ["hidden"]);
    return !hidden ? React.createElement(office_ui_fabric_react_1.Callout, tslib_1.__assign({}, rest), "This is a custom menu") : null;
};
exports.MenuButtonsWithCustomMenus = function () { return (React.createElement(office_ui_fabric_react_1.Stack, { gap: 20 },
    React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
    React.createElement(MenuButtonExamples, { menu: CustomMenu }),
    React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
    React.createElement(MenuButtonExamples, { circular: true, menu: CustomMenu }),
    React.createElement(office_ui_fabric_react_1.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(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
    React.createElement(MenuButtonExamples, { iconOnly: true, menu: CustomMenu }),
    React.createElement(office_ui_fabric_react_1.Text, null, "A button can be both `circular` and `iconOnly`."),
    React.createElement(MenuButtonExamples, { circular: true, iconOnly: true, menu: CustomMenu }),
    React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
    React.createElement(MenuButtonExamples, { loading: true, menu: CustomMenu }),
    React.createElement(office_ui_fabric_react_1.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