@atlaskit/tabs/dist/esm/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)
 */
var Tab = /*#__PURE__*/forwardRef(function Tab(_ref, ref) {
  var children = _ref.children,
    testId = _ref.testId;
  var _useTab = useTab(),
    onClick = _useTab.onClick,
    id = _useTab.id,
    ariaControls = _useTab['aria-controls'],
    ariaPosinset = _useTab['aria-posinset'],
    ariaSelected = _useTab['aria-selected'],
    ariaSetsize = _useTab['aria-setsize'],
    onKeyDown = _useTab.onKeyDown,
    role = _useTab.role,
    tabIndex = _useTab.tabIndex;
  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;