import { Notification, KIND } from "baseui/notification";
import { StatefulTabs, Tab } from "baseui/tabs";
import * as TabsExports from "baseui/tabs";

import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import TabsControlled from "examples/tabs/controlled.tsx";
import TabsUncontrolled from "examples/tabs/uncontrolled.tsx";
import TabsCustomKeys from "examples/tabs/custom-keys.tsx";
import TabsVertical from "examples/tabs/vertical.tsx";
import TabsRenderAll from "examples/tabs/renderall.tsx";
import TabsOverrides from "examples/tabs/overrides.tsx";

import Yard from "../../components/yard/index";
import tabsYardConfig from "../../components/yard/config/tabs";

export default Layout;

<Notification
  overrides={{ Body: { style: { width: "auto" } } }}
  kind={KIND.warning}
>
  This component is deprecated and will be removed in our next major version,
  slated for late 2021. We recommend using our new{" "}
  <a href="/components/tabs-motion">Tabs (Motion)</a> component. It has an
  animated highlight and is compliant with the WAI-ARIA 1.1 Specification. The
  APIs are almost identical so give it a try!
</Notification>

# Tabs

<Yard placeholderHeight={102} {...tabsYardConfig} />

The Tabs component is used for navigating frequently accessed, but distinct categories.

## Accessibility

- `tab`, `shift + tab` - to move focus between tabs.
- `Space` or `Enter` - to display the selected tab's content
- `aria-selected`, `aria-disabled` are applied to the tabs.
- Roles: `role=tab`, `role=tablist`, `role=tabpanel`

## Examples

<Example title="Controlled Tabs Usage" path="tabs/controlled.tsx">
  <TabsControlled />
</Example>

<Example title="Uncontrolled Tabs Usage" path="tabs/uncontrolled.tsx">
  <TabsUncontrolled />
</Example>

<Example title="With Custom Keys" path="tabs/custom-keys.tsx">
  <TabsCustomKeys />
</Example>

We use tab order to provide default keys for each tab. You can however, pass in your own key to a tab and set `activeKey` accordingly.

<Example title="Tabs SEO Friendly" path="tabs/renderall.tsx">
  <TabsRenderAll />
</Example>

<Example title="Tabs Vertical Usage" path="tabs/vertical.tsx">
  <TabsVertical />
</Example>

<Example title="Tabs Overrides" path="tabs/overrides.tsx">
  <TabsOverrides />
</Example>

<Exports component={TabsExports} title="Tabs exports" path="baseui/tabs" />