@atlaskit/tabs/dist/es2019/components/tabs.js

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

/* tabs.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./tabs.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Children, Fragment, useCallback, useRef, useState } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import { TabListContext } from '../internal/tab-list-context';
import { TabPanelContext } from '../internal/tab-panel-context';
const baseStyles = null;
const tabsStyles = null;
const analyticsAttributes = {
  componentName: 'tabs',
  packageName: "@atlaskit/tabs",
  packageVersion: "21.2.1"
};
const getTabPanelWithContext = ({
  tabPanel,
  index,
  isSelected,
  tabsId
}) =>
// Ensure tabPanel exists in case it has been removed
tabPanel && /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
  value: {
    role: 'tabpanel',
    id: `${tabsId}-${index}-tab`,
    hidden: isSelected ? undefined : true,
    'aria-labelledby': `${tabsId}-${index}`,
    tabIndex: isSelected ? 0 : -1
  },
  key: index
}, tabPanel);

/**
 * __Tabs__
 *
 * Tabs acts as a container for all Tab components.
 *
 * - [Examples](https://atlassian.design/components/tabs/examples)
 * - [Code](https://atlassian.design/components/tabs/code)
 * - [Usage](https://atlassian.design/components/tabs/usage)
 */
const Tabs = props => {
  const {
    shouldUnmountTabPanelOnChange = false,
    selected: SelectedType,
    defaultSelected,
    onChange: onChangeProp,
    id,
    analyticsContext,
    children,
    testId
  } = props;
  const [selectedState, setSelected] = useState(SelectedType || defaultSelected || 0);
  const selected = SelectedType === undefined ? selectedState : SelectedType;
  const childrenArray = Children.toArray(children)
  // Don't include any conditional children
  .filter(child => Boolean(child));
  // First child should be a tabList followed by tab panels
  const [tabList, ...tabPanels] = childrenArray;

  // Keep track of visited and add to a set
  const visited = useRef(new Set([selected]));
  if (!visited.current.has(selected)) {
    visited.current.add(selected);
  }
  const onChange = useCallback((index, analyticsEvent) => {
    if (onChangeProp) {
      onChangeProp(index, analyticsEvent);
    }
    setSelected(index);
  }, [onChangeProp]);
  const onChangeAnalytics = usePlatformLeafEventHandler({
    fn: onChange,
    action: 'clicked',
    analyticsData: analyticsContext,
    ...analyticsAttributes
  });
  const tabPanelsWithContext = shouldUnmountTabPanelOnChange ? getTabPanelWithContext({
    tabPanel: tabPanels[selected],
    index: selected,
    isSelected: true,
    tabsId: id
  }) :
  // If a panel has already been visited, don't unmount it
  Array.from(visited.current).map(tabIndex => getTabPanelWithContext({
    tabPanel: tabPanels[tabIndex],
    index: tabIndex,
    isSelected: tabIndex === selected,
    tabsId: id
  }));
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    className: ax(["_1e0c1txw _p12f1osq _1tkeidpf _i0dl1osq _2lx21bp4 _16jlkb7n", "_1c3y1txw _ftfaidpf _18i0kb7n _185bglyw"])
  }, /*#__PURE__*/React.createElement(TabListContext.Provider, {
    value: {
      selected,
      onChange: onChangeAnalytics,
      tabsId: id
    }
  }, tabList), /*#__PURE__*/React.createElement(Fragment, null, tabPanelsWithContext));
};
export default Tabs;