text: import * as React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import withStyles from '../styles/withStyles';
  import ListItem from '../ListItem';
  
  export const styles = (theme) => ({
    /* Styles applied to the root element. */
    root: {
      ...theme.typography.body1,
      minHeight: 48,
      paddingTop: 6,
      paddingBottom: 6,
      boxSizing: 'border-box',
      width: 'auto',
      whiteSpace: 'nowrap',
      [theme.breakpoints.up('sm')]: {
        minHeight: 'auto',
      },
    },
    // TODO v5: remove
    /* Styles applied to the root element if `disableGutters={false}`. */
    gutters: {},
    /* Styles applied to the root element if `selected={true}`. */
    selected: {},
    /* Styles applied to the root element if dense. */
    dense: {
      ...theme.typography.body2,
      minHeight: 'auto',
    },
  });
  
  const MenuItem = React.forwardRef(function MenuItem(props, ref) {
    const {
      classes,
      className,
      component = 'li',
      disableGutters = false,
      ListItemClasses,
      role = 'menuitem',
      selected,
      tabIndex: tabIndexProp,
      ...other
    } = props;
  
    let tabIndex;
    if (!props.disabled) {
      tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
    }
  
    return (
      <ListItem
        button
        role={role}
        tabIndex={tabIndex}
        component={component}
        selected={selected}
        disableGutters={disableGutters}
        classes={{ dense: classes.dense, ...ListItemClasses }}
        className={clsx(
          classes.root,
          {
            [classes.selected]: selected,
            [classes.gutters]: !disableGutters,
          },
          className,
        )}
        ref={ref}
        {...other}
      />
    );
  });
  
  MenuItem.propTypes = {
    // ----------------------------- Warning --------------------------------
    // | These PropTypes are generated from the TypeScript type definitions |
    // |     To update them edit the d.ts file and run "yarn proptypes"     |
    // ----------------------------------------------------------------------
    /**
     * @ignore
     */
    button: PropTypes.bool,
    /**
     * Menu item contents.
     */
    children: PropTypes.node,
    /**
     * Override or extend the styles applied to the component.
     */
    classes: PropTypes.object,
    /**
     * @ignore
     */
    className: PropTypes.string,
    /**
     * The component used for the root node.
     * Either a string to use a HTML element or a component.
     */
    component: PropTypes.elementType,
    /**
     * If `true`, compact vertical padding designed for keyboard and mouse input will be used.
     * The prop defaults to the value inherited from the parent List component.
     * @default false
     */
    dense: PropTypes.bool,
    /**
     * @ignore
     */
    disabled: PropTypes.bool,
    /**
     * If `true`, the left and right padding is removed.
     * @default false
     */
    disableGutters: PropTypes.bool,
    /**
     * `classes` prop applied to the [`ListItem`](/api/list-item/) element.
     */
    ListItemClasses: PropTypes.object,
    /**
     * @ignore
     */
    role: PropTypes.string,
    /**
     * @ignore
     */
    selected: PropTypes.bool,
    /**
     * @ignore
     */
    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  };
  
  export default withStyles(styles, { name: 'MuiMenuItem' })(MenuItem);
  