RFC: Advanced Dropdown menu shorthand

http://react.semantic-ui.com/modules/dropdown#search-in-menu

I'd like to use this variation of the dropdown in my app but we currently don't support it. I'm happy to take a stab at implementing it, but don't really have a good idea how it should work.

The issue is that the markup can become pretty complex, with variations on headers, dividers, the search box, options, etc. See this example for another variation: http://react.semantic-ui.com/modules/dropdown#input

It would be nice to give ultimate control to the user, but I'm struggling to see how that's possible since we need to know:

1. the options so that we can filter them. Currently we don't support options + children.
2. where the search box is so that we can

• detect change
• allow the searchQuery to be set as an auto-controlled prop (this isn't an autocontrolled prop now but I kinda think it should be. If it's too hard to do with search-in-menu we can forego it though.)

One kinda crazy idea is to allow the user to specify a "schema". Something like:

const nestedMenu: [
  { component: Dropdown.Header, content: 'Search Issues' },
  { component: Dropdown.Input, value: this.props.searchQuery },
  { component: Dropdown.Header, icon: 'tags', content: 'Filter by tag' },
  { component: Dropdown.Divider },
  { component: Dropdown.Menu }
]

<Dropdown options={options} nestedMenu={nestedMenu} />

Then we can parse out which is the search input, and which is the nested menu where we should render the options. We can validate the schema such that there's exactly one menu and at most one input (theoretically you can make a nested menu that's not searchable).

@levithomason @layershifter - would appreciate your thoughts!