@logicblocks/react-tabs/dist/index.js

A customizable React tab component with no built-in CSS.

"use strict";

var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tab = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var Tab = function Tab(_a) {
  var _b = _a.tabList,
    tabList = _b === void 0 ? [] : _b,
    _c = _a.currentTabIndex,
    currentTabIndex = _c === void 0 ? 0 : _c,
    _d = _a.tabClickHandler,
    tabClickHandler = _d === void 0 ? function () {} : _d,
    _e = _a.selectTabClass,
    selectTabClass = _e === void 0 ? "" : _e,
    _f = _a.unselectedTabClass,
    unselectedTabClass = _f === void 0 ? "" : _f,
    _g = _a.tabContainerClass,
    tabContainerClass = _g === void 0 ? "" : _g,
    _h = _a.tabOptionsClass,
    tabOptionsClass = _h === void 0 ? "" : _h,
    _j = _a.selectTabStyle,
    selectTabStyle = _j === void 0 ? {} : _j,
    _k = _a.unselectedTabStyle,
    unselectedTabStyle = _k === void 0 ? {} : _k,
    _l = _a.tabContainerStyle,
    tabContainerStyle = _l === void 0 ? {} : _l,
    _m = _a.tabOptionsStyle,
    tabOptionsStyle = _m === void 0 ? {} : _m;
  return (0, jsx_runtime_1.jsxs)("div", __assign({
    className: tabContainerClass,
    style: tabContainerStyle
  }, {
    children: [(0, jsx_runtime_1.jsx)("div", __assign({
      className: tabOptionsClass,
      style: tabOptionsStyle,
      role: "tablist",
      "aria-label": "Tabs"
    }, {
      children: tabList.map(function (_a, index) {
        var name = _a.name;
        return (0, jsx_runtime_1.jsx)("button", __assign({
          className: currentTabIndex === index ? selectTabClass : unselectedTabClass,
          style: currentTabIndex === index ? selectTabStyle : unselectedTabStyle,
          role: "tab",
          "aria-selected": currentTabIndex === index,
          "aria-controls": "tabpanel-".concat(index),
          id: "tab-".concat(index),
          onClick: function onClick() {
            return tabClickHandler(index);
          }
        }, {
          children: name
        }), name);
      })
    })), tabList.map(function (_a, index) {
      var Component = _a.Component;
      return (0, jsx_runtime_1.jsx)("div", __assign({
        role: "tabpanel",
        id: "tabpanel-".concat(index),
        "aria-labelledby": "tab-".concat(index),
        hidden: currentTabIndex !== index
      }, {
        children: currentTabIndex === index && (0, jsx_runtime_1.jsx)(Component, {})
      }), index);
    })]
  }));
};
exports.Tab = Tab;