Merge ab4abd4 into e497062

airbnb · Oct 17, 2022 · 8df4369 · 8df4369
2 parents e497062 + ab4abd4
commit 8df4369
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 31 deletions.
diff --git a/packages/visx-bounds/src/enhancers/withBoundingRects.tsx b/packages/visx-bounds/src/enhancers/withBoundingRects.tsx
@@ -31,9 +31,14 @@ export default function withBoundingRects<Props extends object = {}>(
 ) {
   return class WrappedComponent extends React.PureComponent<Props> {
     static displayName = `withBoundingRects(${BaseComponent.displayName || ''})`;
+
     node: HTMLElement | undefined | null;
+    nodeRef: React.MutableRefObject<HTMLElement | undefined | null>;
+
     constructor(props: Props) {
       super(props);
+      this.nodeRef = React.createRef<HTMLInputElement | null>();
+
       this.state = {
         rect: undefined,
         parentRect: undefined,
@@ -42,7 +47,9 @@ export default function withBoundingRects<Props extends object = {}>(
     }
 
     componentDidMount() {
-      this.node = ReactDOM.findDOMNode(this) as HTMLElement;
+      this.node = this.nodeRef.current
+        ? this.nodeRef.current
+        : (ReactDOM.findDOMNode(this) as HTMLElement);
       this.setState(() => this.getRects());
     }
 
@@ -62,7 +69,16 @@ export default function withBoundingRects<Props extends object = {}>(
     }
 
     render() {
-      return <BaseComponent getRects={this.getRects} {...this.state} {...this.props} />;
+      return (
+        <BaseComponent
+          getRects={this.getRects}
+          {...this.state}
+          {...this.props}
+          nodeRef={(params: React.RefObject<HTMLElement> | null) => {
+            this.nodeRef.current = params?.current;
+          }}
+        />
+      );
     }
   };
 }
diff --git a/packages/visx-tooltip/src/tooltips/Tooltip.tsx b/packages/visx-tooltip/src/tooltips/Tooltip.tsx
@@ -43,30 +43,42 @@ export const defaultStyles: React.CSSProperties = {
   pointerEvents: 'none',
 };
 
-export default function Tooltip({
-  className,
-  top,
-  left,
-  offsetLeft = 10,
-  offsetTop = 10,
-  style = defaultStyles,
-  children,
-  unstyled = false,
-  applyPositionStyle = false,
-  ...restProps
-}: TooltipProps & React.HTMLProps<HTMLDivElement>) {
-  return (
-    <div
-      className={cx('visx-tooltip', className)}
-      style={{
-        top: top == null || offsetTop == null ? top : top + offsetTop,
-        left: left == null || offsetLeft == null ? left : left + offsetLeft,
-        ...(applyPositionStyle && { position: 'absolute' }),
-        ...(!unstyled && style),
-      }}
-      {...restProps}
-    >
-      {children}
-    </div>
-  );
-}
+const Tooltip = React.forwardRef<
+  HTMLDivElement,
+  TooltipProps & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    {
+      className,
+      top,
+      left,
+      offsetLeft = 10,
+      offsetTop = 10,
+      style = defaultStyles,
+      children,
+      unstyled = false,
+      applyPositionStyle = false,
+      ...restProps
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cx('visx-tooltip', className)}
+        style={{
+          top: top == null || offsetTop == null ? top : top + offsetTop,
+          left: left == null || offsetLeft == null ? left : left + offsetLeft,
+          ...(applyPositionStyle && { position: 'absolute' }),
+          ...(!unstyled && style),
+        }}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;
diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx
@@ -5,8 +5,8 @@ import Tooltip, { TooltipProps, defaultStyles } from './Tooltip';
 import { TooltipPositionProvider } from '../context/TooltipPositionContext';
 
 export type TooltipWithBoundsProps = TooltipProps &
-  React.HTMLProps<HTMLDivElement> &
-  WithBoundingRectsProps;
+  React.HTMLAttributes<HTMLDivElement> &
+  WithBoundingRectsProps & { nodeRef?: React.Ref<HTMLDivElement> };
 
 function TooltipWithBounds({
   children,
@@ -19,6 +19,8 @@ function TooltipWithBounds({
   style = defaultStyles,
   top: initialTop = 0,
   unstyled = false,
+  nodeRef,
+
   ...otherProps
 }: TooltipWithBoundsProps) {
   let transform: React.CSSProperties['transform'];
@@ -61,6 +63,7 @@ function TooltipWithBounds({
 
   return (
     <Tooltip
+      ref={nodeRef}
       style={{
         left: 0,
         top: 0,