hunk.code_window: export type GuidanceType = 'menu' | 'input' | 'value';
   export type OptionContext = {
     // derived label of selected option via getOptionLabel
     // Note: different aria attributes could potentially introduce need for DOM query selectors
  
hunk.labels: keep keep add keep keep keep
hunk.after_edit: export type AriaLiveProp = 'polite' | 'off' | 'assertive';
  
hunk.file_path: packages/react-select/src/accessibility/index.js
hunk.type: add
file: import React from 'react';
  
  import Select, { components } from 'react-select';
  import { colourOptions, groupedOptions } from '../data';
  
  const menuHeaderStyle = {
    padding: '8px 12px',
    background: colourOptions[2].color,
    color: 'white',
  };
  
  const MenuList = props => {
    return (
      <components.MenuList {...props}>
        <div style={menuHeaderStyle}>Custom Menu List</div>
        {props.children}
      </components.MenuList>
    );
  };
  
  export default () => (
    <Select
      defaultValue={colourOptions[1]}
      options={groupedOptions}
      components={{ MenuList }}
    />
  );
  