@atlaskit/tabs/dist/es2019/components/tab-list.js

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

/* tab-list.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./tab-list.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Children, createRef, useCallback } from 'react';
import { TabContext } from '../internal/tab-context';
import useTabList from '../use-tab-list';
const baseStyles = null;
const tabListStyles = null;

/**
 * __TabList__
 *
 * A TabList groups `Tab` components together.
 *
 * - [Examples](https://atlassian.design/components/tabs/examples)
 * - [Code](https://atlassian.design/components/tabs/code)
 * - [Usage](https://atlassian.design/components/tabs/usage)
 */
const TabList = ({
  children
}) => {
  const {
    tabsId,
    selected,
    onChange
  } = useTabList();
  const ref = /*#__PURE__*/createRef();

  // Don't include any conditional children
  const childrenArray = Children.toArray(children).filter(Boolean);
  const length = childrenArray.length;
  const selectTabByIndex = useCallback(index => {
    var _ref$current;
    const newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(`[id='${tabsId}-${index}']`);
    if (newSelectedNode) {
      newSelectedNode.focus();
    }
    onChange(index);
  }, [tabsId, ref, onChange]);
  const onKeyDown = useCallback(e => {
    if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
      return;
    }

    // preventing horizontal or vertical scroll
    e.preventDefault();
    const lastTabIndex = length - 1;
    if (['Home', 'End'].includes(e.key)) {
      const newSelected = e.key === 'Home' ? 0 : lastTabIndex;
      selectTabByIndex(newSelected);
      return;
    }

    // We use aria-posinset so we don't rely on the selected variable
    // If we used the selected variable this would regenerate each time
    // and create an unstable reference
    const selectedIndex = parseInt(e.currentTarget.getAttribute('aria-posinset') || '0') - 1;
    const modifier = e.key === 'ArrowRight' ? 1 : -1;
    let newSelected = selectedIndex + modifier;
    if (newSelected < 0 || newSelected >= length) {
      // Cycling focus to move from last to first and from first to last
      newSelected = newSelected < 0 ? lastTabIndex : 0;
    }
    selectTabByIndex(newSelected);
  }, [length, selectTabByIndex]);

  // Memoized so the function isn't recreated each time
  const getTabWithContext = useCallback(({
    tab,
    isSelected,
    index
  }) => /*#__PURE__*/React.createElement(TabContext.Provider, {
    value: {
      onClick: () => onChange(index),
      onKeyDown,
      'aria-setsize': length,
      role: 'tab',
      id: `${tabsId}-${index}`,
      'aria-posinset': index + 1,
      'aria-selected': isSelected,
      'aria-controls': `${tabsId}-${index}-tab`,
      tabIndex: isSelected ? 0 : -1
    },
    key: index
  }, tab), [length, onKeyDown, onChange, tabsId]);
  return /*#__PURE__*/React.createElement("div", {
    role: "tablist",
    ref: ref,
    className: ax(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quzazsu _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzu1uh4 _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oazazsu _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8d1uh4 _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i20i7uo _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmzz0c1 _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiem6x5g _ipw1z0c1 _gmk66x5g _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1rus1l7x _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"])
  }, childrenArray.map((child, index) => getTabWithContext({
    tab: child,
    index,
    isSelected: index === selected
  })));
};
export default TabList;