@wix/design-system/dist/cjs/VerticalTabs/VerticalTabs.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _VerticalTabsItem = _interopRequireDefault(require("../VerticalTabsItem"));
var _VerticalTabsContext = _interopRequireDefault(require("./VerticalTabsContext"));
var _VerticalTabs = require("./VerticalTabs.constants");
var _VerticalTabsIconItem = _interopRequireDefault(require("../VerticalTabsIconItem"));
var _useTabNavigation = require("../common/useTabNavigation");
var _VerticalTabsSt = require("./VerticalTabs.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/VerticalTabs/VerticalTabs.tsx";
/** Vertical tabs navigation panel. */
var Footer = _ref => {
  var children = _ref.children;
  return /*#__PURE__*/_react.default.createElement(_VerticalTabsItem.default, {
    type: "action",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 16,
      columnNumber: 3
    }
  }, children);
};
var TabsGroup = _ref2 => {
  var _ref2$title = _ref2.title,
    title = _ref2$title === void 0 ? '' : _ref2$title,
    children = _ref2.children;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_VerticalTabsItem.default, {
    type: "title",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 21,
      columnNumber: 5
    }
  }, title), children);
};
var VerticalTabs = _ref3 => {
  var dataHook = _ref3.dataHook,
    children = _ref3.children,
    _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? _VerticalTabs.SIZE.MEDIUM : _ref3$size,
    _ref3$skin = _ref3.skin,
    skin = _ref3$skin === void 0 ? _VerticalTabs.SKIN.LIGHT : _ref3$skin,
    activeTabId = _ref3.activeTabId,
    _ref3$ellipsis = _ref3.ellipsis,
    ellipsis = _ref3$ellipsis === void 0 ? false : _ref3$ellipsis,
    maxWidth = _ref3.maxWidth,
    onChange = _ref3.onChange;
  var tabNavigationRef = (0, _useTabNavigation.useTabNavigation)({
    orientation: 'vertical'
  });
  return /*#__PURE__*/_react.default.createElement(_VerticalTabsContext.default.Provider, {
    // @ts-expect-error - didn't manage to make context work with components generics
    value: {
      size,
      skin,
      activeTabId,
      ellipsis,
      onChange
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _VerticalTabsSt.classes.root,
    "data-hook": dataHook,
    "aria-orientation": "vertical",
    role: "tablist",
    style: {
      maxWidth
    },
    "data-active-tab-id": activeTabId,
    ref: tabNavigationRef,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43,
      columnNumber: 7
    }
  }, children));
};
VerticalTabs.TabsGroup = TabsGroup;
VerticalTabs.TabItem = _VerticalTabsItem.default;
VerticalTabs.IconItem = _VerticalTabsIconItem.default;
VerticalTabs.Footer = Footer;
VerticalTabs.displayName = 'VerticalTabs';
var _default = exports.default = VerticalTabs;
//# sourceMappingURL=VerticalTabs.js.map