<commit_before>import React from 'react/addons';
import ariaMenuButton from '../../src/ariaMenuButton';

const fancyStuff = ['bowling', 'science', 'scooting'];
const CSSTransitionGroup = React.addons.CSSTransitionGroup;

class Fancy extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: '' };
    this.ariaMenuButton = ariaMenuButton({
      onSelection: this.handleSelection.bind(this),
    });
  }

  handleSelection(value) {
    this.setState({ selected: value });
  }

  render() {
    const { Button, Menu, MenuItem } = this.ariaMenuButton;

    const fancyMenuItems = fancyStuff.map((activity, i) => (
      <MenuItem
        value={activity}
        text={activity}
        key={i}
        className='FancyMB-menuItem'
      >
        <img src={`svg/${activity}.svg`} className='FancyMB-svg' />
        <span className='FancyMB-text'>
          I enjoy
          <span className='FancyMB-keyword'>
            {activity}
          </span>
        </span>
      </MenuItem>
    ));

    const menuInnards = menuState => {
      const menu = (!menuState.isOpen) ? false : (
        <div className='FancyMB-menu' key='menu'>
          {fancyMenuItems}
        </div>
      );
      return (
        <CSSTransitionGroup transitionName='is'>
          {menu}
        </CSSTransitionGroup><commit_msg>Fancy demo uses object values for MenuItems<commit_after>import React from 'react/addons';
import ariaMenuButton from '../../src/ariaMenuButton';

const fancyStuff = ['bowling', 'science', 'scooting'];
const CSSTransitionGroup = React.addons.CSSTransitionGroup;

class Fancy extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: '' };
    this.ariaMenuButton = ariaMenuButton({
      onSelection: this.handleSelection.bind(this),
    });
  }

  handleSelection(data) {
    this.setState({ selected: data.activity });
  }

  render() {
    const { Button, Menu, MenuItem } = this.ariaMenuButton;

    const fancyMenuItems = fancyStuff.map((activity, i) => (
      <MenuItem
        value={{
          activity,
          somethingArbitrary: 'arbitrary',
        }}
        text={activity}
        key={i}
        className='FancyMB-menuItem'
      >
        <img src={`svg/${activity}.svg`} className='FancyMB-svg' />
        <span className='FancyMB-text'>
          I enjoy
          <span className='FancyMB-keyword'>
            {activity}
          </span>
        </span>
      </MenuItem>
    ));

    const menuInnards = menuState => {
      const menu = (!menuState.isOpen) ? false : (
        <div className='FancyMB-menu' key='menu'>
          {fancyMenuItems}
        </div>
      );
      return (
        <CSSTransitionGroup transitionName='is'>
          {menu}
        </CSSTransitionGroup>
{'fraction_non_alphanumeric': 0.1390182730204228, 'fraction_numerical': 0.0, 'mean_word_length': 2.4469135802469135, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1959938', 'n_tokens_mistral': 839, 'n_tokens_neox': 826, 'n_words': 162}