text: "use strict";
  
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.default = exports.styles = void 0;
  
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  
  var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  
  var _react = _interopRequireDefault(require("react"));
  
  var _propTypes = _interopRequireDefault(require("prop-types"));
  
  var _clsx = _interopRequireDefault(require("clsx"));
  
  var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
  
  var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
  
  var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
  
  var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
  
  var styles = function styles(theme) {
    var _extends2;
  
    return {
      /* Styles applied to the root element. */
      root: (0, _extends3.default)({}, theme.typography.button, (_extends2 = {
        maxWidth: 264,
        minWidth: 72,
        position: 'relative',
        boxSizing: 'border-box',
        minHeight: 48,
        flexShrink: 0,
        padding: '6px 12px'
      }, (0, _defineProperty2.default)(_extends2, theme.breakpoints.up('sm'), {
        padding: '6px 24px'
      }), (0, _defineProperty2.default)(_extends2, "overflow", 'hidden'), (0, _defineProperty2.default)(_extends2, "whiteSpace", 'normal'), (0, _defineProperty2.default)(_extends2, "textAlign", 'center'), (0, _defineProperty2.default)(_extends2, theme.breakpoints.up('sm'), {
        minWidth: 160
      }), _extends2)),
  
      /* Styles applied to the root element if both `icon` and `label` are provided. */
      labelIcon: {
        minHeight: 72,
        paddingTop: 9,
        '& $wrapper > *:first-child': {
          marginBottom: 6
        }
      },
  
      /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="inherit"`. */
      textColorInherit: {
        color: 'inherit',
        opacity: 0.7,
        '&$selected': {
          opacity: 1
        },
        '&$disabled': {
          opacity: 0.5
        }
      },
  
      /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="primary"`. */
      textColorPrimary: {
        color: theme.palette.text.secondary,
        '&$selected': {
          color: theme.palette.primary.main
        },
        '&$disabled': {
          color: theme.palette.text.disabled
        }
      },
  
      /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="secondary"`. */
      textColorSecondary: {
        color: theme.palette.text.secondary,
        '&$selected': {
          color: theme.palette.secondary.main
        },
        '&$disabled': {
          color: theme.palette.text.disabled
        }
      },
  
      /* Pseudo-class applied to the root element if `selected={true}` (controlled by the Tabs component). */
      selected: {},
  
      /* Pseudo-class applied to the root element if `disabled={true}` (controlled by the Tabs component). */
      disabled: {},
  
      /* Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). */
      fullWidth: {
        flexShrink: 1,
        flexGrow: 1,
        flexBasis: 0,
        maxWidth: 'none'
      },
  
      /* Styles applied to the root element if `wrapped={true}`. */
      wrapped: {
        fontSize: theme.typography.pxToRem(12),
        lineHeight: 1.5
      },
  
      /* Styles applied to the `icon` and `label`'s wrapper element. */
      wrapper: {
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        flexDirection: 'column'
      }
    };
  };
  
  exports.styles = styles;
  
  var Tab = _react.default.forwardRef(function Tab(props, ref) {
    var classes = props.classes,
        className = props.className,
        _props$disabled = props.disabled,
        disabled = _props$disabled === void 0 ? false : _props$disabled,
        _props$disableFocusRi = props.disableFocusRipple,
        disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
        fullWidth = props.fullWidth,
        icon = props.icon,
        indicator = props.indicator,
        label = props.label,
        onChange = props.onChange,
        onClick = props.onClick,
        selected = props.selected,
        _props$textColor = props.textColor,
        textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
        value = props.value,
        _props$wrapped = props.wrapped,
        wrapped = _props$wrapped === void 0 ? false : _props$wrapped,
        other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "selected", "textColor", "value", "wrapped"]);
  
    var handleChange = function handleChange(event) {
      if (onChange) {
        onChange(event, value);
      }
  
      if (onClick) {
        onClick(event);
      }
    };
  
    return _react.default.createElement(_ButtonBase.default, (0, _extends3.default)({
      focusRipple: !disableFocusRipple,
      className: (0, _clsx.default)(classes.root, classes["textColor".concat((0, _capitalize.default)(textColor))], className, disabled && classes.disabled, selected && classes.selected, label && icon && classes.labelIcon, fullWidth && classes.fullWidth, wrapped && classes.wrapped),
      ref: ref,
      role: "tab",
      "aria-selected": selected,
      disabled: disabled,
      onClick: handleChange
    }, other), _react.default.createElement("span", {
      className: classes.wrapper
    }, icon, label), indicator);
  });
  
  process.env.NODE_ENV !== "production" ? Tab.propTypes = {
    /**
     * This prop isn't supported.
     * Use the `component` prop if you need to change the children structure.
     */
    children: _unsupportedProp.default,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: _propTypes.default.object.isRequired,
  
    /**
     * @ignore
     */
    className: _propTypes.default.string,
  
    /**
     * If `true`, the tab will be disabled.
     */
    disabled: _propTypes.default.bool,
  
    /**
     * If `true`, the  keyboard focus ripple will be disabled.
     * `disableRipple` must also be true.
     */
    disableFocusRipple: _propTypes.default.bool,
  
    /**
     * If `true`, the ripple effect will be disabled.
     */
    disableRipple: _propTypes.default.bool,
  
    /**
     * @ignore
     */
    fullWidth: _propTypes.default.bool,
  
    /**
     * The icon element.
     */
    icon: _propTypes.default.node,
  
    /**
     * @ignore
     * For server-side rendering consideration, we let the selected tab
     * render the indicator.
     */
    indicator: _propTypes.default.node,
  
    /**
     * The label element.
     */
    label: _propTypes.default.node,
  
    /**
     * @ignore
     */
    onChange: _propTypes.default.func,
  
    /**
     * @ignore
     */
    onClick: _propTypes.default.func,
  
    /**
     * @ignore
     */
    selected: _propTypes.default.bool,
  
    /**
     * @ignore
     */
    textColor: _propTypes.default.oneOf(['secondary', 'primary', 'inherit']),
  
    /**
     * You can provide your own value. Otherwise, we fallback to the child position index.
     */
    value: _propTypes.default.any,
  
    /**
     * Tab labels appear in a single row.
     * They can use a second line if needed.
     */
    wrapped: _propTypes.default.bool
  } : void 0;
  
  var _default = (0, _withStyles.default)(styles, {
    name: 'MuiTab'
  })(Tab);
  
  exports.default = _default;