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