Popover

<Popover content={<DemoContent />}>
	<Button>Open Popover</Button>
</Popover>

<DemoLayout>
	<Popover
		content={<DemoContent />}
		placement="right"
		subtitle="Subtitle"
		title="Title">
		<Button disabled>Open Popover</Button>
	</Popover>
</DemoLayout>

<DemoLayout>
	<Popover
		content={<DemoContent />}
		placement="bottom">
		<Button size="jumbo" disabled>Open Popover</Button>
	</Popover>
</DemoLayout>

<OverflowContainer>
	<Popover
		content={<DemoContent />}
		placement="right">
		<Button disabled>Open Popover</Button>
	</Popover>
</OverflowContainer>

<ScrollParent>
	<Popover
		content={<DemoContent />}
		placement="left"
		isOpen
		restoreFocus={false}>
		<Button>Open Popover</Button>
	</Popover>
</ScrollParent>

<DemoLayout>
	<Popover content={<DemoContent />}>
		<Button>Both autoFocus and restoreFocus</Button>
	</Popover>

	<Popover content={<DemoContent />} autoFocus={false}>
		<Button>No autoFocus</Button>
	</Popover>

	<Popover content={<DemoContent />} restoreFocus={false}>
		<Button>No restoreFocus</Button>
	</Popover>

	<Popover content={<DemoContent />} autoFocus={false} restoreFocus={false}>
		<Button>Neither autoFocus nor restoreFocus</Button>
	</Popover>
</DemoLayout>

<Popover disabled content={<DemoContent />}>
	<Button disabled>Open Popover</Button>
</Popover>

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.togglePopover = this.togglePopover.bind(this);
	}

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

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

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

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

	render() {
		const label = this.state.isOpen ? 'Close Popover' : 'Open Popover';
		return (
			<DemoLayout ref={node => { this.demoLayout = node }}>
				<Popover
					content={<DemoContent />}
					isOpen={this.state.isOpen}
					onOpen={this.onOpen}
					onClose={this.onClose}
					restoreFocus={false}>
					<Button>{label}</Button>
				</Popover>
				<Button onClick={this.togglePopover}>{label}</Button>
			</DemoLayout>
		);
	}
}