new(vx-tooltip): add useTooltipInPortal

[williaster]

💥 Breaking Changes

🚀 Enhancements

📝 Documentation

This PR is into #755 and

• adds a new userTooltipInPortal hook to addresses the issue of Portal not being easy to use by lib consumers. Notes:
  • this adds a new react-use-measure dependency for the robust bounds logic
  • react-use-measure relies on ResizeObserver. rather than adding the polyfill here like we do in @vx/responsive, I'm opting to just expose the useMeasure polyfill injection system. So, users can add it themselves to window or pass it in directly to the hook. I've noted this in the Readme.
• updates the tooltip demo added in new(vx-tooltip): add Portal + demo #755 to use this hook instead of Portal + react-use-measure
• updates the vx-tooltip Readme to include useTooltipInPortal and Portal
• updates the barstack example to use useTooltipInPortal as a validation point within svgs
• adds offsetLeft/Top to TooltipProps, making TooltipProps === TooltipWithBoundsProps. This simplifies type checking in the new useTooltipInPortal, and is a breaking change for Tooltip as it will add 10px of padding to the Tooltip left/top.

Using userTooltipInPortal

TODO

• remove react-use-measure dep in vx-demo

@hshoff @kristw @ktmud @techniq

[williaster]

noting that we got to remove this conditional 10 by making the Tooltip APIs consistent.

[techniq]

LGTM.

I recently started using react-use-measure to calculate some offsets when using position: sticky for table headers. I also created a Measure component within our application to simplify usage, as well as handle scrolling offsets (viewport prop).

Should we consider using react-use-measure within ParentSize as well (I had considered using this Measure component in place of ParentSize within our components but hadn't yet.

I know we just added support for a leading debounce trigger and currently react-use-measure does not have this, but it looks like they use debounce and it has support for firing on the leading edge (immediate)

import React from 'react';
import useMeasure, { Options, RectReadOnly } from 'react-use-measure';

type MeasureProps = Options & {
  children: (bounds: RectReadOnly) => React.ReactNode;
  viewport?: boolean;
};

function Measure(props: MeasureProps) {
  const { children, viewport, ...options } = props;

  let [ref, bounds] = useMeasure({ debounce: 300, ...options });

  if (viewport) {
    // See note about scrolling position: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
    bounds = {
      ...bounds,
      left: bounds.left + window.scrollX,
      top: bounds.top + window.scrollY,
      x: bounds.x + window.scrollX,
      y: bounds.y + window.scrollY
    };
  }

  return <div ref={ref}>{children(bounds)}</div>;
}

export default Measure;

[williaster]

yeah I think updating ParentSize to use react-use-measure could be a good call, it would enable polyfill injection + fix scroll bounding box issues which we don't currently correct for 👍

[williaster]

gonna merge this into the parent branch (not master)