{() => {
    class StateManager extends React.Component {
      constructor(props, context) {
        super(props, context)
        this.state = {
          isOpen: false,
          selectedItem: null,
          items: [
            { id: 1, value: 'First Option' },
            { id: 2, value: 'Second Option' },
          ],
        }
        this.handleClickOutside = this.handleClickOutside.bind(this)
        this.openDrawer = this.openDrawer.bind(this)
        this.handleSelect = this.handleSelect.bind(this)
      }
      handleClickOutside() {
        this.setState({ isOpen: false })
      }
      openDrawer() {
        this.setState({ isOpen: true })
      }
      handleSelect(selectedItemId) {
        const selectedItem = this.state.items.find(
          item => item.id === selectedItemId,
        )
        this.setState({ selectedItem })
      }
      render() {
        const renderAssetTypeOptions = ({ getItemProps }) => {
          const group = this.state.items.map((item, index) => {
            const itemProps = getItemProps({ item, index })
            return (
              <ListItem
                onClick={itemProps.onClick}
                onMouseDown={itemProps.onMouseDown}
                id={itemProps.id}
                selected={itemProps.isSelected || itemProps.isActive}
                key={index}
              >
                <ListItemText primary={item.value} />
              
            )
          })
          return <List bordered>{group}</List>
        }
        const drawer = (
          <Drawer open={this.state.isOpen} placement="right">
            <SpacedGroup direction="vertical">
              <p>
                This is the drawer with a portaled select. Will the selection of
                the option in the portaled dropdown be considered "outside"?
              </p>
              <SingleSelect
                fullWidth
                renderOptions={renderAssetTypeOptions}
                onSelect={this.handleSelect}
                selectedItem={this.state.selectedItem}
              />
            </SpacedGroup>
          </Drawer>
        )
        return (
          <DetectExternalEvents
            domEvents={['click']}
            reactEvents={['onClick']}
            onExternalEvent={this.handleClickOutside}
          >
            <div>
              <Button onClick={this.openDrawer}>Open Drawer</Button>
              {drawer}
            </div>
          </DetectExternalEvents>
        )
      }
    }
    return <StateManager />
  }}
</Playground>