Add Balloon component

[WesSouza]

Win32 has the Balloon Control which provides a dialog box styled layer that can be used to provide contextual help while a user is interacting with a form, similar to an onboarding tooltip, or dialog from an avatar such as Clippit.

It should automatically position according to the screen boundaries, optimally starting at an anchor point to be determined.

The direction uses the concepts of CSS Logical Properties's Flow Values, where the Balloon is positioned above (block-start), below (block-end), to the left (inline-start) or to the right (inline-end) of the positionRelativeTo coordinates.

type BalloonProps = {
  children?: React.Node;
  direction?: 'block-start' | 'block-end' | 'inline-start' | 'inline-end'
  positionRelativeTo?: DOMRect;
}

defaults = {
  direction: 'block-start'
}

The Balloon tip should be centered at the side of the Balloon direction points at.

If positionRelativeTo is set, the Balloon has absolute position centered with that coordinate.

If positionRelativeTo is not set, the Balloon has block display and static position.

A useRelativePosition hook should be created to help with this positioning logic.