@octanejs/recharts 0.1.41 → 0.1.42

package/src/chart/Sankey.tsrx

@@ -1,19 +1,18 @@
-import * as React from 'octane';
-import {
-	MouseEvent,
-	ReactElement,
-	ReactNode,
+import type {
+	CSSProperties,
+	NativeMouseEvent,
+	OctaneElement,
+	OctaneNode,
 	SVGProps,
-	useCallback,
-	useMemo,
-	useState,
-} from 'octane';
+} from '../util/OctaneTypes.ts';
+import * as React from 'octane';
+import { useCallback, useMemo, useState } from 'octane';
 import maxBy from 'es-toolkit/compat/maxBy';
 import sumBy from 'es-toolkit/compat/sumBy';
 import get from 'es-toolkit/compat/get';
-import { Surface } from '../container/Surface';
-import { Layer } from '../container/Layer';
-import { Props as RectangleProps, Rectangle } from '../shape/Rectangle';
+import { Surface } from '../container/Surface.tsrx';
+import { Layer } from '../container/Layer.tsrx';
+import { Props as RectangleProps, Rectangle } from '../shape/Rectangle.tsrx';
 import { getValueByDataKey } from '../util/ChartUtils';
 import {
 	Coordinate,
@@ -31,8 +30,8 @@ import {
 	useChartWidth,
 } from '../context/chartLayoutContext';
 import { TooltipPortalContext } from '../context/tooltipPortalContext';
-import { RechartsWrapper } from './RechartsWrapper';
-import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
+import { RechartsWrapper } from './RechartsWrapper.tsrx';
+import { RechartsStoreProvider } from '../state/RechartsStoreProvider.tsrx';
 import { useAppDispatch } from '../state/hooks';
 import {
 	mouseLeaveItem,
@@ -54,7 +53,7 @@ import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaul
 import { isPositiveNumber } from '../util/isWellBehavedNumber';
 import { isNotNil, noop } from '../util/DataUtils';
 import { WithIdRequired } from '../util/useUniqueId';
-import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
+import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId.tsrx';
 import { GraphicalItemId } from '../state/graphicalItemsSlice';
 import { initialEventSettingsState } from '../state/eventSettingsSlice';
 
@@ -412,7 +411,10 @@ const relaxRightToLeft = (
 	}
 };
 
-const updateYOfLinks = (tree: SankeyNode[], links: LinkDataItemDy[]): void => {
+const updateYOfLinks: (tree: SankeyNode[], links: LinkDataItemDy[]) => asserts links is SankeyLink[] = (
+	tree,
+	links,
+) => {
 	for (let i = 0, len = tree.length; i < len; i++) {
 		const node = tree[i];
 		if (node == null) {
@@ -662,7 +664,6 @@ export const computeData = ({
 	resolveNodeLinkCollisions(tree, depthTree, linksWithDy, height, nodePadding);
 	updateYOfLinks(tree, linksWithDy);
 
-	// @ts-expect-error updateYOfLinks modifies the links array to add sy and ty in place
 	const newLinks: ReadonlyArray<SankeyLink> = linksWithDy;
 
 	return { nodes: tree, links: newLinks };
@@ -681,12 +682,24 @@ const getLinkCoordinateOfTooltip = (item: LinkProps): Coordinate | undefined =>
 		: undefined;
 };
 
-type SankeyTooltipPayload = { payload: SankeyNode | SankeyLink; name: unknown; value: unknown };
+// Layout augments the user's data records, retaining arbitrary fields selected
+// by nameKey. Computed link payloads contain node objects, not source indices.
+type SankeyTooltipNode = SankeyNode & Record<string | number, unknown>;
+type SankeyTooltipLink =
+	Omit<LinkProps['payload'], 'source' | 'target'> & {
+		source: SankeyTooltipNode;
+		target: SankeyTooltipNode;
+	} & Record<string | number, unknown>;
+type SankeyTooltipPayload = {
+	payload: SankeyTooltipNode | SankeyTooltipLink;
+	name: unknown;
+	value: unknown;
+};
 
 const getPayloadOfTooltip = (
-	item: { payload: SankeyNode | SankeyLink },
+	item: { payload: SankeyTooltipPayload['payload'] },
 	type: SankeyElementType,
-	nameKey: DataKey<SankeyLink | SankeyNode, string> | undefined,
+	nameKey: Parameters<TooltipPayloadSearcher>[3],
 ): SankeyTooltipPayload | undefined => {
 	const { payload } = item;
 	if (type === 'node') {
@@ -697,10 +710,8 @@ const getPayloadOfTooltip = (
 		};
 	}
 	if ('source' in payload && payload.source && payload.target) {
-		// @ts-expect-error we're sending number indexes as source and target, but getValueByDataKey expects objects
-		const sourceName = getValueByDataKey(payload.source, nameKey, '');
-		// @ts-expect-error we're sending number indexes as source and target, but getValueByDataKey expects objects
-		const targetName = getValueByDataKey(payload.target, nameKey, '');
+		const sourceName = getValueByDataKey(payload.source as SankeyTooltipNode, nameKey, '');
+		const targetName = getValueByDataKey(payload.target as SankeyTooltipNode, nameKey, '');
 
 		return {
 			payload,
@@ -716,7 +727,7 @@ export const sankeyPayloadSearcher: TooltipPayloadSearcher = (
 	_: unknown,
 	activeIndex: TooltipIndex,
 	computedData?: unknown,
-	nameKey,
+	nameKey?: Parameters<TooltipPayloadSearcher>[3],
 ): SankeyTooltipPayload | undefined => {
 	if (activeIndex == null || typeof activeIndex !== 'string') {
 		return undefined;
@@ -728,7 +739,6 @@ export const sankeyPayloadSearcher: TooltipPayloadSearcher = (
 	const [targetType, index] = splitIndex;
 	const item = get(computedData, `${targetType}s[${index}]`);
 	if (item) {
-		// @ts-expect-error nameKey type does not match SankeyElementType
 		const payload = getPayloadOfTooltip(item, targetType as SankeyElementType, nameKey);
 		return payload;
 	}
@@ -782,7 +792,7 @@ interface LinkDataItem {
 	value: number;
 }
 
-export interface NodeProps extends Omit<SVGProps<SVGRectElement>, 'height' | 'width'> {
+export interface NodeProps extends Omit<RectangleProps, 'height' | 'width'> {
 	height: number;
 	width: number;
 	payload: SankeyNode;
@@ -813,12 +823,18 @@ export interface SankeyData {
 
 // TODO: improve types - NodeOptions uses SankeyNode, LinkOptions uses LinkProps. Standardize.
 export type SankeyNodeOptions =
-	ReactElement<SVGProps<SVGRectElement>> | ((props: NodeProps) => ReactNode) | RectangleProps;
+	OctaneElement<RectangleProps> | ((props: NodeProps) => OctaneNode) | RectangleProps;
+
+type SankeyLinkSvgProps =
+	Omit<SVGProps<SVGPathElement>, 'targetX' | 'targetY'> & {
+		targetX?: number;
+		targetY?: number;
+	};
 
 type SankeyLinkOptions =
-	| ReactElement<SVGProps<SVGPathElement>>
-	| ((props: LinkProps) => ReactElement<SVGProps<SVGPathElement>>)
-	| SVGProps<SVGPathElement>;
+	| OctaneElement<SankeyLinkSvgProps>
+	| ((props: LinkProps) => OctaneElement<SVGProps<SVGPathElement>>)
+	| SankeyLinkSvgProps;
 
 interface SankeyProps extends EventThrottlingProps {
 	/**
@@ -914,9 +930,9 @@ interface SankeyProps extends EventThrottlingProps {
  * @example <Sankey link={{ fill: #77c878 }} />
  */
 	link?: SankeyLinkOptions;
-	style?: React.CSSProperties;
+	style?: CSSProperties;
 	className?: string;
-	children?: ReactNode;
+	children?: OctaneNode;
 	/**
  * Empty space around the container.
  *
@@ -926,19 +942,19 @@ interface SankeyProps extends EventThrottlingProps {
 	/**
  * The customized event handler of click on the area in this group
  */
-	onClick?: (item: NodeProps | LinkProps, type: SankeyElementType, e: MouseEvent<
+	onClick?: (item: NodeProps | LinkProps, type: SankeyElementType, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mouseenter on the area in this group
  */
-	onMouseEnter?: (item: NodeProps | LinkProps, type: SankeyElementType, e: MouseEvent<
+	onMouseEnter?: (item: NodeProps | LinkProps, type: SankeyElementType, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
  * The customized event handler of mouseleave on the area in this group
  */
-	onMouseLeave?: (item: NodeProps | LinkProps, type: SankeyElementType, e: MouseEvent<
+	onMouseLeave?: (item: NodeProps | LinkProps, type: SankeyElementType, e: NativeMouseEvent<
 		SVGGraphicsElement
 	>) => void;
 	/**
@@ -1028,10 +1044,8 @@ const buildLinkProps = ({
 
 	const linkProps: LinkProps = {
 		sourceX,
-		// @ts-expect-error the linkContent from below is contributing unknown props
 		targetX,
 		sourceY,
-		// @ts-expect-error the linkContent from below is contributing unknown props
 		targetY,
 		sourceControlX,
 		targetControlX,
@@ -1060,9 +1074,9 @@ function SankeyLinkElement({
 	props: LinkProps;
 	i: number;
 	linkContent: SankeyLinkOptions | undefined;
-	onMouseEnter: (linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onMouseLeave: (linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onClick: (linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => void;
+	onMouseEnter: (linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onMouseLeave: (linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onClick: (linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
 	dataKey: DataKey<any>;
 }) {
 	const activeCoordinate = getLinkCoordinateOfTooltip(props);
@@ -1071,7 +1085,7 @@ function SankeyLinkElement({
 	const dispatch = useAppDispatch();
 
 	const events = {
-		onMouseEnter: (e: MouseEvent<SVGGraphicsElement>) => {
+		onMouseEnter: (e: NativeMouseEvent<SVGGraphicsElement>) => {
 			dispatch(
 				setActiveMouseOverItemIndex({
 					activeIndex,
@@ -1082,11 +1096,11 @@ function SankeyLinkElement({
 			);
 			onMouseEnter(props, e);
 		},
-		onMouseLeave: (e: MouseEvent<SVGGraphicsElement>) => {
+		onMouseLeave: (e: NativeMouseEvent<SVGGraphicsElement>) => {
 			dispatch(mouseLeaveItem());
 			onMouseLeave(props, e);
 		},
-		onClick: (e: MouseEvent<SVGGraphicsElement>) => {
+		onClick: (e: NativeMouseEvent<SVGGraphicsElement>) => {
 			dispatch(
 				setActiveClickItemIndex({
 					activeIndex,
@@ -1116,9 +1130,9 @@ function AllSankeyLinkElements({
 	modifiedLinks: ReadonlyArray<LinkProps>;
 	links: ReadonlyArray<SankeyLink>;
 	linkContent: SankeyLinkOptions | undefined;
-	onMouseEnter: (linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onMouseLeave: (linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onClick: (linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => void;
+	onMouseEnter: (linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onMouseLeave: (linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onClick: (linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
 	dataKey: DataKey<any>;
 }) {
 	return <Layer className="recharts-sankey-links" key="recharts-sankey-links">{links.map((
@@ -1151,15 +1165,12 @@ function renderNodeItem(option: SankeyNodeOptions | undefined, props: NodeProps)
 		return option(props);
 	}
 
-	return (
-		// @ts-expect-error recharts radius is not compatible with SVG radius
-		<Rectangle
-			className="recharts-sankey-node"
-			fill="#0088fe"
-			fillOpacity="0.8"
-			{...svgPropertiesNoEvents(props)}
-		/>
-	);
+	return <Rectangle
+		className="recharts-sankey-node"
+		fill="#0088fe"
+		fillOpacity="0.8"
+		{...svgPropertiesNoEvents(props)}
+	/>;
 }
 
 const buildNodeProps = ({
@@ -1176,7 +1187,6 @@ const buildNodeProps = ({
 	i: number;
 }) => {
 	const { x, y, dx, dy } = node;
-	// @ts-expect-error nodeContent is passing in unknown props
 	const nodeProps: NodeProps = {
 		...svgPropertiesNoEventsFromUnknown(nodeContent),
 		x: x + left,
@@ -1203,9 +1213,9 @@ function NodeElement({
 	props: NodeProps;
 	nodeContent: SankeyNodeOptions | undefined;
 	i: number;
-	onMouseEnter: (nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onMouseLeave: (nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onClick: (nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => void;
+	onMouseEnter: (nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onMouseLeave: (nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onClick: (nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
 	dataKey: DataKey<any>;
 }) {
 	const dispatch = useAppDispatch();
@@ -1214,7 +1224,7 @@ function NodeElement({
 	const activeIndex = `node-${i}`;
 
 	const events = {
-		onMouseEnter: (e: MouseEvent<SVGGraphicsElement>) => {
+		onMouseEnter: (e: NativeMouseEvent<SVGGraphicsElement>) => {
 			dispatch(
 				setActiveMouseOverItemIndex({
 					activeIndex,
@@ -1225,11 +1235,11 @@ function NodeElement({
 			);
 			onMouseEnter(props, e);
 		},
-		onMouseLeave: (e: MouseEvent<SVGGraphicsElement>) => {
+		onMouseLeave: (e: NativeMouseEvent<SVGGraphicsElement>) => {
 			dispatch(mouseLeaveItem());
 			onMouseLeave(props, e);
 		},
-		onClick: (e: MouseEvent<SVGGraphicsElement>) => {
+		onClick: (e: NativeMouseEvent<SVGGraphicsElement>) => {
 			dispatch(
 				setActiveClickItemIndex({
 					activeIndex,
@@ -1257,9 +1267,9 @@ function AllNodeElements({
 	graphicalItemId: GraphicalItemId;
 	modifiedNodes: ReadonlyArray<NodeProps>;
 	nodeContent: SankeyNodeOptions | undefined;
-	onMouseEnter: (nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onMouseLeave: (nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => void;
-	onClick: (nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => void;
+	onMouseEnter: (nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onMouseLeave: (nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
+	onClick: (nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) => void;
 	dataKey: DataKey<any>;
 }) {
 	return <Layer className="recharts-sankey-nodes" key="recharts-sankey-nodes">{modifiedNodes.map((
@@ -1390,7 +1400,7 @@ function SankeyImpl(props: InternalSankeyProps) {
 	const handleMouseEnter = useCallback((
 		item: NodeProps | LinkProps,
 		type: SankeyElementType,
-		e: MouseEvent<SVGGraphicsElement>,
+		e: NativeMouseEvent<SVGGraphicsElement>,
 	) => {
 		if (onMouseEnter) {
 			onMouseEnter(item, type, e);
@@ -1400,7 +1410,7 @@ function SankeyImpl(props: InternalSankeyProps) {
 	const handleMouseLeave = useCallback((
 		item: NodeProps | LinkProps,
 		type: SankeyElementType,
-		e: MouseEvent<SVGGraphicsElement>,
+		e: NativeMouseEvent<SVGGraphicsElement>,
 	) => {
 		if (onMouseLeave) {
 			onMouseLeave(item, type, e);
@@ -1410,7 +1420,7 @@ function SankeyImpl(props: InternalSankeyProps) {
 	const handleClick = useCallback((
 		item: NodeProps | LinkProps,
 		type: SankeyElementType,
-		e: MouseEvent<SVGGraphicsElement>,
+		e: NativeMouseEvent<SVGGraphicsElement>,
 	) => {
 		if (onClick) {
 			onClick(item, type, e);
@@ -1433,17 +1443,11 @@ function SankeyImpl(props: InternalSankeyProps) {
 				modifiedLinks={modifiedLinks}
 				linkContent={link}
 				dataKey={dataKey}
-				onMouseEnter={(linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => handleMouseEnter(
-					linkProps,
-					'link',
-					e,
-				)}
-				onMouseLeave={(linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => handleMouseLeave(
-					linkProps,
-					'link',
-					e,
-				)}
-				onClick={(linkProps: LinkProps, e: MouseEvent<SVGGraphicsElement>) => handleClick(
+				onMouseEnter={(linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) =>
+					handleMouseEnter(linkProps, 'link', e)}
+				onMouseLeave={(linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) =>
+					handleMouseLeave(linkProps, 'link', e)}
+				onClick={(linkProps: LinkProps, e: NativeMouseEvent<SVGGraphicsElement>) => handleClick(
 					linkProps,
 					'link',
 					e,
@@ -1454,17 +1458,11 @@ function SankeyImpl(props: InternalSankeyProps) {
 				modifiedNodes={modifiedNodes}
 				nodeContent={node}
 				dataKey={dataKey}
-				onMouseEnter={(nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => handleMouseEnter(
-					nodeProps,
-					'node',
-					e,
-				)}
-				onMouseLeave={(nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => handleMouseLeave(
-					nodeProps,
-					'node',
-					e,
-				)}
-				onClick={(nodeProps: NodeProps, e: MouseEvent<SVGGraphicsElement>) => handleClick(
+				onMouseEnter={(nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) =>
+					handleMouseEnter(nodeProps, 'node', e)}
+				onMouseLeave={(nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) =>
+					handleMouseLeave(nodeProps, 'node', e)}
+				onClick={(nodeProps: NodeProps, e: NativeMouseEvent<SVGGraphicsElement>) => handleClick(
 					nodeProps,
 					'node',
 					e,

package/src/chart/ScatterChart.tsrx

@@ -1,3 +1,5 @@
+import type { Ref } from '../util/OctaneTypes.ts';
+
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { CartesianChart } from './CartesianChart.tsrx';
 import { CartesianChartProps, TooltipEventType } from '../util/types';
@@ -9,7 +11,9 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['item'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function ScatterChart(props: CartesianChartProps<unknown>) {
+export function ScatterChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	return <CartesianChart
 		chartName="ScatterChart"

package/src/chart/SunburstChart.tsrx

@@ -1,12 +1,13 @@
+import type { CSSProperties, NativeMouseEvent, OctaneNode } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { CSSProperties, useState, type OctaneNode } from 'octane';
+import { useState } from 'octane';
 import { scaleLinear } from 'victory-vendor/d3-scale';
 import { clsx } from 'clsx';
 import get from 'es-toolkit/compat/get';
-import { Surface } from '../container/Surface';
-import { Layer } from '../container/Layer';
-import { Sector } from '../shape/Sector';
-import { Text, Props as TextProps } from '../component/Text';
+import { Surface } from '../container/Surface.tsrx';
+import { Layer } from '../container/Layer.tsrx';
+import { Sector } from '../shape/Sector.tsrx';
+import { Text, Props as TextProps } from '../component/Text.tsrx';
 import { polarToCartesian } from '../util/PolarUtils';
 import {
 	ReportChartMargin,
@@ -15,7 +16,7 @@ import {
 	useChartWidth,
 } from '../context/chartLayoutContext';
 import { TooltipPortalContext } from '../context/tooltipPortalContext';
-import { RechartsWrapper } from './RechartsWrapper';
+import { RechartsWrapper } from './RechartsWrapper.tsrx';
 import {
 	mouseLeaveItem,
 	setActiveClickItemIndex,
@@ -25,12 +26,12 @@ import {
 	TooltipPayloadSearcher,
 } from '../state/tooltipSlice';
 import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
-import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
+import { RechartsStoreProvider } from '../state/RechartsStoreProvider.tsrx';
 import { ReportEventSettings } from '../state/ReportEventSettings';
 import { ChartCoordinate, DataKey, EventThrottlingProps, Margin, Percent } from '../util/types';
 import { useAppDispatch } from '../state/hooks';
 import { RechartsRootState } from '../state/store';
-import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
+import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId.tsrx';
 import { WithIdRequired } from '../util/useUniqueId';
 import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
 import { initialEventSettingsState } from '../state/eventSettingsSlice';
@@ -146,8 +147,8 @@ export interface SunburstChartProps extends EventThrottlingProps {
  * An object with svg text options to control the appearance of the chart labels.
  */
 	textOptions?: TextProps;
-	onMouseEnter?: (node: SunburstData, e: React.MouseEvent) => void;
-	onMouseLeave?: (node: SunburstData, e: React.MouseEvent) => void;
+	onMouseEnter?: (node: SunburstData, e: NativeMouseEvent) => void;
+	onMouseLeave?: (node: SunburstData, e: NativeMouseEvent) => void;
 	onClick?: (node: SunburstData) => void;
 	style?: CSSProperties;
 	id?: string;
@@ -312,7 +313,7 @@ const SunburstChartImpl = ({
 	const positions: SunburstPositionMap = new Map<string, ChartCoordinate>([]);
 
 	// event handlers
-	function handleMouseEnter(node: SunburstNode, e: React.MouseEvent) {
+	function handleMouseEnter(node: SunburstNode, e: NativeMouseEvent) {
 		if (onMouseEnter) onMouseEnter(node, e);
 
 		dispatch(
@@ -325,7 +326,7 @@ const SunburstChartImpl = ({
 		);
 	}
 
-	function handleMouseLeave(node: SunburstNode, e: React.MouseEvent) {
+	function handleMouseLeave(node: SunburstNode, e: NativeMouseEvent) {
 		if (onMouseLeave) onMouseLeave(node, e);
 
 		dispatch(mouseLeaveItem());
@@ -376,8 +377,14 @@ const SunburstChartImpl = ({
 				<g key={`sunburst-sector-${d.name}-${i}`}>
 					<Sector
 						onClick={() => handleClick(nodeWithIndex)}
-						onMouseEnter={(e) => handleMouseEnter(nodeWithIndex, e)}
-						onMouseLeave={(e) => handleMouseLeave(nodeWithIndex, e)}
+						onMouseEnter={(e: NativeMouseEvent<SVGPathElement>) => handleMouseEnter(
+							nodeWithIndex,
+							e,
+						)}
+						onMouseLeave={(e: NativeMouseEvent<SVGPathElement>) => handleMouseLeave(
+							nodeWithIndex,
+							e,
+						)}
 						fill={fillColor}
 						stroke={stroke}
 						strokeWidth={padding}

package/src/chart/types.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck -- compatibility-only upstream type surface is not part of the initial runtime port.
 import type { MouseHandlerDataParam } from '../synchronisation/types';
 
 export type TooltipTrigger = 'hover' | 'click';

package/src/component/ActivePoints.tsrx

@@ -1,3 +1,19 @@
+import type { ActiveDotProps, ActiveDotType, DataKey } from '../util/types';
+import type { ZIndexable } from '../zIndex/ZIndexLayer.tsrx';
+
+export interface PointType {
+	readonly x: number | null;
+	readonly y: number | null;
+	readonly value?: any;
+	readonly payload?: any;
+}
+interface ActivePointsProps extends ZIndexable {
+	points: ReadonlyArray<PointType>;
+	mainColor: string | undefined;
+	itemDataKey: DataKey<any> | undefined;
+	activeDot: ActiveDotType;
+	clipPath?: string;
+}
 // Port of component/ActivePoints.tsx — the highlighted dot on the active
 // tooltip data point (Line/Area/Scatter).
 import { cloneElement, isValidElement } from 'octane';
@@ -12,12 +28,19 @@ import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents'
 import { ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 
-function ActivePoint(activePointProps) {
+function ActivePoint(activePointProps: {
+	point: PointType;
+	activeDot: ActiveDotType;
+	childIndex: number;
+	dataKey: DataKey<any> | undefined;
+	mainColor: string | undefined;
+	clipPath?: string;
+}) {
 	const { point, childIndex, mainColor, activeDot, dataKey, clipPath } = activePointProps;
 	if (activeDot === false || point.x == null || point.y == null) {
 		return null;
 	}
-	const dotPropsTyped = {
+	const dotPropsTyped: ActiveDotProps = {
 		index: childIndex,
 		dataKey,
 		cx: point.x,
@@ -29,7 +52,7 @@ function ActivePoint(activePointProps) {
 		payload: point.payload,
 		value: point.value,
 	};
-	const dotProps = {
+	const dotProps: ActiveDotProps = {
 		...dotPropsTyped,
 		...svgPropertiesNoEventsFromUnknown(activeDot),
 		...adaptEventHandlers(activeDot),
@@ -45,7 +68,7 @@ function ActivePoint(activePointProps) {
 	return <Layer className="recharts-active-dot" clipPath={clipPath}>{dot}</Layer>;
 }
 
-export function ActivePoints(props) {
+export function ActivePoints(props: ActivePointsProps) {
 	const {
 		points,
 		mainColor,
@@ -59,7 +82,9 @@ export function ActivePoints(props) {
 	if (points == null || activeDataPoints == null) {
 		return null;
 	}
-	const activePoint = points.find((p) => activeDataPoints.includes(p.payload));
+	const activePoint: PointType | undefined = points.find(
+		(p) => activeDataPoints.includes(p.payload),
+	);
 	if (isNullish(activePoint)) {
 		return null;
 	}

package/src/component/Cell.ts

@@ -14,8 +14,26 @@
  */
 import { useLayoutEffect, useRef } from 'octane';
 import { useCellsRegistry } from '../context/CellsContext';
+import type { SVGProps, SVGPropsForHost } from '../util/OctaneTypes';
 
-export function Cell(props: Record<string, unknown>): null {
+type CellGeometry = {
+	x?: number;
+	y?: number;
+	cx?: number;
+	cy?: number;
+	width?: number;
+	height?: number;
+	radius?: number;
+};
+
+// Cell geometry feeds calculated chart paths, whose coordinates are numeric.
+export type Props = Omit<SVGProps<SVGElement>, keyof CellGeometry> & CellGeometry;
+
+// A shape writes its narrower host into the Cell's broader SVG ref sink.
+// This write-only view is used at the renderer boundary; refs are never dropped.
+export type CellPropsFor<T extends SVGElement> = SVGPropsForHost<Props, T>;
+
+export function Cell(props: Props): null {
 	const registry = useCellsRegistry();
 	const token = useRef({});
 	useLayoutEffect(() => {