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

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

import React, { Fragment } from 'react';
import { Focusable } from '@atlaskit/primitives/compiled';
import useTabPanel from '../use-tab-panel';

// Note this is not being memoized as children is an unstable reference
/**
 * __TabPanel__
 *
 * A TabPanel houses the contents of a Tab.
 *
 * - [Examples](https://atlassian.design/components/tabs/examples)
 * - [Code](https://atlassian.design/components/tabs/code)
 * - [Usage](https://atlassian.design/components/tabs/usage)
 */
var TabPanel = function TabPanel(_ref) {
  var children = _ref.children,
    testId = _ref.testId;
  var _useTabPanel = useTabPanel(),
    role = _useTabPanel.role,
    id = _useTabPanel.id,
    hidden = _useTabPanel.hidden,
    ariaLabelledBy = _useTabPanel['aria-labelledby'],
    tabIndex = _useTabPanel.tabIndex;
  return /*#__PURE__*/React.createElement(Focusable, {
    as: "div",
    isInset: true,
    testId: testId,
    role: role,
    id: id,
    hidden: hidden,
    "aria-labelledby": ariaLabelledBy,
    tabIndex: tabIndex
  }, /*#__PURE__*/React.createElement(Fragment, null, children));
};
export default TabPanel;