"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsRemoveExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var react_hooks_1 = require("@fluentui/react-hooks");
var react_tabs_1 = require("@fluentui/react-tabs");
var TabsRemoveExample = function () {
    var _a = react_hooks_1.useBoolean(true), showFirstItem = _a[0], toggleShowFirstItem = _a[1].toggle;
    return (React.createElement("div", null,
        React.createElement(react_tabs_1.Tabs, { "aria-label": "Remove Tabs Example", tabSize: "large", tabFormat: "tabs" },
            showFirstItem && (React.createElement(react_tabs_1.TabItem, { headerText: "Foo", itemKey: "Foo", key: "Foo" },
                React.createElement(react_1.Label, null, "Click the button below to show/hide this tab item."),
                React.createElement(react_1.Label, null, "The selected item will not change when the number of tab items changes."),
                React.createElement(react_1.Label, null, "If the selected item was removed, the new first item will be selected."))),
            React.createElement(react_tabs_1.TabItem, { headerText: "Bar", itemKey: "Bar", key: "Bar" },
                React.createElement(react_1.Label, null, "Tab #2")),
            React.createElement(react_tabs_1.TabItem, { headerText: "Bas", itemKey: "Bas", key: "Bas" },
                React.createElement(react_1.Label, null, "Tab #3")),
            React.createElement(react_tabs_1.TabItem, { headerText: "Biz", itemKey: "Biz", key: "Biz" },
                React.createElement(react_1.Label, null, "Tab #4"))),
        React.createElement("div", null,
            React.createElement(Button_1.DefaultButton, { "aria-live": "polite", onClick: toggleShowFirstItem, text: (showFirstItem ? 'Hide' : 'Show') + " First Tab Item" }))));
};
exports.TabsRemoveExample = TabsRemoveExample;
//# sourceMappingURL=Tabs.Remove.Example.js.map