@atlaskit/tabs/dist/es2019/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)
 */
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,
    'data-motion-capable': dataMotionCapable,
    'data-motion-direction': dataMotionDirection,
    'data-motion-state': dataMotionState
  } = 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,
    "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;