@chakra-xui/tabs/dist/cjs/tabs.js

Accessible Tabs component for React and Chakra xui

"use strict";

exports.__esModule = true;
exports.TabIndicator = exports.TabPanels = exports.TabPanel = exports.TabList = exports.Tab = exports.Tabs = void 0;

var _system = require("@chakra-xui/system");

var _utils = require("@chakra-xui/utils");

var React = _interopRequireWildcard(require("react"));

var _useTabs2 = require("./use-tabs");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/**
 * Tabs
 *
 * Provides context and logic for all tabs components. It doesn't render
 * any DOM node.
 */
var Tabs = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
  var styles = (0, _system.useMultiStyleConfig)("Tabs", props);

  var _omitThemingProps = (0, _system.omitThemingProps)(props),
      children = _omitThemingProps.children,
      className = _omitThemingProps.className,
      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);

  var _useTabs = (0, _useTabs2.useTabs)(rest),
      htmlProps = _useTabs.htmlProps,
      ctx = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);

  var context = React.useMemo(function () {
    return ctx;
  }, [ctx]);
  var rootProps = (0, _utils.omit)(htmlProps, ["isFitted"]);
  return /*#__PURE__*/React.createElement(_useTabs2.TabsProvider, {
    value: context
  }, /*#__PURE__*/React.createElement(_system.StylesProvider, {
    value: styles
  }, /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
    className: (0, _utils.cx)("chakra-tabs", className),
    ref: ref
  }, rootProps, {
    __css: styles.root
  }), children)));
});
exports.Tabs = Tabs;

if (_utils.__DEV__) {
  Tabs.displayName = "Tabs";
}

/**
 * Tab button used to activate a specific tab panel. It renders a `button`,
 * and is responsible for automatic and manual selection modes.
 */
var Tab = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
  var styles = (0, _system.useStyles)();
  var tabProps = (0, _useTabs2.useTab)(_extends({}, props, {
    ref: ref
  }));

  var tabStyles = _extends({
    outline: "0",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }, styles.tab);

  return /*#__PURE__*/React.createElement(_system.chakra.button, _extends({}, tabProps, {
    className: (0, _utils.cx)("chakra-tabs__tab", props.className),
    __css: tabStyles
  }));
});
exports.Tab = Tab;

if (_utils.__DEV__) {
  Tab.displayName = "Tab";
}

/**
 * TabList is used to manage a list of tab buttons. It renders a `div` by default,
 * and is responsible the keyboard interaction between tabs.
 */
var TabList = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
  var tablistProps = (0, _useTabs2.useTabList)(_extends({}, props, {
    ref: ref
  }));
  var styles = (0, _system.useStyles)();

  var tablistStyles = _extends({
    display: "flex"
  }, styles.tablist);

  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({}, tablistProps, {
    className: (0, _utils.cx)("chakra-tabs__tablist", props.className),
    __css: tablistStyles
  }));
});
exports.TabList = TabList;

if (_utils.__DEV__) {
  TabList.displayName = "TabList";
}

/**
 * TabPanel
 * Used to render the content for a specific tab.
 */
var TabPanel = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
  var panelProps = (0, _useTabs2.useTabPanel)(_extends({}, props, {
    ref: ref
  }));
  var styles = (0, _system.useStyles)();
  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({}, panelProps, {
    className: (0, _utils.cx)("chakra-tabs__tab-panel", props.className),
    __css: styles.tabpanel
  }));
});
exports.TabPanel = TabPanel;

if (_utils.__DEV__) {
  TabPanel.displayName = "TabPanel";
}

/**
 * TabPanel
 *
 * Used to manage the rendering of multiple tab panels. It uses
 * `cloneElement` to hide/show tab panels.
 *
 * It renders a `div` by default.
 */
var TabPanels = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
  var panelsProps = (0, _useTabs2.useTabPanels)(props);
  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({}, panelsProps, {
    width: "100%",
    ref: ref,
    className: (0, _utils.cx)("chakra-tabs__tab-panels", props.className)
  }));
});
exports.TabPanels = TabPanels;

if (_utils.__DEV__) {
  TabPanels.displayName = "TabPanels";
}

/**
 * TabIndicator
 *
 * Used to render an active tab indicator that animates between
 * selected tabs.
 */
var TabIndicator = /*#__PURE__*/(0, _system.forwardRef)(function (props, ref) {
  var indicatorStyle = (0, _useTabs2.useTabIndicator)();

  var style = _extends({}, props.style, indicatorStyle);

  var styles = (0, _system.useStyles)();
  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
    ref: ref
  }, props, {
    className: (0, _utils.cx)("chakra-tabs__tab-indicator", props.className),
    style: style,
    __css: styles.indicator
  }));
});
exports.TabIndicator = TabIndicator;

if (_utils.__DEV__) {
  TabIndicator.displayName = "TabIndicator";
}
//# sourceMappingURL=tabs.js.map