Added ability to forward refs in Bar and Path components (#2673)

Co-authored-by: Cesar Perez <[email protected]>

.changeset/orange-timers-run.md

@@ -0,0 +1,6 @@
+---
+"victory-bar": minor
+"victory-core": minor
+---
+
+added ref forwarding for path and bar components

packages/victory-bar/src/bar.js

@@ -1,6 +1,6 @@
 import { assign } from "lodash";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { forwardRef } from "react";
 import { CommonProps, Helpers, Path } from "victory-core";
 import { getStyle, getBarWidth, getCornerRadius } from "./bar-helper-methods";
 import { getPolarBarPath, getBarPath } from "./path-helper-methods";
@@ -41,7 +41,8 @@ const evaluateProps = (props) => {
   });
 };
 
-const Bar = (props) => {
+// eslint-disable-next-line prefer-arrow-callback
+const Bar = forwardRef(function Bar(props, ref) {
   props = evaluateProps(props);
   const { polar, origin, style, barWidth, cornerRadius } = props;
 
@@ -63,8 +64,9 @@ const Bar = (props) => {
     shapeRendering: props.shapeRendering,
     transform: props.transform || defaultTransform,
     tabIndex: props.tabIndex,
+    ref,
   });
-};
+});
 
 Bar.propTypes = {
   ...CommonProps.primitiveProps,

packages/victory-core/src/victory-primitives/path.tsx

@@ -1,16 +1,20 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { VictoryPrimitiveShapeProps } from "./types";
 
-export const Path = (props: VictoryPrimitiveShapeProps) => {
+// eslint-disable-next-line prefer-arrow-callback
+export const Path = forwardRef(function Path(
+  props: VictoryPrimitiveShapeProps,
+  ref,
+) {
   // eslint-disable-next-line react/prop-types
   const { desc, ...rest } = props;
   return desc ? (
     // @ts-expect-error FIXME: "id cannot be a number"
-    <path {...rest}>
+    <path {...rest} ref={ref}>
       <desc>{desc}</desc>
     </path>
   ) : (
     // @ts-expect-error FIXME: "id cannot be a number"
-    <path {...rest} />
+    <path {...rest} ref={ref} />
   );
-};
+});

stories/victory-bar.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-magic-numbers*/
 /* eslint-disable react/no-multi-comp*/
-import React from "react";
+import React, { useRef, useEffect, useCallback } from "react";
 import { VictoryBar, Bar } from "victory-bar";
 import { VictoryChart } from "victory-chart";
 import { VictoryGroup } from "victory-group";
@@ -1028,3 +1028,48 @@ export const DisableInlineStyles = () => {
     </div>
   );
 };
+
+export const FocusWithRefs = () => {
+  const barsRef = useRef(null);
+
+  const getMap = () => {
+    if (!barsRef.current) {
+      // Initialize the Map on first usage.
+      barsRef.current = new Map();
+    }
+    return barsRef.current;
+  };
+
+  const focusOnBar = (id) => {
+    const map = getMap();
+    const node = map.get(id);
+    node.focus();
+  };
+
+  useEffect(() => {
+    if (barsRef.current) {
+      focusOnBar("1");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setRef = useCallback((node) => {
+    const map = getMap();
+    if (node) {
+      map.set(node.attributes.index.value, node);
+    }
+  }, []);
+
+  return (
+    <div style={containerStyle}>
+      <VictoryChart horizontal {...defaultChartProps} domainPadding={10}>
+        <VictoryBar
+          data={getData(5)}
+          labels={({ datum }) => `x: ${datum.x}`}
+          labelComponent={<VictoryTooltip active />}
+          dataComponent={<Bar tabIndex={0} ref={setRef} />}
+        />
+      </VictoryChart>
+    </div>
+  );
+};