@atlaskit/tabs/dist/es2019/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)
 */
const TabPanel = ({
  children,
  testId
}) => {
  const {
    role,
    id,
    hidden,
    'aria-labelledby': ariaLabelledBy,
    tabIndex
  } = useTabPanel();
  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;