expose show()/close() methods via Dialog.useInstance()

[mayank99]

Changes

This adds two new API surfaces to Dialog:

1. A useInstance hook containing show()/close() methods for imperative manipulation of dialog.
2. An instance prop which accepts an instance returned from the above hook.

Together, this makes it easier to control the dialog without explicitly maintaining its state.

Supersedes #1976

Usage:

const dialog = Dialog.useInstance();

<Button onClick={dialog.show}>Open dialog</Button>
<Dialog instance={dialog}>
  <Button onClick={dialog.close}>Close dialog</Button>
</Dialog>

The implementation is quite simple: useInstance will create an instance of Instance, and useSynchronizeInstance will simply add methods to it. The instance stays referentially stable throughout its lifetime.

Testing

Added unit test and e2e test, updated stories, updated website examples.

Docs

Added docs + jsdocs + changeset.

[mayank99]

I'm going to hold off on merging this one for now.

I'm working on adding similar apis to Modal, Popover, Tooltip, DropdownMenu and InformationPanel. All of them should probably release together.

I'm also experimenting with an invoker-like declarative API for creating tight associations between dialogs/popovers and their triggers. For example:

const dialog = Dialog.useInstance();

<Button invoketarget={dialog}>Open</Button>
<Dialog instance={dialog}>
   <Button invoketarget={dialog}>Close</Button>
</Dialog>

If we want to release things faster without leaving PRs open for long times, maybe we should mark these new APIs as "alpha" or "unstable".