@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 _propTypes = _interopRequireDefault(require("prop-types"));
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 _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);
};
TabsGroup.propTypes = {
  title: _propTypes.default.string
};
var VerticalTabs = _ref3 => {
  var {
    dataHook,
    children,
    size = _VerticalTabs.SIZE.MEDIUM,
    skin = _VerticalTabs.SKIN.LIGHT,
    activeTabId,
    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,
      onChange
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    "aria-orientation": "vertical",
    role: "tablist",
    "data-active-tab-id": activeTabId,
    ref: tabNavigationRef,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 45,
      columnNumber: 7
    }
  }, children));
};
VerticalTabs.TabsGroup = TabsGroup;
VerticalTabs.TabItem = _VerticalTabsItem.default;
VerticalTabs.IconItem = _VerticalTabsIconItem.default;
VerticalTabs.Footer = Footer;
VerticalTabs.displayName = 'VerticalTabs';
VerticalTabs.propTypes = {
  skin: _propTypes.default.oneOf([_VerticalTabs.SKIN.LIGHT, _VerticalTabs.SKIN.NEUTRAL, _VerticalTabs.SKIN.STANDARD]),
  size: _propTypes.default.oneOf([_VerticalTabs.SIZE.TINY, _VerticalTabs.SIZE.SMALL, _VerticalTabs.SIZE.MEDIUM]),
  activeTabId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  onChange: _propTypes.default.func,
  children: _propTypes.default.arrayOf(_propTypes.default.node),
  dataHook: _propTypes.default.string
};
var _default = exports.default = VerticalTabs;
//# sourceMappingURL=VerticalTabs.js.map