@atlaskit/tabs/dist/es2019/components/tab.js

Tabs are used to organize content by grouping similar information on the same page.

import React, { forwardRef } from 'react';
import { Focusable, Text } from '@atlaskit/primitives/compiled';
import useTab from '../use-tab';

/**
 * __Tab__
 *
 * Tab represents an individual Tab displayed in a TabList.
 *
 * - [Examples](https://atlassian.design/components/tabs/examples)
 * - [Code](https://atlassian.design/components/tabs/code)
 * - [Usage](https://atlassian.design/components/tabs/usage)
 */
const Tab = /*#__PURE__*/forwardRef(function Tab({
  children,
  testId
}, ref) {
  const {
    onClick,
    id,
    'aria-controls': ariaControls,
    'aria-posinset': ariaPosinset,
    'aria-selected': ariaSelected,
    'aria-setsize': ariaSetsize,
    onKeyDown,
    role,
    tabIndex
  } = useTab();
  return /*#__PURE__*/React.createElement(Focusable, {
    as: "div",
    isInset: true,
    testId: testId,
    onClick: onClick,
    id: id,
    "aria-controls": ariaControls,
    "aria-posinset": ariaPosinset,
    "aria-selected": ariaSelected,
    "aria-setsize": ariaSetsize,
    onKeyDown: onKeyDown,
    role: role,
    tabIndex: tabIndex,
    ref: ref
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "medium",
    color: "inherit",
    maxLines: 1
  }, children));
});
export default Tab;