diff --git a/.changeset/clean-needles-grow.md b/.changeset/clean-needles-grow.md
new file mode 100644
index 000000000..393f7dcc9
--- /dev/null
+++ b/.changeset/clean-needles-grow.md
@@ -0,0 +1,5 @@
+---
+"victory-core": patch
+---
+
+Correctly type props in Victory Primitives
diff --git a/packages/victory-core/src/victory-primitives/circle.tsx b/packages/victory-core/src/victory-primitives/circle.tsx
index 6ab394c1e..2d9f45897 100644
--- a/packages/victory-core/src/victory-primitives/circle.tsx
+++ b/packages/victory-core/src/victory-primitives/circle.tsx
@@ -1,16 +1,26 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { evaluateProp } from "../victory-util/helpers";
import { VictoryPrimitiveShapeProps } from "./types";
-export const Circle = (props: VictoryPrimitiveShapeProps) => {
- // eslint-disable-next-line react/prop-types
- const { desc, ...rest } = props;
- return desc ? (
- // @ts-expect-error FIXME: "id cannot be a number"
-
- {desc}
-
- ) : (
- // @ts-expect-error FIXME: "id cannot be a number"
-
- );
-};
+export const Circle = forwardRef(
+ (props, ref) => {
+ /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+ * origin conflicts with the SVG element's origin attribute
+ */
+ const { desc, id, tabIndex, origin, ...rest } = props;
+
+ const svgProps: React.SVGProps = {
+ vectorEffect: "non-scaling-stroke",
+ id: evaluateProp(id, props)?.toString(),
+ tabIndex: evaluateProp(tabIndex, props),
+ ...rest,
+ };
+ return desc ? (
+
+ {desc}
+
+ ) : (
+
+ );
+ },
+);
diff --git a/packages/victory-core/src/victory-primitives/clip-path.tsx b/packages/victory-core/src/victory-primitives/clip-path.tsx
index 57a62205c..708feb60e 100644
--- a/packages/victory-core/src/victory-primitives/clip-path.tsx
+++ b/packages/victory-core/src/victory-primitives/clip-path.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import PropTypes from "prop-types";
import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
export interface ClipPathProps extends VictoryCommonPrimitiveProps {
@@ -9,17 +8,6 @@ export interface ClipPathProps extends VictoryCommonPrimitiveProps {
export const ClipPath = (props: ClipPathProps) => (
- {
- // @ts-expect-error FIXME: "id cannot be a number"
- {props.children}
- }
+ {{props.children}}
);
-
-ClipPath.propTypes = {
- children: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.node),
- PropTypes.node,
- ]),
- clipId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
diff --git a/packages/victory-core/src/victory-primitives/line.tsx b/packages/victory-core/src/victory-primitives/line.tsx
index b62689406..51e876179 100644
--- a/packages/victory-core/src/victory-primitives/line.tsx
+++ b/packages/victory-core/src/victory-primitives/line.tsx
@@ -1,16 +1,27 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { evaluateProp } from "../victory-util/helpers";
import { VictoryPrimitiveShapeProps } from "./types";
-export const Line = (props: VictoryPrimitiveShapeProps) => {
- // eslint-disable-next-line react/prop-types
- const { desc, ...rest } = props;
- return desc ? (
- // @ts-expect-error FIXME: "id cannot be a number"
-
- {desc}
-
- ) : (
- // @ts-expect-error FIXME: "id cannot be a number"
-
- );
-};
+export const Line = forwardRef(
+ (props, ref) => {
+ /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+ * origin conflicts with the SVG element's origin attribute
+ */
+ const { desc, id, tabIndex, origin, ...rest } = props;
+
+ const svgProps: React.SVGProps = {
+ vectorEffect: "non-scaling-stroke",
+ id: evaluateProp(id, props)?.toString(),
+ tabIndex: evaluateProp(tabIndex, props),
+ ...rest,
+ };
+
+ return desc ? (
+
+ {desc}
+
+ ) : (
+
+ );
+ },
+);
diff --git a/packages/victory-core/src/victory-primitives/path.tsx b/packages/victory-core/src/victory-primitives/path.tsx
index c32f7aa13..98f3577f0 100644
--- a/packages/victory-core/src/victory-primitives/path.tsx
+++ b/packages/victory-core/src/victory-primitives/path.tsx
@@ -1,20 +1,26 @@
import React, { forwardRef } from "react";
+import { evaluateProp } from "../victory-util/helpers";
import { VictoryPrimitiveShapeProps } from "./types";
-// 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"
-
- {desc}
-
- ) : (
- // @ts-expect-error FIXME: "id cannot be a number"
-
- );
-});
+export const Path = forwardRef(
+ (props, ref) => {
+ /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+ * origin conflicts with the SVG element's origin attribute
+ */
+ const { desc, id, tabIndex, origin, ...rest } = props;
+
+ const svgProps: React.SVGProps = {
+ id: evaluateProp(id, props)?.toString(),
+ tabIndex: evaluateProp(tabIndex, props),
+ ...rest,
+ };
+
+ return desc ? (
+
+ {desc}
+
+ ) : (
+
+ );
+ },
+);
diff --git a/packages/victory-core/src/victory-primitives/rect.tsx b/packages/victory-core/src/victory-primitives/rect.tsx
index 7db46bbbd..d4f688cbc 100644
--- a/packages/victory-core/src/victory-primitives/rect.tsx
+++ b/packages/victory-core/src/victory-primitives/rect.tsx
@@ -1,16 +1,27 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { evaluateProp } from "../victory-util/helpers";
import { VictoryPrimitiveShapeProps } from "./types";
-export const Rect = (props: VictoryPrimitiveShapeProps) => {
- // eslint-disable-next-line react/prop-types
- const { desc, ...rest } = props;
- return desc ? (
- // @ts-expect-error FIXME: "id cannot be a number"
-
- {desc}
-
- ) : (
- // @ts-expect-error FIXME: "id cannot be a number"
-
- );
-};
+export const Rect = forwardRef(
+ (props, ref) => {
+ /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+ * origin conflicts with the SVG element's origin attribute
+ */
+ const { desc, id, tabIndex, origin, ...rest } = props;
+
+ const svgProps: React.SVGProps = {
+ vectorEffect: "non-scaling-stroke",
+ id: evaluateProp(id, props)?.toString(),
+ tabIndex: evaluateProp(tabIndex, props),
+ ...rest,
+ };
+
+ return desc ? (
+
+ {desc}
+
+ ) : (
+
+ );
+ },
+);
diff --git a/packages/victory-core/src/victory-primitives/text.tsx b/packages/victory-core/src/victory-primitives/text.tsx
index c617b3d16..301055ec2 100644
--- a/packages/victory-core/src/victory-primitives/text.tsx
+++ b/packages/victory-core/src/victory-primitives/text.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import PropTypes from "prop-types";
+import { evaluateProp } from "../victory-util/helpers";
import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
export interface TextProps extends VictoryCommonPrimitiveProps {
@@ -9,19 +9,22 @@ export interface TextProps extends VictoryCommonPrimitiveProps {
}
export const Text = (props: TextProps) => {
- const { children, title, desc, ...rest } = props;
+ /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+ * origin conflicts with the SVG element's origin attribute
+ */
+ const { children, desc, id, origin, tabIndex, title, ...rest } = props;
+
+ const svgProps: React.SVGProps = {
+ id: evaluateProp(id, props)?.toString(),
+ tabIndex: evaluateProp(tabIndex, props),
+ ...rest,
+ };
+
return (
- // @ts-expect-error FIXME: "id cannot be a number"
-
+
{title && {title}}
{desc && {desc}}
{children}
);
};
-
-Text.propTypes = {
- children: PropTypes.node,
- desc: PropTypes.string,
- title: PropTypes.string,
-};
diff --git a/packages/victory-core/src/victory-primitives/tspan.tsx b/packages/victory-core/src/victory-primitives/tspan.tsx
index 13ea27fae..48936dd60 100644
--- a/packages/victory-core/src/victory-primitives/tspan.tsx
+++ b/packages/victory-core/src/victory-primitives/tspan.tsx
@@ -1,7 +1,18 @@
import React from "react";
+import { evaluateProp } from "../victory-util/helpers";
import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
-export const TSpan = (props: VictoryCommonPrimitiveProps) => (
- // @ts-expect-error FIXME: "id cannot be a number"
-
-);
+export const TSpan = (props: VictoryCommonPrimitiveProps) => {
+ /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+ * origin conflicts with the SVG element's origin attribute
+ */
+ const { desc, id, tabIndex, origin, ...rest } = props;
+
+ const svgProps: React.SVGProps = {
+ id: evaluateProp(id, props)?.toString(),
+ tabIndex: evaluateProp(tabIndex, props),
+ ...rest,
+ };
+
+ return ;
+};
diff --git a/packages/victory-core/src/victory-util/user-props.ts b/packages/victory-core/src/victory-util/user-props.ts
index dd75b5df3..2e86ca01a 100644
--- a/packages/victory-core/src/victory-util/user-props.ts
+++ b/packages/victory-core/src/victory-util/user-props.ts
@@ -1,4 +1,5 @@
import * as React from "react";
+import { evaluateProp } from "./helpers";
/*
USER_PROPS_SAFELIST is to contain any string deemed safe for user props.
@@ -54,19 +55,6 @@ const testIfSafeProp = (key: string): key is SafeAttribute => {
return false;
};
-/**
- * Gets the value from props if a function value is provided
- * @param {any} value: maybe function value
- * @param {Object} props: props object
- * @returns {any} newValue
- */
-const getValue = (value, props) => {
- if (typeof value === "function") {
- return value(props);
- }
- return value;
-};
-
/**
* getSafeUserProps - function that takes in a props object and removes any
* key-value entries that do not match filter strings in the USER_PROPS_SAFELIST
@@ -83,7 +71,7 @@ export const getSafeUserProps = (
Object.entries(propsToFilter)
.filter(([key]) => testIfSafeProp(key))
.map(([key, value]) => {
- return [key, getValue(value, props)];
+ return [key, evaluateProp(value, props)];
}),
);
};