RFC: Ref utils

[layershifter]

1. Move Ref component to a separate package

This fits #433. As this component is shared between SUIR and Stardust UI.
Proposal: @stardust-ui/react-ref

2. Introduce new utils

2.1. isRefObject<T extends any>(value: T): is React.RefObject<T>

To check that passed object is a ref created with React.createRef().

const ref = React.createRef()

isRefObject(ref)
isRefObject(document)

When: the great example is a context prop in Popup it's very useful to be able to pass there refs and DOM elements.

2.2. toRefObject<T extends Node>(value: T): React.RefObject<T>

To create a ref object from existing DOM node.

When: some of our internal API will support only React.RefObject as a prop value (#949).

const element = document.createElement('div')
const ref = toRefObject(element)

ref === toRefObject(element) // true, is memoized

2.3 mergeRefs(...refs: React.Ref<any>)

To merge refs to single assign.

When: you need to pass ref to top level or third party component.

-<Ref innerRef={domNode => {
-  ref(domElement)
-  this.popupDomElement = domElement
-  handleRef(contentRef, domElement)
-}} >
+<Ref innerRef={mergeRefs(ref, this.popupRef, contentRef)} >

[levithomason]

separate package, 2.1, 2.2 👍

2.3 - Per chat with team, let's avoid the nicety and magic and use the verbose dumb code:

-<Ref innerRef={mergeRefs(ref, this.popupRef, contentRef)} />
<Ref innerRef={domElement => {
  ref(domElement)
  this.popupRef.current = domElement
  handleRef(contentRef, domElement)
}} />

[layershifter]

FYI, mergeRefs: https://www.npmjs.com/package/@quid/merge-refs