@octanejs/recharts 0.1.41 → 0.1.43

package/src/polar/PolarAngleAxis.tsrx

@@ -1,22 +1,24 @@
-import * as React from 'octane';
-import {
+import type {
 	FunctionComponent,
-	ReactNode,
+	NativeMouseEvent,
+	NativeTouchEvent,
+	OctaneNode,
 	SVGProps,
-	useEffect,
-	useMemo,
-	type OctaneNode,
-} from 'octane';
+	SVGPropsForHost,
+} from '../util/OctaneTypes.ts';
+import * as React from 'octane';
+import { useEffect, useMemo } from 'octane';
 import { clsx } from 'clsx';
-import { Layer } from '../container/Layer';
-import { Dot } from '../shape/Dot';
-import { Polygon } from '../shape/Polygon';
-import { Text, TextAnchor, TextVerticalAnchor } from '../component/Text';
+import { Layer } from '../container/Layer.tsrx';
+import { Dot } from '../shape/Dot.tsrx';
+import { Polygon } from '../shape/Polygon.tsrx';
+import { Text, TextAnchor, TextVerticalAnchor } from '../component/Text.tsrx';
 import {
 	adaptEventsOfChild,
 	AxisDomain,
+	AxisTick,
 	AxisDomainTypeInput,
-	BaseTickContentProps,
+	PolarTickContentProps,
 	EvaluatedAxisDomainType,
 	PresentationAttributesAdaptChildEvent,
 	RenderableAxisProps,
@@ -40,7 +42,7 @@ import {
 	svgPropertiesNoEventsFromUnknown,
 } from '../util/svgPropertiesNoEvents';
 import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
-import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { RechartsScale } from '../util/scale/RechartsScale';
 import type { CustomScaleDefinition } from '../util/scale/CustomScaleDefinition';
 import { usePolarChartLayout } from '../context/chartLayoutContext';
@@ -68,7 +70,7 @@ export interface PolarAngleAxisProps<DataPointType = any, DataValueType = any> e
  * @example <PolarAngleAxis axisLine={false} />
  * @example <PolarAngleAxis stroke='red' strokeWidth={2} strokeDasharray={4} />
  */
-	axisLine?: boolean | SVGProps<SVGLineElement>;
+	axisLine?: boolean | SVGProps<SVGCircleElement | SVGPathElement>;
 	/**
  * @defaultValue false
  */
@@ -166,12 +168,12 @@ export interface PolarAngleAxisProps<DataPointType = any, DataValueType = any> e
  * - `false`: Do not render any tick labels.
  * - `true`: Render tick labels with default settings.
  * - `object`: An object of props to be merged into the internally calculated tick props.
- * - `ReactElement`: A custom React element to be used as the tick label.
+ * - `OctaneElement`: A custom React element to be used as the tick label.
  * - `function`: A function that returns a React element for custom rendering of tick labels.
  *
  * @defaultValue true
  */
-	tick?: TickProp<BaseTickContentProps>;
+	tick?: TickProp<PolarTickContentProps>;
 	/**
  * The count of axis ticks. Not used if 'type' is 'category'.
  */
@@ -194,9 +196,9 @@ export interface PolarAngleAxisProps<DataPointType = any, DataValueType = any> e
  */
 	tickSize?: number;
 	/**
- * The array of every tick's value and angle.
+ * The array of tick values to map through the axis scale.
  */
-	ticks?: ReadonlyArray<TickItem>;
+	ticks?: ReadonlyArray<AxisTick>;
 	/**
  * The type of axis.
  *
@@ -228,45 +230,45 @@ type PolarAngleAxisEvents = {
 	/**
  * The customized event handler of click on the ticks of this axis
  */
-	onClick?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onClick?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mousedown on the ticks of this axis
  */
-	onMouseDown?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onMouseDown?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseup on the ticks of this axis
  */
-	onMouseUp?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onMouseUp?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mousemove on the ticks of this axis
  */
-	onMouseMove?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onMouseMove?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseover on the ticks of this axis
  */
-	onMouseOver?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onMouseOver?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseout on the ticks of this axis
  */
-	onMouseOut?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onMouseOut?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseenter on the ticks of this axis
  */
-	onMouseEnter?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onMouseEnter?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseleave on the ticks of this axis
  */
-	onMouseLeave?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
-	onTouchStart?: (data: TickItem, index: number, e: React.TouchEvent<SVGTextElement>) => void;
-	onTouchMove?: (data: TickItem, index: number, e: React.TouchEvent<SVGTextElement>) => void;
-	onTouchEnd?: (data: TickItem, index: number, e: React.TouchEvent<SVGTextElement>) => void;
+	onMouseLeave?: (data: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
+	onTouchStart?: (data: TickItem, index: number, e: NativeTouchEvent<SVGGElement>) => void;
+	onTouchMove?: (data: TickItem, index: number, e: NativeTouchEvent<SVGGElement>) => void;
+	onTouchEnd?: (data: TickItem, index: number, e: NativeTouchEvent<SVGGElement>) => void;
 };
 
 type AxisSvgProps =
 	Omit<
-		PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
-		'scale' | 'type' | 'dangerouslySetInnerHTML'
-	>;
+		PresentationAttributesAdaptChildEvent<TickItem, SVGGElement>,
+		'scale' | 'type' | 'dangerouslySetInnerHTML' | 'ref'
+	> & { ref?: never };
 
 export type Props<DataPointType = any, DataValueType = any> =
 	AxisSvgProps & PolarAngleAxisProps<DataPointType, DataValueType>;
@@ -275,7 +277,7 @@ type PropsWithDefaults<DataPointType = any, DataValueType = any> =
 	RequiresDefaultProps<Props<DataPointType, DataValueType>, typeof defaultPolarAngleAxisProps>;
 
 type InternalPolarAngleAxisProps =
-	Omit<PropsWithDefaults, 'scale'> & {
+	Omit<PropsWithDefaults, 'scale' | 'ticks'> & {
 		cx: number;
 		cy: number;
 		radius: number;
@@ -287,11 +289,11 @@ const AXIS_TYPE = 'angleAxis';
 
 type AngleAxisSettingsReporter =
 	Omit<AngleAxisSettings, 'type'> & {
-		children: ReactNode;
+		children: OctaneNode;
 		type: AxisDomainTypeInput;
 	};
 
-function SetAngleAxisSettings(props: AngleAxisSettingsReporter): ReactNode {
+function SetAngleAxisSettings(props: AngleAxisSettingsReporter): OctaneNode {
 	const dispatch = useAppDispatch();
 	const layout = usePolarChartLayout();
 	const settings: AngleAxisSettings | undefined = useMemo(() => {
@@ -401,10 +403,9 @@ const AxisLine = (props: InternalPolarAngleAxisProps) => {
 	};
 
 	if (axisLineType === 'circle') {
-		// @ts-expect-error wrong SVG element type
 		return <Dot
 			className="recharts-polar-angle-axis-line"
-			{...axisLineProps}
+			{...axisLineProps as SVGPropsForHost<typeof axisLineProps, SVGCircleElement>}
 			cx={cx}
 			cy={cy}
 			r={radius}
@@ -412,17 +413,20 @@ const AxisLine = (props: InternalPolarAngleAxisProps) => {
 	}
 	const points = ticks.map((entry) => polarToCartesian(cx, cy, radius, entry.coordinate));
 
-	// @ts-expect-error wrong SVG element type
-	return <Polygon className="recharts-polar-angle-axis-line" {...axisLineProps} points={points} />;
+	return <Polygon
+		className="recharts-polar-angle-axis-line"
+		{...axisLineProps as SVGPropsForHost<typeof axisLineProps, SVGPathElement>}
+		points={points}
+	/>;
 };
 
 type TickItemProps = {
-	tick: TickProp<BaseTickContentProps>;
-	tickProps: BaseTickContentProps;
+	tick: TickProp<PolarTickContentProps>;
+	tickProps: PolarTickContentProps;
 	value: string | number;
 };
 
-const TickItemText = ({ tick, tickProps, value }: TickItemProps): ReactNode => {
+const TickItemText = ({ tick, tickProps, value }: TickItemProps): OctaneNode => {
 	if (!tick) {
 		return null;
 	}
@@ -449,14 +453,11 @@ const Ticks = (props: InternalPolarAngleAxisProps) => {
 		const lineCoord = getTickLineCoord(entry, props);
 		const textAnchor: TextAnchor = getTickTextAnchor(entry, props.orientation);
 		const verticalAnchor: TextVerticalAnchor = getTickTextVerticalAnchor(entry);
-		const tickProps: BaseTickContentProps = {
+		const tickProps: PolarTickContentProps = {
 			...axisProps,
-			// @ts-expect-error customTickProps is contributing unknown props
 			textAnchor,
 			verticalAnchor,
-			// @ts-expect-error customTickProps is contributing unknown props
 			stroke: 'none',
-			// @ts-expect-error customTickProps is contributing unknown props
 			fill: stroke,
 			...customTickProps,
 			index: i,
@@ -542,7 +543,6 @@ export function PolarAngleAxis<DataPointType = any, DataValueType = any>(
 		allowDecimals={props.allowDecimals}
 		tickCount={props.tickCount}
 		niceTicks={props.niceTicks ?? 'auto'}
-		// @ts-expect-error the type does not match. Is RadiusAxis really expecting what it says?
 		ticks={props.ticks}
 		tick={props.tick}
 		domain={props.domain}

package/src/polar/PolarGrid.tsrx

@@ -1,6 +1,7 @@
+import type { FunctionComponent, SVGProps } from '../util/OctaneTypes.ts';
 import { clsx } from 'clsx';
 import * as React from 'octane';
-import { SVGProps } from 'octane';
+
 import { polarToCartesian } from '../util/PolarUtils';
 import { AxisId } from '../state/cartesianAxisSlice';
 import { useAppSelector } from '../state/hooks';
@@ -8,7 +9,7 @@ import { selectPolarGridAngles, selectPolarGridRadii } from '../state/selectors/
 import { selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
 import { PolarViewBoxRequired } from '../util/types';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
-import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
 
@@ -107,7 +108,7 @@ interface PolarGridProps extends ZIndexable {
 	fillOpacity?: number | string;
 }
 
-export type Props = SVGProps<SVGLineElement> & PolarGridProps;
+export type Props = Omit<SVGProps<SVGLineElement>, 'ref'> & PolarGridProps;
 
 type PropsWithDefaults =
 	Props & {
@@ -148,7 +149,7 @@ const getPolygonPath = (
 };
 
 // Draw axis of radial line
-const PolarAngles: React.FC<PropsWithDefaults> = (props: PropsWithDefaults) => {
+const PolarAngles: FunctionComponent<PropsWithDefaults> = (props: PropsWithDefaults) => {
 	const { cx, cy, innerRadius, outerRadius, polarAngles, radialLines } = props;
 
 	if (!polarAngles || !polarAngles.length || !radialLines) {
@@ -174,7 +175,7 @@ const PolarAngles: React.FC<PropsWithDefaults> = (props: PropsWithDefaults) => {
 };
 
 // Draw concentric circles
-const ConcentricCircle: React.FC<ConcentricProps> = (props) => {
+const ConcentricCircle: FunctionComponent<ConcentricProps> = (props) => {
 	const { cx, cy, radius } = props;
 	const concentricCircleProps = {
 		...svgPropertiesNoEvents(props),
@@ -193,7 +194,7 @@ const ConcentricCircle: React.FC<ConcentricProps> = (props) => {
 };
 
 // Draw concentric polygons
-const ConcentricPolygon: React.FC<ConcentricProps> = (props: ConcentricProps) => {
+const ConcentricPolygon: FunctionComponent<ConcentricProps> = (props: ConcentricProps) => {
 	const { radius } = props;
 	const concentricPolygonProps = {
 		...svgPropertiesNoEvents(props),

package/src/polar/PolarRadiusAxis.tsrx

@@ -1,12 +1,19 @@
+import type {
+	FunctionComponent,
+	NativeMouseEvent,
+	OctaneElement,
+	OctaneNode,
+	SVGProps,
+} from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { FunctionComponent, ReactElement, ReactNode, SVGProps, useEffect, useMemo } from 'octane';
+import { useEffect, useMemo } from 'octane';
 import maxBy from 'es-toolkit/compat/maxBy';
 import minBy from 'es-toolkit/compat/minBy';
 
 import { clsx } from 'clsx';
-import { Text } from '../component/Text';
-import { PolarLabelContextProvider, PolarLabelFromLabelProp } from '../component/Label';
-import { Layer } from '../container/Layer';
+import { Text } from '../component/Text.tsrx';
+import { PolarLabelContextProvider, PolarLabelFromLabelProp } from '../component/Label.tsrx';
+import { Layer } from '../container/Layer.tsrx';
 import { polarToCartesian } from '../util/PolarUtils';
 import {
 	adaptEventsOfChild,
@@ -20,7 +27,7 @@ import {
 	AxisDomainTypeInput,
 	EvaluatedAxisDomainType,
 	TickProp,
-	BaseTickContentProps,
+	PolarTickContentProps,
 	AxisTick,
 } from '../util/types';
 import { addRadiusAxis, RadiusAxisSettings, removeRadiusAxis } from '../state/polarAxisSlice';
@@ -34,7 +41,7 @@ import {
 	svgPropertiesNoEventsFromUnknown,
 } from '../util/svgPropertiesNoEvents';
 import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
-import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { RechartsScale } from '../util/scale/RechartsScale';
 import type { CustomScaleDefinition } from '../util/scale/CustomScaleDefinition';
 import { usePolarChartLayout } from '../context/chartLayoutContext';
@@ -133,35 +140,35 @@ export interface PolarRadiusAxisProps<DataPointType = any, DataValueType = any>
 	/**
  * The customized event handler of click on the ticks of this axis
  */
-	onClick?: (data: any, index: number, e: React.MouseEvent) => void;
+	onClick?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mousedown on the ticks of this axis
  */
-	onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void;
+	onMouseDown?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseup on the ticks of this axis
  */
-	onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void;
+	onMouseUp?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mousemove on the ticks of this axis
  */
-	onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void;
+	onMouseMove?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseover on the ticks of this axis
  */
-	onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void;
+	onMouseOver?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseout on the ticks of this axis
  */
-	onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void;
+	onMouseOut?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseenter on the ticks of this axis
  */
-	onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void;
+	onMouseEnter?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseleave on the ticks of this axis
  */
-	onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void;
+	onMouseLeave?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * Allow the ticks of axis to be decimals or not.
  *
@@ -190,12 +197,12 @@ export interface PolarRadiusAxisProps<DataPointType = any, DataValueType = any>
  * - `false`: Do not render any tick labels.
  * - `true`: Render tick labels with default settings.
  * - `object`: An object of props to be merged into the internally calculated tick props.
- * - `ReactElement`: A custom React element to be used as the tick label.
+ * - `OctaneElement`: A custom React element to be used as the tick label.
  * - `function`: A function that returns a React element for custom rendering of tick labels.
  *
  * @defaultValue true
  */
-	tick?: TickProp<BaseTickContentProps>;
+	tick?: TickProp<PolarTickContentProps>;
 	ticks?: ReadonlyArray<AxisTick>;
 	/**
  * Z-Index of this component and its children. The higher the value,
@@ -211,7 +218,9 @@ export interface PolarRadiusAxisProps<DataPointType = any, DataValueType = any>
 }
 
 type AxisSvgProps =
-	Omit<PresentationAttributesAdaptChildEvent<any, SVGTextElement>, 'scale' | 'type'>;
+	Omit<PresentationAttributesAdaptChildEvent<any, SVGGElement>, 'scale' | 'type' | 'ref'> & {
+		ref?: never;
+	};
 
 export type Props<DataPointType = any, DataValueType = any> =
 	AxisSvgProps & PolarRadiusAxisProps<DataPointType, DataValueType>;
@@ -310,7 +319,7 @@ const getViewBox = (
 	};
 };
 
-const renderAxisLine = (props: InsideProps, ticks: ReadonlyArray<TickItem>): ReactElement => {
+const renderAxisLine = (props: InsideProps, ticks: ReadonlyArray<TickItem>): OctaneElement => {
 	const { cx, cy, angle, axisLine, ...others } = props;
 	const extent: [number, number] = ticks.reduce(
 		(result: [number, number], entry: TickItem): [number, number] => [
@@ -332,7 +341,6 @@ const renderAxisLine = (props: InsideProps, ticks: ReadonlyArray<TickItem>): Rea
 		y2: point1.y,
 	};
 
-	// @ts-expect-error wrong SVG element type
 	return <line className="recharts-polar-radius-axis-line" {...axisLineProps} />;
 };
 
@@ -340,7 +348,7 @@ const renderTickItem = (
 	option: Props['tick'],
 	tickProps: any,
 	value: string | number,
-): ReactNode => {
+): OctaneNode => {
 	let tickItem;
 
 	if (React.isValidElement(option)) {
@@ -357,7 +365,7 @@ const renderTickItem = (
 	return tickItem;
 };
 
-const renderTicks = (props: InsideProps, ticks: ReadonlyArray<TickItem>): ReactElement => {
+const renderTicks = (props: InsideProps, ticks: ReadonlyArray<TickItem>): OctaneElement => {
 	const { angle, tickFormatter, stroke, tick, ...others } = props;
 	const textAnchor = getTickTextAnchor(props.orientation);
 	const axisProps = svgPropertiesNoEvents(others);

package/src/polar/Radar.tsrx

@@ -1,20 +1,27 @@
+import type {
+	MutableRefObject,
+	NativeMouseEvent,
+	OctaneElement,
+	OctaneNode,
+	SVGProps,
+} from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { MouseEvent, MutableRefObject, ReactElement, ReactNode, SVGProps, useRef } from 'octane';
+import { useRef } from 'octane';
 import last from 'es-toolkit/compat/last';
 
 import { clsx } from 'clsx';
 import { interpolate, isNullish, noop } from '../util/DataUtils';
 import { polarToCartesian } from '../util/PolarUtils';
 import { getTooltipNameProp, getValueByDataKey } from '../util/ChartUtils';
-import { Polygon } from '../shape/Polygon';
-import { Layer } from '../container/Layer';
+import { Polygon } from '../shape/Polygon.tsrx';
+import { Layer } from '../container/Layer.tsrx';
 import {
 	CartesianLabelListContextProvider,
 	CartesianLabelListEntry,
 	ImplicitLabelListType,
 	LabelListFromLabelProp,
-} from '../component/LabelList';
-import { Dots } from '../component/Dots';
+} from '../component/LabelList.tsrx';
+import { Dots } from '../component/Dots.tsrx';
 import {
 	ActiveDotType,
 	AnimationDuration,
@@ -27,28 +34,28 @@ import {
 	TooltipType,
 	TrapezoidViewBox,
 } from '../util/types';
-import type { LegendPayload } from '../component/DefaultLegendContent';
-import { ActivePoints } from '../component/ActivePoints';
+import type { LegendPayload } from '../component/DefaultLegendContent.tsrx';
+import { ActivePoints } from '../component/ActivePoints.tsrx';
 import { TooltipPayloadConfiguration } from '../state/tooltipSlice';
 import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
 import { selectRadarPoints } from '../state/selectors/radarSelectors';
 import { useAppSelector } from '../state/hooks';
 import { useIsPanorama } from '../context/PanoramaContext';
 import { SetPolarLegendPayload } from '../state/SetLegendPayload';
-import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
+import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId.tsrx';
 import { SetPolarGraphicalItem } from '../state/SetGraphicalItem';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import {
 	AnimatedItems,
 	AnimationInterpolateFn,
 	useAnimationCallbacks,
-} from '../animation/AnimatedItems';
+} from '../animation/AnimatedItems.tsrx';
 import { AnimationMatchByProp, matchAnimationItems, matchByIndex } from '../animation/matchBy';
 import { useAnimationStartSnapshot } from '../animation/useAnimationStartSnapshot';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
 import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
 import { WithIdRequired } from '../util/useUniqueId';
-import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 import { RechartsScale } from '../util/scale/RechartsScale';
 import { usePolarChartLayout } from '../context/chartLayoutContext';
@@ -130,7 +137,7 @@ interface RadarProps<DataPointType = any, DataValueType = any> extends ZIndexabl
  * - `false`: no dots are drawn;
  * - `true`: renders the dots with default settings;
  * - `object`: the props of the dot. This will be merged with the internal calculated props of each dot;
- * - `ReactElement`: the custom dot element;
+ * - `OctaneElement`: the custom dot element;
  * - `function`: a render function of the custom dot.
  *
  * @defaultValue false
@@ -152,7 +159,7 @@ interface RadarProps<DataPointType = any, DataValueType = any> extends ZIndexabl
  * - `true`: renders default labels;
  * - `false`: no labels are rendered;
  * - `object`: the props of LabelList component;
- * - `ReactElement`: a custom SVG label element, such as `<text>` or `<g>`.
+ * - `OctaneElement`: a custom SVG label element, such as `<text>` or `<g>`.
  *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
  * - `function`: a render function of custom label.
  *
@@ -172,17 +179,17 @@ interface RadarProps<DataPointType = any, DataValueType = any> extends ZIndexabl
  * The customized event handler of animation start
  */
 	onAnimationStart?: () => void;
-	onMouseEnter?: (props: InternalRadarProps, e: MouseEvent<SVGPolygonElement>) => void;
-	onMouseLeave?: (props: InternalRadarProps, e: MouseEvent<SVGPolygonElement>) => void;
+	onMouseEnter?: (props: InternalRadarProps, e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseLeave?: (props: InternalRadarProps, e: NativeMouseEvent<SVGPathElement>) => void;
 	/**
  * @defaultValue 0
  */
 	radiusAxisId?: string | number;
 	/**
- * If set a ReactElement, the shape of radar can be customized.
+ * If set a OctaneElement, the shape of radar can be customized.
  * If set a function, the function will be called to render customized shape.
  */
-	shape?: ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>);
+	shape?: OctaneElement<SVGElement> | ((props: any) => OctaneElement<SVGElement>);
 	tooltipType?: TooltipType;
 	/**
  * @defaultValue 100
@@ -368,7 +375,7 @@ function RadarLabelListProvider({
 }: {
 	showLabels: boolean;
 	points: ReadonlyArray<RadarPoint>;
-	children: ReactNode;
+	children: OctaneNode;
 }) {
 	/*
  * Radar provides a Cartesian label list context. Do we want to also provide a polar label list context?
@@ -433,7 +440,7 @@ function StaticPolygon({
 
 	const { shape, isRange, connectNulls } = props;
 
-	const handleMouseEnter = (e: MouseEvent<SVGPolygonElement>) => {
+	const handleMouseEnter = (e: NativeMouseEvent<SVGPathElement>) => {
 		const { onMouseEnter } = props;
 
 		if (onMouseEnter) {
@@ -441,7 +448,7 @@ function StaticPolygon({
 		}
 	};
 
-	const handleMouseLeave = (e: MouseEvent<SVGPolygonElement>) => {
+	const handleMouseLeave = (e: NativeMouseEvent<SVGPathElement>) => {
 		const { onMouseLeave } = props;
 
 		if (onMouseLeave) {