content: import _extends from "@babel/runtime/helpers/esm/extends";
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  import React from 'react';
  import { isFragment } from 'react-is';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { refType } from '@material-ui/utils';
  import debounce from '../utils/debounce';
  import ownerWindow from '../utils/ownerWindow';
  import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
  import animate from '../internal/animate';
  import ScrollbarSize from './ScrollbarSize';
  import withStyles from '../styles/withStyles';
  import TabIndicator from './TabIndicator';
  import TabScrollButton from './TabScrollButton';
  import useEventCallback from '../utils/useEventCallback';
  import useTheme from '../styles/useTheme';
  export var styles = function styles(theme) {
    return {
      /* Styles applied to the root element. */
      root: {
        overflow: 'hidden',
        minHeight: 48,
        WebkitOverflowScrolling: 'touch',
        // Add iOS momentum scrolling.
        display: 'flex'
      },
  
      /* Styles applied to the root element if `orientation="vertical"`. */
      vertical: {
        flexDirection: 'column'
      },
  
      /* Styles applied to the flex container element. */
      flexContainer: {
        display: 'flex'
      },
  
      /* Styles applied to the flex container element if `orientation="vertical"`. */
      flexContainerVertical: {
        flexDirection: 'column'
      },
  
      /* Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
      centered: {
        justifyContent: 'center'
      },
  
      /* Styles applied to the tablist element. */
      scroller: {
        position: 'relative',
        display: 'inline-block',
        flex: '1 1 auto',
        whiteSpace: 'nowrap'
      },
  
      /* Styles applied to the tablist element if `!variant="scrollable"`. */
      fixed: {
        overflowX: 'hidden',
        width: '100%'
      },
  
      /* Styles applied to the tablist element if `variant="scrollable"`. */
      scrollable: {
        overflowX: 'scroll',
        // Hide dimensionless scrollbar on MacOS
        scrollbarWidth: 'none',
        // Firefox
        '&::-webkit-scrollbar': {
          display: 'none' // Safari + Chrome
  
        }
      },
  
      /* Styles applied to the `ScrollButtonComponent` component. */
      scrollButtons: {},
  
      /* Styles applied to the `ScrollButtonComponent` component if `scrollButtons="auto"` or scrollButtons="desktop"`. */
      scrollButtonsDesktop: _defineProperty({}, theme.breakpoints.down('xs'), {
        display: 'none'
      }),
  
      /* Styles applied to the `TabIndicator` component. */
      indicator: {}
    };
  };
  var Tabs = React.forwardRef(function Tabs(props, ref) {
    var action = props.action,
        _props$centered = props.centered,
        centered = _props$centered === void 0 ? false : _props$centered,
        childrenProp = props.children,
        classes = props.classes,
        className = props.className,
        _props$component = props.component,
        Component = _props$component === void 0 ? 'div' : _props$component,
        _props$indicatorColor = props.indicatorColor,
        indicatorColor = _props$indicatorColor === void 0 ? 'secondary' : _props$indicatorColor,
        onChange = props.onChange,
        _props$orientation = props.orientation,
        orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
        _props$ScrollButtonCo = props.ScrollButtonComponent,
        ScrollButtonComponent = _props$ScrollButtonCo === void 0 ? TabScrollButton : _props$ScrollButtonCo,
        _props$scrollButtons = props.scrollButtons,
        scrollButtons = _props$scrollButtons === void 0 ? 'auto' : _props$scrollButtons,
        _props$TabIndicatorPr = props.TabIndicatorProps,
        TabIndicatorProps = _props$TabIndicatorPr === void 0 ? {} : _props$TabIndicatorPr,
        _props$textColor = props.textColor,
        textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
        value = props.value,
        _props$variant = props.variant,
        variant = _props$variant === void 0 ? 'standard' : _props$variant,
        other = _objectWithoutProperties(props, ["action", "centered", "children", "classes", "className", "component", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "TabIndicatorProps", "textColor", "value", "variant"]);
  
    var theme = useTheme();
    var scrollable = variant === 'scrollable';
    var isRtl = theme.direction === 'rtl';
    var vertical = orientation === 'vertical';
    var scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
    var start = vertical ? 'top' : 'left';
    var end = vertical ? 'bottom' : 'right';
    var clientSize = vertical ? 'clientHeight' : 'clientWidth';
    var size = vertical ? 'height' : 'width';
  
    if (process.env.NODE_ENV !== 'production') {
      if (centered && scrollable) {
        console.error('Material-UI: you can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
      }
    }
  
    var _React$useState = React.useState(false),
        mounted = _React$useState[0],
        setMounted = _React$useState[1];
  
    var _React$useState2 = React.useState({}),
        indicatorStyle = _React$useState2[0],
        setIndicatorStyle = _React$useState2[1];
  
    var _React$useState3 = React.useState({
      start: false,
      end: false
    }),
        displayScroll = _React$useState3[0],
        setDisplayScroll = _React$useState3[1];
  
    var _React$useState4 = React.useState({
      overflow: 'hidden',
      marginBottom: null
    }),
        scrollerStyle = _React$useState4[0],
        setScrollerStyle = _React$useState4[1];
  
    var valueToIndex = new Map();
    var tabsRef = React.useRef(null);
    var childrenWrapperRef = React.useRef(null);
  
    var getTabsMeta = function getTabsMeta() {
      var tabsNode = tabsRef.current;
      var tabsMeta;
  
      if (tabsNode) {
        var rect = tabsNode.getBoundingClientRect(); // create a new object with ClientRect class props + scrollLeft
  
        tabsMeta = {
          clientWidth: tabsNode.clientWidth,
          scrollLeft: tabsNode.scrollLeft,
          scrollTop: tabsNode.scrollTop,
          scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
          scrollWidth: tabsNode.scrollWidth,
          top: rect.top,
          bottom: rect.bottom,
          left: rect.left,
          right: rect.right
        };
      }
  
      var tabMeta;
  
      if (tabsNode && value !== false) {
        var _children = childrenWrapperRef.current.children;
  
        if (_children.length > 0) {
          var tab = _children[valueToIndex.get(value)];
  
          if (process.env.NODE_ENV !== 'production') {
            if (!tab) {
              console.error(["Material-UI: the value provided `".concat(value, "` to the Tabs component is invalid."), 'None of the Tabs children have this value.', valueToIndex.keys ? "You can provide one of the following values: ".concat(Array.from(valueToIndex.keys()).join(', '), ".") : null].join('\n'));
            }
          }
  
          tabMeta = tab ? tab.getBoundingClientRect() : null;
        }
      }
  
      return {
        tabsMeta: tabsMeta,
        tabMeta: tabMeta
      };
    };
  
    var updateIndicatorState = useEventCallback(function () {
      var _newIndicatorStyle;
  
      var _getTabsMeta = getTabsMeta(),
          tabsMeta = _getTabsMeta.tabsMeta,
          tabMeta = _getTabsMeta.tabMeta;
  
      var startValue = 0;
  
      if (tabMeta && tabsMeta) {
        if (vertical) {
          startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
        } else {
          var correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
          startValue = tabMeta.left - tabsMeta.left + correction;
        }
      }
  
      var newIndicatorStyle = (_newIndicatorStyle = {}, _defineProperty(_newIndicatorStyle, start, startValue), _defineProperty(_newIndicatorStyle, size, tabMeta ? tabMeta[size] : 0), _newIndicatorStyle);
  
      if (isNaN(indicatorStyle[start]) || isNaN(indicatorStyle[size])) {
        setIndicatorStyle(newIndicatorStyle);
      } else {
        var dStart = Math.abs(indicatorStyle[start] - newIndicatorStyle[start]);
        var dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);
  
        if (dStart >= 1 || dSize >= 1) {
          setIndicatorStyle(newIndicatorStyle);
        }
      }
    });
  
    var scroll = function scroll(scrollValue) {
      animate(scrollStart, tabsRef.current, scrollValue);
    };
  
    var moveTabsScroll = function moveTabsScroll(delta) {
      var scrollValue = tabsRef.current[scrollStart];
  
      if (vertical) {
        scrollValue += delta;
      } else {
        scrollValue += delta * (isRtl ? -1 : 1); // Fix for Edge
  
        scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
      }
  
      scroll(scrollValue);
    };
  
    var handleStartScrollClick = function handleStartScrollClick() {
      moveTabsScroll(-tabsRef.current[clientSize]);
    };
  
    var handleEndScrollClick = function handleEndScrollClick() {
      moveTabsScroll(tabsRef.current[clientSize]);
    };
  
    var handleScrollbarSizeChange = React.useCallback(function (scrollbarHeight) {
      setScrollerStyle({
        overflow: null,
        marginBottom: -scrollbarHeight
      });
    }, []);
  
    var getConditionalElements = function getConditionalElements() {
      var conditionalElements = {};
      conditionalElements.scrollbarSizeListener = scrollable ? React.createElement(ScrollbarSize, {
        className: classes.scrollable,
        onChange: handleScrollbarSizeChange
      }) : null;
      var scrollButtonsActive = displayScroll.start || displayScroll.end;
      var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === 'desktop' || scrollButtons === 'on');
      conditionalElements.scrollButtonStart = showScrollButtons ? React.createElement(ScrollButtonComponent, {
        orientation: orientation,
        direction: isRtl ? 'right' : 'left',
        onClick: handleStartScrollClick,
        visible: displayScroll.start,
        className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
      }) : null;
      conditionalElements.scrollButtonEnd = showScrollButtons ? React.createElement(ScrollButtonComponent, {
        orientation: orientation,
        direction: isRtl ? 'left' : 'right',
        onClick: handleEndScrollClick,
        visible: displayScroll.end,
        className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
      }) : null;
      return conditionalElements;
    };
  
    var scrollSelectedIntoView = useEventCallback(function () {
      var _getTabsMeta2 = getTabsMeta(),
          tabsMeta = _getTabsMeta2.tabsMeta,
          tabMeta = _getTabsMeta2.tabMeta;
  
      if (!tabMeta || !tabsMeta) {
        return;
      }
  
      if (tabMeta[start] < tabsMeta[start]) {
        // left side of button is out of view
        var nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
        scroll(nextScrollStart);
      } else if (tabMeta[end] > tabsMeta[end]) {
        // right side of button is out of view
        var _nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);
  
        scroll(_nextScrollStart);
      }
    });
    var updateScrollButtonState = useEventCallback(function () {
      if (scrollable && scrollButtons !== 'off') {
        var _tabsRef$current = tabsRef.current,
            scrollTop = _tabsRef$current.scrollTop,
            scrollHeight = _tabsRef$current.scrollHeight,
            clientHeight = _tabsRef$current.clientHeight,
            scrollWidth = _tabsRef$current.scrollWidth,
            clientWidth = _tabsRef$current.clientWidth;
        var showStartScroll;
        var showEndScroll;
  
        if (vertical) {
          showStartScroll = scrollTop > 1;
          showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
        } else {
          var scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction); // use 1 for the potential rounding error with browser zooms.
  
          showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
          showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
        }
  
        if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
          setDisplayScroll({
            start: showStartScroll,
            end: showEndScroll
          });
        }
      }
    });
    React.useEffect(function () {
      var handleResize = debounce(function () {
        updateIndicatorState();
        updateScrollButtonState();
      });
      var win = ownerWindow(tabsRef.current);
      win.addEventListener('resize', handleResize);
      return function () {
        handleResize.clear();
        win.removeEventListener('resize', handleResize);
      };
    }, [updateIndicatorState, updateScrollButtonState]);
    var handleTabsScroll = React.useCallback(debounce(function () {
      updateScrollButtonState();
    }));
    React.useEffect(function () {
      return function () {
        handleTabsScroll.clear();
      };
    }, [handleTabsScroll]);
    React.useEffect(function () {
      setMounted(true);
    }, []);
    React.useEffect(function () {
      updateIndicatorState();
      updateScrollButtonState();
    });
    React.useEffect(function () {
      scrollSelectedIntoView();
    }, [scrollSelectedIntoView, indicatorStyle]);
    React.useImperativeHandle(action, function () {
      return {
        updateIndicator: updateIndicatorState,
        updateScrollButtons: updateScrollButtonState
      };
    }, [updateIndicatorState, updateScrollButtonState]);
    var indicator = React.createElement(TabIndicator, _extends({
      className: classes.indicator,
      orientation: orientation,
      color: indicatorColor
    }, TabIndicatorProps, {
      style: _extends({}, indicatorStyle, {}, TabIndicatorProps.style)
    }));
    var childIndex = 0;
    var children = React.Children.map(childrenProp, function (child) {
      if (!React.isValidElement(child)) {
        return null;
      }
  
      if (process.env.NODE_ENV !== 'production') {
        if (isFragment(child)) {
          console.error(["Material-UI: the Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
        }
      }
  
      var childValue = child.props.value === undefined ? childIndex : child.props.value;
      valueToIndex.set(childValue, childIndex);
      var selected = childValue === value;
      childIndex += 1;
      return React.cloneElement(child, {
        fullWidth: variant === 'fullWidth',
        indicator: selected && !mounted && indicator,
        selected: selected,
        onChange: onChange,
        textColor: textColor,
        value: childValue
      });
    });
    var conditionalElements = getConditionalElements();
    return React.createElement(Component, _extends({
      className: clsx(classes.root, className, vertical && classes.vertical),
      ref: ref
    }, other), conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, React.createElement("div", {
      className: clsx(classes.scroller, scrollable ? classes.scrollable : classes.fixed),
      style: scrollerStyle,
      ref: tabsRef,
      onScroll: handleTabsScroll
    }, React.createElement("div", {
      className: clsx(classes.flexContainer, vertical && classes.flexContainerVertical, centered && !scrollable && classes.centered),
      ref: childrenWrapperRef,
      role: "tablist"
    }, children), mounted && indicator), conditionalElements.scrollButtonEnd);
  });
  process.env.NODE_ENV !== "production" ? Tabs.propTypes = {
    /**
     * Callback fired when the component mounts.
     * This is useful when you want to trigger an action programmatically.
     * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
     *
     * @param {object} actions This object contains all possible actions
     * that can be triggered programmatically.
     */
    action: refType,
  
    /**
     * If `true`, the tabs will be centered.
     * This property is intended for large views.
     */
    centered: PropTypes.bool,
  
    /**
     * The content of the component.
     */
    children: PropTypes.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object.isRequired,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * The component used for the root node.
     * Either a string to use a DOM element or a component.
     */
    component: PropTypes.elementType,
  
    /**
     * Determines the color of the indicator.
     */
    indicatorColor: PropTypes.oneOf(['secondary', 'primary']),
  
    /**
     * Callback fired when the value changes.
     *
     * @param {object} event The event source of the callback
     * @param {any} value We default to the index of the child (number)
     */
    onChange: PropTypes.func,
  
    /**
     * The tabs orientation (layout flow direction).
     */
    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
  
    /**
     * The component used to render the scroll buttons.
     */
    ScrollButtonComponent: PropTypes.elementType,
  
    /**
     * Determine behavior of scroll buttons when tabs are set to scroll:
     *
     * - `auto` will only present them when not all the items are visible.
     * - `desktop` will only present them on medium and larger viewports.
     * - `on` will always present them.
     * - `off` will never present them.
     */
    scrollButtons: PropTypes.oneOf(['auto', 'desktop', 'on', 'off']),
  
    /**
     * Props applied to the tab indicator element.
     */
    TabIndicatorProps: PropTypes.object,
  
    /**
     * Determines the color of the `Tab`.
     */
    textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),
  
    /**
     * The value of the currently selected `Tab`.
     * If you don't want any selected `Tab`, you can set this property to `false`.
     */
    value: PropTypes.any,
  
    /**
     *  Determines additional display behavior of the tabs:
     *
     *  - `scrollable` will invoke scrolling properties and allow for horizontally
     *  scrolling (or swiping) of the tab bar.
     *  -`fullWidth` will make the tabs grow to use all the available space,
     *  which should be used for small views, like on mobile.
     *  - `standard` will render the default state.
     */
    variant: PropTypes.oneOf(['standard', 'scrollable', 'fullWidth'])
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiTabs'
  })(Tabs);