@octanejs/recharts 0.1.41 → 0.1.43

package/src/polar/RadialBar.tsrx

@@ -1,5 +1,16 @@
+import type { CellPropsFor } from '../component/Cell';
+import type { RegisteredCell } from '../context/CellsContext.ts';
+
+import type {
+	ComponentProps,
+	MutableRefObject,
+	NativeMouseEvent,
+	NativeTouchEvent,
+	OctaneElement,
+	OctaneNode,
+} from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { MutableRefObject, ReactElement, ReactNode, useRef } from 'octane';
+import { useRef } from 'octane';
 import { clsx } from 'clsx';
 
 import { Series } from 'victory-vendor/d3-shape';
@@ -8,15 +19,15 @@ import {
 	parseCornerRadius,
 	RadialBarSector,
 	RadialBarSectorProps,
-} from '../util/RadialBarUtils';
-import { Props as SectorProps } from '../shape/Sector';
-import { Layer } from '../container/Layer';
+} from '../util/RadialBarUtils.tsrx';
+import { defaultSectorProps, type Props as SectorProps } from '../shape/Sector.tsrx';
+import { Layer } from '../container/Layer.tsrx';
 import {
 	ImplicitLabelListType,
 	LabelListFromLabelProp,
 	PolarLabelListContextProvider,
 	PolarLabelListEntry,
-} from '../component/LabelList';
+} from '../component/LabelList.tsrx';
 import { interpolate, mathSign, noop } from '../util/DataUtils';
 import {
 	BarPositionPosition,
@@ -33,9 +44,9 @@ import {
 	EasingInput,
 	DataConsumer,
 	DataKey,
+	GeometrySector,
 	LayoutType,
 	LegendType,
-	PolarViewBoxRequired,
 	PresentationAttributesAdaptChildEvent,
 	ShapeAnimationProps,
 	TickItem,
@@ -50,7 +61,7 @@ import {
 } from '../context/tooltipContext';
 import { TooltipPayloadConfiguration } from '../state/tooltipSlice';
 import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
-import { Formatter } from '../component/DefaultTooltipContent';
+import { Formatter } from '../component/DefaultTooltipContent.tsrx';
 import { BaseAxisWithScale } from '../state/selectors/axisSelectors';
 import { ChartData } from '../state/chartDataSlice';
 import {
@@ -64,10 +75,10 @@ import {
 	AnimatedItems,
 	AnimationInterpolateFn,
 	useAnimationCallbacks,
-} from '../animation/AnimatedItems';
+} from '../animation/AnimatedItems.tsrx';
 import { AnimationMatchByProp, matchAppend } from '../animation/matchBy';
 import { AxisId } from '../state/cartesianAxisSlice';
-import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
+import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId.tsrx';
 import type { RadialBarSettings } from '../state/types/RadialBarSettings';
 import { SetPolarGraphicalItem } from '../state/SetGraphicalItem';
 import {
@@ -76,7 +87,7 @@ import {
 } from '../util/svgPropertiesNoEvents';
 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 { getZIndexFromUnknown } from '../zIndex/getZIndexFromUnknown';
 import { usePolarChartLayout } from '../context/chartLayoutContext';
@@ -85,7 +96,7 @@ import { CellsContext, useCellRegistry } from '../context/CellsContext';
 const STABLE_EMPTY_ARRAY: readonly RadialBarDataItem[] = [];
 
 export type RadialBarDataItem =
-	SectorProps & PolarViewBoxRequired & TooltipTriggerInfo & {
+	SectorProps & GeometrySector & TooltipTriggerInfo & {
 		value?: any;
 		payload?: any;
 		background?: SectorProps;
@@ -107,7 +118,7 @@ function RadialBarLabelListProvider({
 }: {
 	showLabels: boolean;
 	sectors: ReadonlyArray<RadialBarDataItem>;
-	children: ReactNode;
+	children: OctaneNode;
 }) {
 	const labelListEntries: ReadonlyArray<PolarLabelListEntry> = sectors.map(
 		(sector: RadialBarDataItem): PolarLabelListEntry => ({
@@ -175,7 +186,7 @@ function RadialBarSectors({
 			const onMouseLeave = onMouseLeaveFromContext(entry, i);
 			const onClick = onClickFromContext(entry, i);
 
-			const radialBarSectorProps: React.ComponentProps<typeof RadialBarSector> = {
+			const radialBarSectorProps: ComponentProps<typeof RadialBarSector> = {
 				...baseProps,
 				cornerRadius: parseCornerRadius(cornerRadius),
 				...entry,
@@ -371,7 +382,7 @@ interface InternalRadialBarProps<DataPointType = any, DataValueType = any> exten
  *  - `false`: no background;
  *  - `true`: renders default background;
  *  - `object`: the props of background rectangle;
- *  - `ReactElement`: a custom background element;
+ *  - `OctaneElement`: a custom background element;
  *  - `function`: a render function of custom background.
  *
  * @defaultValue false
@@ -413,7 +424,7 @@ interface InternalRadialBarProps<DataPointType = any, DataValueType = any> exten
  * - `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.
  *
@@ -441,58 +452,58 @@ interface InternalRadialBarProps<DataPointType = any, DataValueType = any> exten
 	/**
  * The customized event handler of click in this chart.
  */
-	onClick?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onClick?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mousedown in this chart.
  */
-	onMouseDown?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onMouseDown?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mouseup in this chart.
  */
-	onMouseUp?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onMouseUp?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mousemove in this chart.
  */
-	onMouseMove?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onMouseMove?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mouseover in this chart.
  */
-	onMouseOver?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onMouseOver?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mouseout in this chart.
  */
-	onMouseOut?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onMouseOut?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mouseenter in this chart.
  */
-	onMouseEnter?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onMouseEnter?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mouseleave in this chart.
  */
-	onMouseLeave?: (data: RadialBarDataItem, index: number, e: React.MouseEvent<
+	onMouseLeave?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
-	onTouchStart?: (data: RadialBarDataItem, index: number, e: React.TouchEvent<
+	onTouchStart?: (data: RadialBarDataItem, index: number, e: NativeTouchEvent<
 		SVGGraphicsElement
 	>) => void;
-	onTouchMove?: (data: RadialBarDataItem, index: number, e: React.TouchEvent<
+	onTouchMove?: (data: RadialBarDataItem, index: number, e: NativeTouchEvent<
 		SVGGraphicsElement
 	>) => void;
-	onTouchEnd?: (data: RadialBarDataItem, index: number, e: React.TouchEvent<
+	onTouchEnd?: (data: RadialBarDataItem, index: number, e: NativeTouchEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
@@ -500,7 +511,7 @@ interface InternalRadialBarProps<DataPointType = any, DataValueType = any> exten
  */
 	radiusAxisId?: AxisId;
 	/**
- * If set a ReactElement, the shape of radial bar sectors can be customized.
+ * If set a OctaneElement, the shape of radial bar sectors can be customized.
  * If set a function, the function will be called to render customized shape.
  * During animations, the function shape also receives `animationElapsedTime`, `isAnimating`, and `isEntrance`.
  * By default, renders a sector.
@@ -594,10 +605,9 @@ function renderBackground(props: InternalProps, sectors?: ReadonlyArray<RadialBa
 			return null;
 		}
 
-		const sectorProps: React.ComponentProps<typeof RadialBarSector> = {
+		const sectorProps: ComponentProps<typeof RadialBarSector> = {
 			cornerRadius: parseCornerRadius(cornerRadius),
 			...rest,
-			// @ts-expect-error backgroundProps is contributing unknown props
 			fill: '#eee',
 			...background,
 			...backgroundProps,
@@ -755,7 +765,7 @@ export function computeRadialBarDataItems({
 	cx: number;
 	cy: number;
 	angleAxisTicks: ReadonlyArray<TickItem> | undefined;
-	cells: ReadonlyArray<ReactElement> | undefined;
+	cells: ReadonlyArray<RegisteredCell> | undefined;
 	startAngle: number;
 	endAngle: number;
 }): ReadonlyArray<RadialBarDataItem> {
@@ -764,12 +774,18 @@ export function computeRadialBarDataItems({
 	}
 
 	return (displayedData ?? []).map((entry: unknown, index: number) => {
-		let value, innerRadius: number | null | undefined, outerRadius: | number
-		| undefined, startAngle: number | null, endAngle: number, backgroundSector;
+		let value;
+		let innerRadius: number | null | undefined;
+		let outerRadius: number | undefined;
+		let startAngle: number | null;
+		let endAngle: number | undefined;
+		let backgroundSector;
 
 		if (stackedData) {
-			// @ts-expect-error truncateByDomain expects only numerical domain, but it can received categorical domain too
-			value = truncateByDomain(stackedData[dataStartIndex + index], stackedDomain);
+			value = truncateByDomain(
+				stackedData[dataStartIndex + index],
+				stackedDomain as readonly number[],
+			);
 		} else {
 			value = getValueByDataKey(entry, dataKey);
 			if (!Array.isArray(value)) {
@@ -833,20 +849,21 @@ export function computeRadialBarDataItems({
 			}
 		}
 
+		// Unresolved scale values use the same zero geometry as the default
+		// Sector. Keep the row so custom shapes, Cell overrides, and tooltip
+		// indices still refer to the original datum.
 		return {
-			// @ts-expect-error can't spread unknown
-			...entry,
+			...entry as Record<string, unknown>,
 			...backgroundSector,
 			payload: entry,
 			value: stackedData ? value : value[1],
 			cx,
 			cy,
-			innerRadius,
-			outerRadius,
-			startAngle,
-			// @ts-expect-error endAngle is used before assigned (?)
-			endAngle,
-			...cells && cells[index] && cells[index].props,
+			innerRadius: innerRadius ?? defaultSectorProps.innerRadius,
+			outerRadius: outerRadius ?? defaultSectorProps.outerRadius,
+			startAngle: startAngle ?? defaultSectorProps.startAngle,
+			endAngle: endAngle ?? defaultSectorProps.endAngle,
+			...cells && cells[index] && cells[index].props as CellPropsFor<SVGPathElement>,
 		} satisfies RadialBarDataItem;
 	});
 }

package/src/polar/{defaultPolarAngleAxisProps.js → defaultPolarAngleAxisProps.ts}

@@ -1,10 +1,10 @@
-// Vendored verbatim from recharts@3.9.2 es6/polar/defaultPolarAngleAxisProps.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { Props } from './PolarAngleAxis.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
-export var defaultPolarAngleAxisProps = {
+
+export const defaultPolarAngleAxisProps = {
 	allowDecimals: false,
-	allowDuplicatedCategory: true,
-	// if I set this to false then Tooltip synchronisation stops working in Radar, wtf
+	allowDuplicatedCategory: true, // if I set this to false then Tooltip synchronisation stops working in Radar, wtf
 	allowDataOverflow: false,
 	angle: 0,
 	angleAxisId: 0,
@@ -24,4 +24,4 @@ export var defaultPolarAngleAxisProps = {
 	tickSize: 8,
 	type: 'auto',
 	zIndex: DefaultZIndexes.axis,
-};
+} as const satisfies Props;

package/src/polar/{defaultPolarRadiusAxisProps.js → defaultPolarRadiusAxisProps.ts}

@@ -1,7 +1,8 @@
-// Vendored verbatim from recharts@3.9.2 es6/polar/defaultPolarRadiusAxisProps.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { Props } from './PolarRadiusAxis.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
-export var defaultPolarRadiusAxisProps = {
+
+export const defaultPolarRadiusAxisProps = {
 	allowDataOverflow: false,
 	allowDecimals: false,
 	allowDuplicatedCategory: true,
@@ -21,4 +22,4 @@ export var defaultPolarRadiusAxisProps = {
 	tickLine: true,
 	type: 'auto',
 	zIndex: DefaultZIndexes.axis,
-};
+} as const satisfies Props;

package/src/shape/Cross.tsrx

@@ -1,14 +1,26 @@
+import type { SVGProps } from '../util/OctaneTypes.ts';
+
+interface CrossProps {
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	top?: number;
+	left?: number;
+	className?: SVGProps<SVGPathElement>['className'];
+}
+export type Props = SVGProps<SVGPathElement> & CrossProps;
 // Port of shape/Cross.tsx — the axis-cursor crosshair (a vertical + horizontal
 // line pair as one path).
 import { clsx } from 'clsx';
 import { isNumber } from '../util/DataUtils';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 
-function getPath(x, y, width, height, top, left) {
+function getPath(x: number, y: number, width: number, height: number, top: number, left: number) {
 	return 'M' + x + ',' + top + 'v' + height + 'M' + left + ',' + y + 'h' + width;
 }
 
-export function Cross(crossProps) {
+export function Cross(crossProps: Props) {
 	const { x = 0, y = 0, top = 0, left = 0, width = 0, height = 0, className, ...rest } = crossProps;
 	const props = { x, y, top, left, width, height, ...rest };
 	if (

package/src/shape/Curve.tsrx

@@ -1,3 +1,83 @@
+import type { Ref, SVGProps } from '../util/OctaneTypes.ts';
+import type {
+	Area as D3AreaCurve,
+	CurveFactory,
+	Line as D3LineCurve,
+} from 'victory-vendor/d3-shape';
+import type {
+	Coordinate,
+	LayoutType,
+	NullableCoordinate,
+	PresentationAttributesWithProps,
+	RechartsMouseEventHandler,
+} from '../util/types';
+
+interface CurveFactories {
+	[index: string]: CurveFactory;
+}
+export type CurveType =
+	| 'basis'
+	| 'basisClosed'
+	| 'basisOpen'
+	| 'bumpX'
+	| 'bumpY'
+	| 'bump'
+	| 'linear'
+	| 'linearClosed'
+	| 'natural'
+	| 'monotoneX'
+	| 'monotoneY'
+	| 'monotone'
+	| 'step'
+	| 'stepBefore'
+	| 'stepAfter'
+	| CurveFactory;
+type AreaPoint =
+	Coordinate & {
+		base: Coordinate;
+	};
+type NullableAreaPoint =
+	NullableCoordinate & {
+		base?: NullableCoordinate;
+	};
+export type BaseLineType = number | ReadonlyArray<NullableCoordinate>;
+interface CurveProps {
+	className?: SVGProps<SVGPathElement>['className'];
+	type?: CurveType;
+	layout?: LayoutType;
+	baseLine?: BaseLineType;
+	points?: ReadonlyArray<NullableCoordinate>;
+	connectNulls?: boolean;
+	path?: string;
+	pathRef?: Ref<SVGPathElement>;
+	strokeDasharray?: string | number;
+}
+export type CurveMouseEventHandler = RechartsMouseEventHandler<Props, SVGPathElement>;
+type CurveMouseEvents = {
+	onClick?: CurveMouseEventHandler;
+	onMouseEnter?: CurveMouseEventHandler;
+	onMouseLeave?: CurveMouseEventHandler;
+	onMouseDown?: CurveMouseEventHandler;
+	onMouseUp?: CurveMouseEventHandler;
+	onMouseMove?: CurveMouseEventHandler;
+	onMouseOver?: CurveMouseEventHandler;
+	onMouseOut?: CurveMouseEventHandler;
+};
+export type Props =
+	Omit<
+		PresentationAttributesWithProps<CurveProps, SVGPathElement>,
+		| 'type'
+		| 'points'
+		| 'onClick'
+		| 'onMouseEnter'
+		| 'onMouseLeave'
+		| 'onMouseDown'
+		| 'onMouseUp'
+		| 'onMouseMove'
+		| 'onMouseOver'
+		| 'onMouseOut'
+	> & CurveMouseEvents & CurveProps;
+type GetPathProps = Pick<Props, 'type' | 'points' | 'baseLine' | 'layout' | 'connectNulls'>;
 // Port of shape/Curve.tsx — the line/area path. The `d` string comes straight
 // from victory-vendor's d3-shape line/area generators (same dependency, same
 // version as upstream), so output is byte-identical by construction.
@@ -25,7 +105,7 @@ import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import { useChartLayout } from '../context/chartLayoutContext.ts';
 
-const CURVE_FACTORIES = {
+const CURVE_FACTORIES: CurveFactories = {
 	curveBasisClosed,
 	curveBasisOpen,
 	curveBasis,
@@ -41,12 +121,12 @@ const CURVE_FACTORIES = {
 	curveStepBefore,
 };
 
-const defined = (p) => isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y);
-const areaDefined = (d) => d.base != null && defined(d.base) && defined(d);
-const getX = (p) => p.x;
-const getY = (p) => p.y;
+const defined = (p: NullableCoordinate) => isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y);
+const areaDefined = (d: NullableAreaPoint) => d.base != null && defined(d.base) && defined(d);
+const getX = (p: Coordinate) => p.x;
+const getY = (p: Coordinate) => p.y;
 
-const getCurveFactory = (type, layout) => {
+const getCurveFactory = (type: CurveType, layout: LayoutType | undefined) => {
 	if (typeof type === 'function') {
 		return type;
 	}
@@ -63,7 +143,7 @@ const getCurveFactory = (type, layout) => {
 export const defaultCurveProps = {
 	connectNulls: false,
 	type: 'linear',
-};
+} as const satisfies Partial<Props>;
 
 /**
  * Calculate the path of curve. Returns null if points is an empty array.
@@ -75,52 +155,60 @@ export const getPath = ({
 	baseLine,
 	layout,
 	connectNulls = defaultCurveProps.connectNulls,
-}) => {
+}: GetPathProps): string | null => {
 	const curveFactory = getCurveFactory(type, layout);
-	const formatPoints =
+	const formatPoints: ReadonlyArray<NullableCoordinate> =
 		connectNulls ? points.filter(defined) : points;
 
 	// An area chart's array `baseLine` pairs each point with its baseline
 	// counterpart FIRST, so the `defined` filter drops both sides together.
 	if (Array.isArray(baseLine)) {
-		const areaPoints = points.map((entry, index) => ({ ...entry, base: baseLine[index] }));
-		let lineFunction;
+		const areaPoints: ReadonlyArray<NullableAreaPoint> = points.map(
+			(entry, index) => ({ ...entry, base: baseLine[index] }),
+		);
+		let lineFunction: D3AreaCurve<AreaPoint>;
 		if (layout === 'vertical') {
-			lineFunction = shapeArea().y(getY).x1(getX).x0((d) => d.base.x);
+			lineFunction = shapeArea<AreaPoint>().y(getY).x1(getX).x0((d) => d.base.x);
 		} else {
-			lineFunction = shapeArea().x(getX).y1(getY).y0((d) => d.base.y);
+			lineFunction = shapeArea<AreaPoint>().x(getX).y1(getY).y0((d) => d.base.y);
 		}
-		const nullableLineFunction = lineFunction.defined(areaDefined).curve(curveFactory);
-		const finalPoints =
+		// d3 runs the defined predicate before coordinate accessors; its single
+		// generic cannot express the nullable inputs accepted after this guard.
+		const nullableLineFunction = lineFunction.defined(areaDefined).curve(
+			curveFactory,
+		) as D3AreaCurve<NullableAreaPoint>;
+		const finalPoints: ReadonlyArray<NullableAreaPoint> =
 			connectNulls ? areaPoints.filter(areaDefined) : areaPoints;
 		return nullableLineFunction(finalPoints);
 	}
-	let lineFunction;
+	let lineFunction: D3LineCurve<Coordinate> | D3AreaCurve<Coordinate>;
 	if (layout === 'vertical' && isNumber(baseLine)) {
-		lineFunction = shapeArea().y(getY).x1(getX).x0(baseLine);
+		lineFunction = shapeArea<Coordinate>().y(getY).x1(getX).x0(baseLine);
 	} else if (isNumber(baseLine)) {
-		lineFunction = shapeArea().x(getX).y1(getY).y0(baseLine);
+		lineFunction = shapeArea<Coordinate>().x(getX).y1(getY).y0(baseLine);
 	} else {
-		lineFunction = shapeLine().x(getX).y(getY);
+		lineFunction = shapeLine<Coordinate>().x(getX).y(getY);
 	}
-	const nullableLineFunction = lineFunction.defined(defined).curve(curveFactory);
+	const nullableLineFunction = lineFunction.defined(defined).curve(curveFactory) as D3LineCurve<
+		NullableCoordinate
+	>;
 	return nullableLineFunction(formatPoints);
 };
 
-export function Curve(props) {
+export function Curve(props: Props) {
 	const { className, points, path, pathRef } = props;
 	const layout = useChartLayout();
 	if ((!points || !points.length) && !path) {
 		return null;
 	}
-	const getPathInput = {
+	const getPathInput: GetPathProps = {
 		type: props.type,
 		points: props.points,
 		baseLine: props.baseLine,
 		layout: props.layout || layout,
 		connectNulls: props.connectNulls,
 	};
-	const realPath =
+	const realPath: string | null | undefined =
 		points && points.length ? getPath(getPathInput) : path;
 	return <path
 		{...svgPropertiesNoEvents(props)}

package/src/shape/Dot.tsrx

@@ -1,10 +1,21 @@
+import type { SVGProps } from '../util/OctaneTypes.ts';
+import type { PresentationAttributesWithProps } from '../util/types';
+
+interface DotProps {
+	className?: SVGProps<SVGCircleElement>['className'];
+	cx?: number;
+	cy?: number;
+	r?: number | string;
+	clipDot?: boolean;
+}
+export type Props = PresentationAttributesWithProps<DotProps, SVGCircleElement> & DotProps;
 // Port of shape/Dot.tsx — a circle marker.
 import { clsx } from 'clsx';
 import { adaptEventHandlers } from '../util/types.ts';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import { isNumber } from '../util/DataUtils';
 
-export function Dot(props) {
+export function Dot(props: Props) {
 	const { cx, cy, r, className } = props;
 	const layerClass = clsx('recharts-dot', className);
 	if (isNumber(cx) && isNumber(cy) && isNumber(r)) {

package/src/shape/Polygon.tsrx

@@ -1,15 +1,33 @@
+import type { NativeMouseEvent, SVGProps } from '../util/OctaneTypes.ts';
+import type { Coordinate } from '../util/types';
+
+interface PolygonProps {
+	className?: SVGProps<SVGPathElement>['className'];
+	points?: ReadonlyArray<Coordinate>;
+	baseLinePoints?: ReadonlyArray<Coordinate>;
+	connectNulls?: boolean;
+	onClick?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseDown?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseUp?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseMove?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOver?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOut?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
+}
+export type Props = Omit<SVGProps<SVGPathElement>, 'points'> & PolygonProps;
 // Port of shape/Polygon.tsx — closed/segmented polygon paths (Radar,
 // PolarGrid). Path strings mirror upstream's roundTemplateLiteral output.
 import { clsx } from 'clsx';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 import { round } from '../util/round';
 
-function isValidatePoint(point) {
+function isValidatePoint(point: Coordinate | undefined) {
 	return point != null && point.x === +point.x && point.y === +point.y;
 }
 
-function getParsedPoints(points = []) {
-	let segmentPoints = [[]];
+function getParsedPoints(points: ReadonlyArray<Coordinate> = []) {
+	let segmentPoints: Coordinate[][] = [[]];
 	points.forEach((entry) => {
 		const lastLink = segmentPoints[segmentPoints.length - 1];
 		if (isValidatePoint(entry)) {
@@ -32,7 +50,7 @@ function getParsedPoints(points = []) {
 	return segmentPoints;
 }
 
-function getSinglePolygonPath(points, connectNulls) {
+function getSinglePolygonPath(points: ReadonlyArray<Coordinate>, connectNulls?: boolean) {
 	let segmentPoints = getParsedPoints(points);
 	if (connectNulls) {
 		segmentPoints = [segmentPoints.reduce((res, segPoints) => [...res, ...segPoints], [])];
@@ -47,13 +65,17 @@ function getSinglePolygonPath(points, connectNulls) {
 	return segmentPoints.length === 1 ? polygonPath + 'Z' : polygonPath;
 }
 
-function getRanglePath(points, baseLinePoints, connectNulls) {
+function getRanglePath(
+	points: ReadonlyArray<Coordinate>,
+	baseLinePoints: ReadonlyArray<Coordinate>,
+	connectNulls?: boolean,
+) {
 	const outerPath = getSinglePolygonPath(points, connectNulls);
 	return (outerPath.slice(-1) === 'Z' ? outerPath.slice(0, -1) : outerPath) + 'L' +
 		getSinglePolygonPath(Array.from(baseLinePoints).reverse(), connectNulls).slice(1);
 }
 
-export function Polygon(props) {
+export function Polygon(props: Props) {
 	const { points, className, baseLinePoints, connectNulls, ...others } = props;
 	if (!points || !points.length) {
 		return null;