@octanejs/recharts 0.1.40 → 0.1.42

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) {

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;