Add option to pass parentRef to use-popper

[jesse-mm]

Issue

The current implementation gives limited freedom to attach popper to a specific DOM node. The current implementation requires the reference element to reside in the exact same component.

Proposed solution

This PR (PoC) allows passing a custom reference node where popper should attach to.

Example

Please keep in mind this is pseudo code, explanatory only.

ParentComponent.ts

// Parent component where popper.js should attach to.

const ParentComponent: React.FC = (): React.ReactElement => {
    const tooltipRef = useRef();

    return (
        <div ref={tooltipRef}>
            {/* Other contents */}
            <Tooltip
                parentReference={tooltipRef}
                placement={Position.TOP}
            >
                <div>PopperTooltip!</div>
            </Tooltip>
        </div>
    );
};

Tooltip.ts

const Tooltip: React.FC<props> = ({children, placement, parentReference}): React.ReactElement => {
    const {popper, arrow} = usePopper({placement}, parentReference.current);

    return (
        <div
             data-placement={popper.placement}
             ref={popper.ref as React.RefObject<HTMLDivElement>}
             style={popper.styles}
        >
            {children}
            <div
                className={componentName('arrow')}
                ref={arrow.ref as React.RefObject<HTMLDivElement>}
                style={arrow.styles}
            />
        </div>
    );
};