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

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

/* tab.tsx generated by @compiled/babel-plugin v3.0.2 */
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
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,
    dataMotionCapable = _useTab['data-motion-capable'],
    dataMotionDirection = _useTab['data-motion-direction'],
    dataMotionState = _useTab['data-motion-state'];
  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,
    "data-motion-capable": dataMotionCapable,
    "data-motion-direction": dataMotionDirection,
    "data-motion-state": dataMotionState,
    ref: ref
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "medium",
    color: "inherit",
    maxLines: fg('platform_dst_tabs_remove_line_clamp') ? undefined : 1
  }, children));
});
export default Tab;