@atlaskit/tabs/dist/cjs/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 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./tab-list.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _tabContext = require("../internal/tab-context");
var _useTabList2 = _interopRequireDefault(require("../use-tab-list"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var baseStyles = null;
var 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)
 */
var TabList = function TabList(_ref) {
  var children = _ref.children;
  var _useTabList = (0, _useTabList2.default)(),
    tabsId = _useTabList.tabsId,
    selected = _useTabList.selected,
    onChange = _useTabList.onChange;
  var ref = /*#__PURE__*/(0, _react.createRef)();

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

    // preventing horizontal or vertical scroll
    e.preventDefault();
    var lastTabIndex = length - 1;
    if (['Home', 'End'].includes(e.key)) {
      var _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
    var selectedIndex = parseInt(e.currentTarget.getAttribute('aria-posinset') || '0') - 1;
    var modifier = e.key === 'ArrowRight' ? 1 : -1;
    var 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
  var getTabWithContext = (0, _react.useCallback)(function (_ref2) {
    var tab = _ref2.tab,
      isSelected = _ref2.isSelected,
      index = _ref2.index;
    return /*#__PURE__*/React.createElement(_tabContext.TabContext.Provider, {
      value: {
        onClick: function onClick() {
          return onChange(index);
        },
        onKeyDown: onKeyDown,
        'aria-setsize': length,
        role: 'tab',
        id: "".concat(tabsId, "-").concat(index),
        'aria-posinset': index + 1,
        'aria-selected': isSelected,
        'aria-controls': "".concat(tabsId, "-").concat(index, "-tab"),
        tabIndex: isSelected ? 0 : -1
      },
      key: index
    }, tab);
  }, [length, onKeyDown, onChange, tabsId]);
  return /*#__PURE__*/React.createElement("div", {
    role: "tablist",
    ref: ref,
    className: (0, _runtime.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(function (child, index) {
    return getTabWithContext({
      tab: child,
      index: index,
      isSelected: index === selected
    });
  }));
};
var _default = exports.default = TabList;