hunk.code_window:     /** The mouse down event and the innerRef to pass down to the controller element. */
       innerProps: {
         onMouseDown: (SyntheticMouseEvent<HTMLElement>) => void,
         ref: ElementRef<*>,
       },
     };
  
hunk.labels: keep keep keep replace keep keep keep
hunk.after_edit:       innerRef: ElementRef<*>,
  
hunk.file_path: src/components/Control.js
hunk.type: replace
file: import React, { Fragment } from 'react';
  
  import Select, { components } from '../../src';
  import { colourOptions, groupedOptions } from '../data';
  
  function getLength (options) {
    return options.reduce((acc, curr) => {
      if (curr.options) return acc + getLength(curr.options);
      return acc + 1;
    }, 0);
  };
  
  const menuHeaderStyle = {
    padding: '8px 12px',
  };
  
  const Menu = (props) => {
    const optionsLength = getLength(props.options);
    return (
      <Fragment>
        <div style={menuHeaderStyle}>
          Custom Menu with {optionsLength} options
        </div>
        <components.Menu {...props}>
          {props.children}
        </components.Menu>
      </Fragment>
    );
  };
  
  export default () => (
    <Select
      defaultValue={colourOptions[1]}
      options={groupedOptions}
      components={{ Menu }}
    />
  );
  