Dropdown

<Dropdown data={data}>
	<Button>Menu</Button>
</Dropdown>

() => {
	const data = [
		{
			items: [
				{
					text: 'Menu item with onClick',
					onClick: event => { console.log(event); }
				},
				{
					text: 'Menu item',
					secondaryText: 'Secondary text'
				}
			]
		},
		{
			title: 'Group Title',
			items: [
				{
					text: 'Icon at start',
					iconStart: <IconCloud />
				},
				{
					text: 'Icon at end',
					iconEnd: <IconCloud />
				},
				{
					divider: true
				},
				{
					text: 'Danger variant',
					variant: 'danger' // 'danger' | 'success' | 'warning'
				},
				{
					text: 'Disabled menu item',
					onClick: event => { console.log(event); },
					disabled: true
				},
				{
					text: 'Custom render',
					avatar: 'http://www.fillmurray.com/102/100',
					href: '/components/menu-item#custom-render', // <-- Details here
					render: CustomRender
				}
			]
		}
	];

	return (
		<Dropdown data={data}>
			<Button>Menu</Button>
		</Dropdown>
	);
}

<DemoLayout>
	<Dropdown wide data={data}>
		<Button disabled>Menu</Button>
	</Dropdown>
</DemoLayout>

<DemoLayout>
	<Dropdown placement="bottom-start" data={data}>
		<Button size="jumbo" disabled>Menu</Button>
	</Dropdown>
</DemoLayout>

<ScrollParent height="430">
	<Dropdown
		data={data}
		isOpen
		placement="bottom-start"
		restoreFocus={false}>
		<Button>Menu</Button>
	</Dropdown>
</ScrollParent>

<Dropdown data={data} disabled>
	<Button disabled>Menu</Button>
</Dropdown>

class App extends Component {
	constructor(props) {
		super(props);

		this.state = {
			isOpen: false
		};

		this.onOpen = this.onOpen.bind(this);
		this.onClose = this.onClose.bind(this);
		this.toggleDropdown = this.toggleDropdown.bind(this);
	}

	onOpen(event) {
		this.setState({ isOpen: true });
	}

	onClose(event) {
		// Prevent extra call to toggleDropdown when clicking the controlling button.
		// Also avoid interactions with other dropdowns.
		const demoLayoutNode = findDOMNode(this.demoLayout);
		if (
			!event.nativeEvent &&
			demoLayoutNode &&
			demoLayoutNode.contains(event.target)
		) {
			event.stopImmediatePropagation();
		}

		this.setState({ isOpen: false });
	}


	toggleDropdown(event) {
		if (this.state.isOpen) {
			this.onClose(event);
		} else {
			this.onOpen(event);
		}
	}

	render() {
		const label = this.state.isOpen ? 'Close Dropdown' : 'Open Dropdown';
		return (
			<DemoLayout ref={node => { this.demoLayout = node }}>
				<Dropdown
					data={data}
					isOpen={this.state.isOpen}
					onOpen={this.onOpen}
					onClose={this.onClose}>
					<Button>{label}</Button>
				</Dropdown>
				<Button onClick={this.toggleDropdown}>{label}</Button>
			</DemoLayout>
		);
	}
}