@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;
  return /*#__PURE__*/_react.default.createElement(_VerticalTabsItem.default, {
    type: "action",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 16,
      columnNumber: 3
    }
  }, children);
};
var TabsGroup = _ref2 => {
  var {
    title = '',
    children
  } = _ref2;
  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,
    children,
    size = _VerticalTabs.SIZE.MEDIUM,
    skin = _VerticalTabs.SKIN.LIGHT,
    activeTabId,
    ellipsis = false,
    maxWidth,
    onChange
  } = _ref3;
  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