content: import _extends from "@babel/runtime/helpers/esm/extends";
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { chainPropTypes } from '@material-ui/utils';
  import withStyles from '../styles/withStyles';
  import ButtonBase from '../ButtonBase';
  import isMuiElement from '../utils/isMuiElement';
  import useForkRef from '../utils/useForkRef';
  import ListContext from '../List/ListContext';
  import ReactDOM from 'react-dom';
  export const styles = theme => ({
    /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
    root: {
      display: 'flex',
      justifyContent: 'flex-start',
      alignItems: 'center',
      position: 'relative',
      textDecoration: 'none',
      width: '100%',
      boxSizing: 'border-box',
      textAlign: 'left',
      paddingTop: 8,
      paddingBottom: 8,
      '&$focusVisible': {
        backgroundColor: theme.palette.action.selected
      },
      '&$selected, &$selected:hover': {
        backgroundColor: theme.palette.action.selected
      },
      '&$disabled': {
        opacity: 0.5
      }
    },
  
    /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */
    container: {
      position: 'relative'
    },
  
    /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
    focusVisible: {},
  
    /* Styles applied to the `component` element if dense. */
    dense: {
      paddingTop: 4,
      paddingBottom: 4
    },
  
    /* Styles applied to the `component` element if `alignItems="flex-start"`. */
    alignItemsFlexStart: {
      alignItems: 'flex-start'
    },
  
    /* Pseudo-class applied to the inner `component` element if `disabled={true}`. */
    disabled: {},
  
    /* Styles applied to the inner `component` element if `divider={true}`. */
    divider: {
      borderBottom: `1px solid ${theme.palette.divider}`,
      backgroundClip: 'padding-box'
    },
  
    /* Styles applied to the inner `component` element if `disableGutters={false}`. */
    gutters: {
      paddingLeft: 16,
      paddingRight: 16
    },
  
    /* Styles applied to the inner `component` element if `button={true}`. */
    button: {
      transition: theme.transitions.create('background-color', {
        duration: theme.transitions.duration.shortest
      }),
      '&:hover': {
        textDecoration: 'none',
        backgroundColor: theme.palette.action.hover,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent'
        }
      }
    },
  
    /* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */
    secondaryAction: {
      // Add some space to avoid collision as `ListItemSecondaryAction`
      // is absolutely positioned.
      paddingRight: 48
    },
  
    /* Pseudo-class applied to the root element if `selected={true}`. */
    selected: {}
  });
  const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
  /**
   * Uses an additional container component if `ListItemSecondaryAction` is the last child.
   */
  
  const ListItem = React.forwardRef(function ListItem(props, ref) {
    const {
      alignItems = 'center',
      autoFocus = false,
      button = false,
      children: childrenProp,
      classes,
      className,
      component: componentProp,
      ContainerComponent = 'li',
      ContainerProps: {
        className: ContainerClassName
      } = {},
      dense = false,
      disabled = false,
      disableGutters = false,
      divider = false,
      focusVisibleClassName,
      selected = false
    } = props,
          ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, ["className"]),
          other = _objectWithoutPropertiesLoose(props, ["alignItems", "autoFocus", "button", "children", "classes", "className", "component", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "divider", "focusVisibleClassName", "selected"]);
  
    const context = React.useContext(ListContext);
    const childContext = {
      dense: dense || context.dense || false,
      alignItems
    };
    const listItemRef = React.useRef(null);
    useEnhancedEffect(() => {
      if (autoFocus) {
        if (listItemRef.current) {
          listItemRef.current.focus();
        } else if (process.env.NODE_ENV !== 'production') {
          console.error('Material-UI: unable to set focus to a ListItem whose component has not been rendered.');
        }
      }
    }, [autoFocus]);
    const children = React.Children.toArray(childrenProp);
    const hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
    const handleOwnRef = React.useCallback(instance => {
      // #StrictMode ready
      listItemRef.current = ReactDOM.findDOMNode(instance);
    }, []);
    const handleRef = useForkRef(handleOwnRef, ref);
  
    const componentProps = _extends({
      className: clsx(classes.root, className, childContext.dense && classes.dense, !disableGutters && classes.gutters, divider && classes.divider, disabled && classes.disabled, button && classes.button, alignItems !== "center" && classes.alignItemsFlexStart, hasSecondaryAction && classes.secondaryAction, selected && classes.selected),
      disabled
    }, other);
  
    let Component = componentProp || 'li';
  
    if (button) {
      componentProps.component = componentProp || 'div';
      componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
      Component = ButtonBase;
    }
  
    if (hasSecondaryAction) {
      // Use div by default.
      Component = !componentProps.component && !componentProp ? 'div' : Component; // Avoid nesting of li > li.
  
      if (ContainerComponent === 'li') {
        if (Component === 'li') {
          Component = 'div';
        } else if (componentProps.component === 'li') {
          componentProps.component = 'div';
        }
      }
  
      return React.createElement(ListContext.Provider, {
        value: childContext
      }, React.createElement(ContainerComponent, _extends({
        className: clsx(classes.container, ContainerClassName),
        ref: handleRef
      }, ContainerProps), React.createElement(Component, componentProps, children), children.pop()));
    }
  
    return React.createElement(ListContext.Provider, {
      value: childContext
    }, React.createElement(Component, _extends({
      ref: handleRef
    }, componentProps), children));
  });
  process.env.NODE_ENV !== "production" ? ListItem.propTypes = {
    /**
     * Defines the `align-items` style property.
     */
    alignItems: PropTypes.oneOf(['flex-start', 'center']),
  
    /**
     * If `true`, the list item will be focused during the first mount.
     * Focus will also be triggered if the value changes from false to true.
     */
    autoFocus: PropTypes.bool,
  
    /**
     * If `true`, the list item will be a button (using `ButtonBase`). Props intended
     * for `ButtonBase` can then be applied to `ListItem`.
     */
    button: PropTypes.bool,
  
    /**
     * The content of the component. If a `ListItemSecondaryAction` is used it must
     * be the last child.
     */
    children: chainPropTypes(PropTypes.node, props => {
      const children = React.Children.toArray(props.children); // React.Children.toArray(props.children).findLastIndex(isListItemSecondaryAction)
  
      let secondaryActionIndex = -1;
  
      for (let i = children.length - 1; i >= 0; i -= 1) {
        const child = children[i];
  
        if (isMuiElement(child, ['ListItemSecondaryAction'])) {
          secondaryActionIndex = i;
          break;
        }
      } //  is ListItemSecondaryAction the last child of ListItem
  
  
      if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {
        return new Error('Material-UI: you used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');
      }
  
      return null;
    }),
  
    /**
     * 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.
     * By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`.
     */
    component: PropTypes.elementType,
  
    /**
     * The container component used when a `ListItemSecondaryAction` is the last child.
     */
    ContainerComponent: PropTypes.elementType,
  
    /**
     * Props applied to the container component if used.
     */
    ContainerProps: PropTypes.object,
  
    /**
     * If `true`, compact vertical padding designed for keyboard and mouse input will be used.
     */
    dense: PropTypes.bool,
  
    /**
     * If `true`, the list item will be disabled.
     */
    disabled: PropTypes.bool,
  
    /**
     * If `true`, the left and right padding is removed.
     */
    disableGutters: PropTypes.bool,
  
    /**
     * If `true`, a 1px light border is added to the bottom of the list item.
     */
    divider: PropTypes.bool,
  
    /**
     * @ignore
     */
    focusVisibleClassName: PropTypes.string,
  
    /**
     * Use to apply selected styling.
     */
    selected: PropTypes.bool
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiListItem'
  })(ListItem);