Select Menu detail view

[jeroenransijn]

For some use cases it is useful to show extra content when browsing through a select menu. For those use cases I want to add a property to SelectMenu to render additional information on the right side of the Select Menu. In most of these cases you want complete control on the application side for what to show.

Design Example

When a detail view is passed, the Select Menu will add a border between the detail view and the right side.

API Design

Select Menu will get an additional prop

/**
 * Can be a function that returns a node, or a node itself, that is
 * rendered on the right side of the Select Menu to give additional
 * information when an option is selected.
 * The signature of the funciton is: ({ close }) => ReactNode.
 */
detailView: PropTypes.oneOfType([PropTypes.func, PropTypes.node])

Usage example

The width of the detail view comes from the item being rendered in the detail view.

<Manager>
  {({ setState, state }) => (
    <SelectMenu
      title="Select name"
      options={options}
      selected={state.selected}
      onSelect={item => setState({ selected: item.value })}
      detailView={({ close }) => this.renderDetailView(close)}
    >
      <Button>{state.selected || 'Select name...'}</Button>
    </SelectMenu>
  )}
</Manager>

Uncertainties

I am not entirely sure about the right API for this, I am leaning towards detailView. @Rowno pointed out we can simple use the children prop for this instead, which would give a clean API, but might be slightly more ambiguous.

Additionally, I am currently recreating the header with heading in the design example. We could add something like detailViewTitle that could add a title that is inline with the same style as the select menu.

[jeroenransijn]

Docs will come later