@atlaskit/tabs/dist/esm/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 _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toArray from "@babel/runtime/helpers/toArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./tabs.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
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';
var baseStyles = null;
var tabsStyles = null;
var analyticsAttributes = {
  componentName: 'tabs',
  packageName: "@atlaskit/tabs",
  packageVersion: "21.2.1"
};
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
  var tabPanel = _ref.tabPanel,
    index = _ref.index,
    isSelected = _ref.isSelected,
    tabsId = _ref.tabsId;
  return (
    // Ensure tabPanel exists in case it has been removed
    tabPanel && /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
      value: {
        role: 'tabpanel',
        id: "".concat(tabsId, "-").concat(index, "-tab"),
        hidden: isSelected ? undefined : true,
        'aria-labelledby': "".concat(tabsId, "-").concat(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)
 */
var Tabs = function Tabs(props) {
  var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
    shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
    SelectedType = props.selected,
    defaultSelected = props.defaultSelected,
    onChangeProp = props.onChange,
    id = props.id,
    analyticsContext = props.analyticsContext,
    children = props.children,
    testId = props.testId;
  var _useState = useState(SelectedType || defaultSelected || 0),
    _useState2 = _slicedToArray(_useState, 2),
    selectedState = _useState2[0],
    setSelected = _useState2[1];
  var selected = SelectedType === undefined ? selectedState : SelectedType;
  var childrenArray = Children.toArray(children)
  // Don't include any conditional children
  .filter(function (child) {
    return Boolean(child);
  });
  // First child should be a tabList followed by tab panels
  var _childrenArray = _toArray(childrenArray),
    tabList = _childrenArray[0],
    tabPanels = _arrayLikeToArray(_childrenArray).slice(1);

  // Keep track of visited and add to a set
  var visited = useRef(new Set([selected]));
  if (!visited.current.has(selected)) {
    visited.current.add(selected);
  }
  var onChange = useCallback(function (index, analyticsEvent) {
    if (onChangeProp) {
      onChangeProp(index, analyticsEvent);
    }
    setSelected(index);
  }, [onChangeProp]);
  var onChangeAnalytics = usePlatformLeafEventHandler(_objectSpread({
    fn: onChange,
    action: 'clicked',
    analyticsData: analyticsContext
  }, analyticsAttributes));
  var 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(function (tabIndex) {
    return 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: selected,
      onChange: onChangeAnalytics,
      tabsId: id
    }
  }, tabList), /*#__PURE__*/React.createElement(Fragment, null, tabPanelsWithContext));
};
export default Tabs;