@octanejs/recharts 0.1.41 → 0.1.42

package/src/cartesian/CartesianAxis.tsrx

@@ -1,3 +1,92 @@
+import type { Ref, RefObject, SVGProps } from '../util/OctaneTypes.ts';
+import type { Props as TextProps, TextAnchor, TextVerticalAnchor } from '../component/Text.tsrx';
+import type { ImplicitLabelType } from '../component/Label.tsrx';
+import type {
+	CartesianViewBoxRequired,
+	PresentationAttributesAdaptChildEvent,
+	CartesianTickItem,
+	AxisInterval,
+	TickProp,
+	BaseTickContentProps,
+	TickItem as TickItemType,
+} from '../util/types';
+import type {
+	AxisId,
+	XAxisOrientation,
+	XAxisPadding,
+	YAxisOrientation,
+	YAxisPadding,
+} from '../state/cartesianAxisSlice';
+import type { RequiresDefaultProps } from '../util/resolveDefaultProps';
+import type { ZIndexable } from '../zIndex/ZIndexLayer.tsrx';
+
+export type Orientation = XAxisOrientation | YAxisOrientation;
+export type Unit = string | number;
+export type TickFormatter = (value: any, index: number) => string;
+export interface CartesianAxisProps extends ZIndexable {
+	className?: SVGProps<SVGElement>['className'];
+	axisType?: 'xAxis' | 'yAxis';
+	axisId?: AxisId;
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	unit?: Unit;
+	orientation?: Orientation;
+	viewBox?: CartesianViewBoxRequired;
+	tick?: TickProp<unknown>;
+	tickTextProps?: TextProps;
+	axisLine?: boolean | SVGProps<SVGLineElement>;
+	tickLine?: boolean | SVGProps<SVGLineElement>;
+	mirror?: boolean;
+	tickMargin?: number;
+	hide?: boolean;
+	label?: ImplicitLabelType;
+	padding?: XAxisPadding | YAxisPadding;
+	minTickGap?: number;
+	ticks?: ReadonlyArray<CartesianTickItem>;
+	tickSize?: number;
+	tickFormatter?: TickFormatter;
+	interval?: AxisInterval;
+	angle?: number;
+	scale?: unknown;
+	labelRef?: RefObject<SVGTextElement | null> | null;
+	ref?: Ref<CartesianAxisRef>;
+}
+export interface CartesianAxisRef {
+	getCalculatedWidth(): number;
+}
+export type Props =
+	Omit<
+		PresentationAttributesAdaptChildEvent<any, SVGElement>,
+		'viewBox' | 'scale' | 'ref'
+	> & CartesianAxisProps;
+type InternalProps = RequiresDefaultProps<Props, typeof defaultCartesianAxisProps>;
+type TicksProps = {
+	ref?: Ref<SVGGElement>;
+	axisType: 'xAxis' | 'yAxis' | undefined;
+	events: Omit<PresentationAttributesAdaptChildEvent<any, SVGElement>, 'scale' | 'viewBox'>;
+	fontSize: string;
+	getTicksConfig: Omit<InternalProps, 'ticks' | 'ref'>;
+	height: number;
+	letterSpacing: string;
+	mirror: boolean;
+	orientation: Orientation;
+	padding?: Props['padding'];
+	stroke?: Props['stroke'];
+	tick?: Props['tick'];
+	tickFormatter?: Props['tickFormatter'];
+	tickLine?: Props['tickLine'];
+	tickMargin: number;
+	tickSize: number;
+	tickTextProps?: Props['tickTextProps'];
+	ticks?: ReadonlyArray<CartesianTickItem>;
+	unit?: Props['unit'];
+	width: number;
+	x: number;
+	y: number;
+	axisId: AxisId | undefined;
+};
 // Port of cartesian/CartesianAxis.tsx — the axis renderer: axis line, tick
 // lines, tick labels (measured for font metrics via a callback ref), the
 // rendered-ticks store reporter, and the imperative getCalculatedWidth handle
@@ -55,9 +144,18 @@ export const defaultCartesianAxisProps = {
 	tickMargin: 2,
 	interval: 'preserveEnd',
 	zIndex: DefaultZIndexes.axis,
-};
+} as const satisfies Partial<Props>;
 
-function AxisLine(axisLineProps) {
+function AxisLine(axisLineProps: {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	orientation: Orientation;
+	mirror: boolean;
+	axisLine: boolean | SVGProps<SVGLineElement>;
+	otherSvgProps: SVGProps<SVGLineElement> | null;
+}) {
 	const { x, y, width, height, orientation, mirror, axisLine, otherSvgProps } = axisLineProps;
 	if (!axisLine) {
 		return null;
@@ -92,7 +190,17 @@ function AxisLine(axisLineProps) {
  * Calculate the coordinates of endpoints in ticks: `line` for the tick line,
  * `tick` for the tick text.
  */
-function getTickLineCoord(data, x, y, width, height, orientation, tickSize, mirror, tickMargin) {
+function getTickLineCoord(
+	data: CartesianTickItem,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	orientation: Orientation,
+	tickSize: number,
+	mirror: boolean,
+	tickMargin: number,
+) {
 	let x1, x2, y1, y2, tx, ty;
 	const sign = mirror ? -1 : 1;
 	const finalTickSize = data.tickSize || tickSize;
@@ -133,7 +241,7 @@ function getTickLineCoord(data, x, y, width, height, orientation, tickSize, mirr
 	};
 }
 
-function getTickTextAnchor(orientation, mirror) {
+function getTickTextAnchor(orientation: Orientation, mirror: boolean) {
 	switch (orientation) {
 		case 'left':
 			return mirror ? 'start' : 'end';
@@ -144,7 +252,7 @@ function getTickTextAnchor(orientation, mirror) {
 	}
 }
 
-function getTickVerticalAnchor(orientation, mirror) {
+function getTickVerticalAnchor(orientation: Orientation, mirror: boolean) {
 	switch (orientation) {
 		case 'left':
 		case 'right':
@@ -156,7 +264,11 @@ function getTickVerticalAnchor(orientation, mirror) {
 	}
 }
 
-function TickItem(props) {
+function TickItem(props: {
+	option: Props['tick'];
+	tickProps: TextProps;
+	value: string;
+}) {
 	const { option, tickProps, value } = props;
 	let tickItem;
 	const combinedClassName = clsx(tickProps.className, 'recharts-cartesian-axis-tick-value');
@@ -174,7 +286,11 @@ function TickItem(props) {
 	return tickItem;
 }
 
-function RenderedTicksReporter(props) {
+function RenderedTicksReporter(props: {
+	ticks: ReadonlyArray<TickItemType>;
+	axisType: 'xAxis' | 'yAxis' | undefined;
+	axisId: AxisId | undefined;
+}) {
 	const { ticks, axisType, axisId } = props;
 	const dispatch = useAppDispatch();
 	useEffect(() => {
@@ -198,7 +314,7 @@ function RenderedTicksReporter(props) {
 	return null;
 }
 
-function Ticks(props) {
+function Ticks(props: TicksProps) {
 	const {
 		ticks = [],
 		tick,
@@ -228,18 +344,22 @@ function Ticks(props) {
 	const axisProps = svgPropertiesNoEvents(getTicksConfig);
 	const customTickProps = svgPropertiesNoEventsFromUnknown(tick);
 	// Use user-provided textAnchor if available, otherwise calculate from orientation/mirror
-	const textAnchor =
+	const textAnchor: TextAnchor =
 		isValidTextAnchor(axisProps.textAnchor)
 			? axisProps.textAnchor
 			: getTickTextAnchor(orientation, mirror);
-	const verticalAnchor = getTickVerticalAnchor(orientation, mirror);
-	let tickLinePropsObject = {};
+	const verticalAnchor: TextVerticalAnchor = getTickVerticalAnchor(orientation, mirror);
+	let tickLinePropsObject: SVGProps<SVGLineElement> = {};
 	if (typeof tickLine === 'object') {
 		tickLinePropsObject = tickLine;
 	}
-	const tickLineProps = { ...axisProps, fill: 'none', ...tickLinePropsObject };
+	const tickLineProps: SVGProps<SVGLineElement> = {
+		...axisProps,
+		fill: 'none',
+		...tickLinePropsObject,
+	};
 	const tickLineCoords = finalTicks.map(
-		(entry) => ({
+		(entry: CartesianTickItem) => ({
 			entry,
 			...getTickLineCoord(entry, x, y, width, height, orientation, tickSize, mirror, tickMargin),
 		}),
@@ -273,7 +393,7 @@ function Ticks(props) {
 			...tickTextProps,
 			angle: tickTextProps?.angle ?? axisProps.angle ?? 0,
 		};
-		const finalTickProps = { ...tickProps, ...customTickProps };
+		const finalTickProps: BaseTickContentProps = { ...tickProps, ...customTickProps };
 		return <Layer
 			className="recharts-cartesian-axis-tick-label"
 			key={'tick-label-' + entry.value + '-' + entry.coordinate + '-' + entry.tickCoord}
@@ -306,11 +426,23 @@ function Ticks(props) {
 	</g>;
 }
 
-function CartesianAxisComponent(props) {
-	const { axisLine, width, height, className, hide, ticks, axisType, axisId, ref, ...rest } = props;
+function CartesianAxisComponent(props: InternalProps) {
+	// This ref receives the imperative axis handle, never an SVG line or tick.
+	const { ref, ...propsWithoutRef } = props;
+	const {
+		axisLine,
+		width,
+		height,
+		className,
+		hide,
+		ticks,
+		axisType,
+		axisId,
+		...rest
+	} = propsWithoutRef;
 	const [fontSize, setFontSize] = useState('');
 	const [letterSpacing, setLetterSpacing] = useState('');
-	const tickRefs = useRef(null);
+	const tickRefs = useRef<HTMLCollectionOf<Element> | null>(null);
 	useImperativeHandle(
 		ref,
 		() => ({
@@ -325,11 +457,11 @@ function CartesianAxisComponent(props) {
 			},
 		}),
 	);
-	const layerRef = useCallback((el) => {
+	const layerRef = useCallback((el: SVGElement | null) => {
 		if (el) {
 			const tickNodes = el.getElementsByClassName('recharts-cartesian-axis-tick-value');
 			tickRefs.current = tickNodes;
-			const tick = tickNodes[0];
+			const tick: Element | undefined = tickNodes[0];
 			if (tick) {
 				const computedStyle = window.getComputedStyle(tick);
 				const calculatedFontSize = computedStyle.fontSize;
@@ -359,14 +491,14 @@ function CartesianAxisComponent(props) {
 				orientation={props.orientation}
 				mirror={props.mirror}
 				axisLine={axisLine}
-				otherSvgProps={svgPropertiesNoEvents(props)}
+				otherSvgProps={svgPropertiesNoEvents(propsWithoutRef)}
 			/>
 			<Ticks
 				ref={layerRef}
 				axisType={axisType}
 				events={rest}
 				fontSize={fontSize}
-				getTicksConfig={props}
+				getTicksConfig={propsWithoutRef}
 				height={props.height}
 				letterSpacing={letterSpacing}
 				mirror={props.mirror}
@@ -404,7 +536,7 @@ function CartesianAxisComponent(props) {
 /**
  * @deprecated not meant to be used directly in app code — use XAxis or YAxis.
  */
-export function CartesianAxis(outsideProps) {
+export function CartesianAxis(outsideProps: Props) {
 	const { ref, ...rest } = outsideProps;
 	const props = resolveDefaultProps(rest, defaultCartesianAxisProps);
 	return <CartesianAxisComponent {...props} ref={ref} />;

package/src/cartesian/CartesianGrid.tsrx

@@ -1,5 +1,5 @@
+import type { OctaneElement, SVGProps } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { ReactElement, SVGProps } from 'octane';
 
 import { warn } from '../util/LogUtils';
 import { isNumber } from '../util/DataUtils';
@@ -11,7 +11,7 @@ import {
 	getTicksOfAxis,
 } from '../util/ChartUtils';
 import { getTicks, GetTicksInput } from './getTicks';
-import { defaultCartesianAxisProps } from './CartesianAxis';
+import { defaultCartesianAxisProps } from './CartesianAxis.tsrx';
 import { useChartHeight, useChartWidth, useOffsetInternal } from '../context/chartLayoutContext';
 import { AxisId } from '../state/cartesianAxisSlice';
 import {
@@ -22,7 +22,7 @@ import { useIsPanorama } from '../context/PanoramaContext';
 import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import { isPositiveNumber } from '../util/isWellBehavedNumber';
-import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 
 /**
@@ -41,8 +41,8 @@ export type AxisPropsForCartesianGridTicksGeneration =
 
 type GridLineType =
 	| SVGProps<SVGLineElement>
-	| ReactElement<SVGElement>
-	| ((props: GridLineTypeFunctionProps) => ReactElement<SVGElement>)
+	| OctaneElement<SVGElement>
+	| ((props: GridLineTypeFunctionProps) => OctaneElement<SVGElement>)
 	| boolean;
 
 export type HorizontalCoordinatesGenerator =
@@ -265,7 +265,6 @@ function LineItem({
 	let lineItem;
 
 	if (React.isValidElement(option)) {
-		// @ts-expect-error typescript does not see the props type when cloning an element
 		lineItem = React.cloneElement(option, lineItemProps);
 	} else if (typeof option === 'function') {
 		lineItem = option(lineItemProps);

package/src/cartesian/ErrorBar.tsrx

@@ -1,25 +1,26 @@
+import type { SVGProps } from '../util/OctaneTypes.ts';
 /**
  * @fileOverview Render a group of error bar
  */
 import * as React from 'octane';
-import { SVGProps } from 'octane';
-import { Layer } from '../container/Layer';
+
+import { Layer } from '../container/Layer.tsrx';
 import { EasingInput, DataKey, RectangleCoordinate } from '../util/types';
 import { BarRectangleItem } from './Bar';
 import { LinePointItem } from './Line';
-import { ScatterPointItem } from './Scatter';
-import { ReportErrorBarSettings, useErrorBarContext } from '../context/ErrorBarContext';
+import { ScatterPointItem } from './Scatter.tsrx';
+import { ReportErrorBarSettings, useErrorBarContext } from '../context/ErrorBarContext.tsrx';
 import { useXAxis, useYAxis } from '../hooks';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import { useChartLayout } from '../context/chartLayoutContext';
-import { CSSTransitionAnimate, extractCssEasing } from '../animation/CSSTransitionAnimate';
-import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { CSSTransitionAnimate, extractCssEasing } from '../animation/CSSTransitionAnimate.tsrx';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 
 export interface ErrorBarDataItem {
-	x: number | undefined;
-	y: number | undefined;
+	x: number | null | undefined;
+	y: number | null | undefined;
 	value: number;
 	errorVal?: number[] | number;
 }

package/src/cartesian/Funnel.tsrx

@@ -1,19 +1,20 @@
+import type { MutableRefObject, NativeMouseEvent, OctaneNode } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { MutableRefObject, ReactElement, ReactNode, useMemo, useRef } from 'octane';
+import { useMemo, useRef } from 'octane';
 import { shallowEqual } from '@octanejs/redux';
 import omit from 'es-toolkit/compat/omit';
 
 import { clsx } from 'clsx';
 import { selectActiveIndex } from '../state/selectors/selectors';
 import { useAppSelector } from '../state/hooks';
-import { Layer } from '../container/Layer';
-import { Props as TrapezoidProps } from '../shape/Trapezoid';
+import { Layer } from '../container/Layer.tsrx';
+import { Props as TrapezoidProps } from '../shape/Trapezoid.tsrx';
 import {
 	CartesianLabelListContextProvider,
 	CartesianLabelListEntry,
 	ImplicitLabelListType,
 	LabelListFromLabelProp,
-} from '../component/LabelList';
+} from '../component/LabelList.tsrx';
 import { getPercentValue, interpolate } from '../util/DataUtils';
 import { getValueByDataKey } from '../util/ChartUtils';
 import {
@@ -34,7 +35,11 @@ import {
 	TrapezoidViewBox,
 	CartesianLayout,
 } from '../util/types';
-import { defaultFunnelShape, FunnelTrapezoid, FunnelTrapezoidProps } from '../util/FunnelUtils';
+import {
+	defaultFunnelShape,
+	FunnelTrapezoid,
+	FunnelTrapezoidProps,
+} from '../util/FunnelUtils.tsrx';
 import {
 	useMouseClickItemDispatch,
 	useMouseEnterItemDispatch,
@@ -42,8 +47,8 @@ import {
 } from '../context/tooltipContext';
 import { TooltipPayload, TooltipPayloadConfiguration } from '../state/tooltipSlice';
 import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
-import { Formatter } from '../component/DefaultTooltipContent';
-import type { LegendPayload } from '../component/DefaultLegendContent';
+import { Formatter } from '../component/DefaultTooltipContent.tsrx';
+import type { LegendPayload } from '../component/DefaultLegendContent.tsrx';
 import { ResolvedFunnelSettings, selectFunnelTrapezoids } from '../state/selectors/funnelSelectors';
 import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
 import { usePlotArea } from '../hooks';
@@ -52,10 +57,10 @@ import {
 	AnimatedItems,
 	AnimationInterpolateFn,
 	useAnimationCallbacks,
-} from '../animation/AnimatedItems';
+} from '../animation/AnimatedItems.tsrx';
 import { AnimationMatchByProp, matchAppend } from '../animation/matchBy';
 import { GraphicalItemId } from '../state/graphicalItemsSlice';
-import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
+import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId.tsrx';
 import { WithIdRequired } from '../util/useUniqueId';
 import { SetLegendPayload } from '../state/SetLegendPayload';
 import { CellsContext, useCellRegistry } from '../context/CellsContext';
@@ -196,7 +201,7 @@ interface FunnelProps<DataPointType = any, DataValueType = any> extends DataProv
 	onAnimationStart?: () => void;
 	reversed?: boolean;
 	/**
- * If set a ReactElement, the shape of funnel can be customized.
+ * If set a OctaneElement, the shape of funnel 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 trapezoid.
@@ -211,48 +216,44 @@ interface FunnelProps<DataPointType = any, DataValueType = any> extends DataProv
 	/**
  * The customized event handler of click on the area in this group
  */
-	onClick?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<SVGPathElement>) => void;
+	onClick?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mousedown on the area in this group
  */
-	onMouseDown?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<
-		SVGPathElement
+	onMouseDown?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<
+		SVGGElement
 	>) => void;
 	/**
  * The customized event handler of mouseup on the area in this group
  */
-	onMouseUp?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<
-		SVGPathElement
-	>) => void;
+	onMouseUp?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mousemove on the area in this group
  */
-	onMouseMove?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<
-		SVGPathElement
+	onMouseMove?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<
+		SVGGElement
 	>) => void;
 	/**
  * The customized event handler of mouseover on the area in this group
  */
-	onMouseOver?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<
-		SVGPathElement
+	onMouseOver?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<
+		SVGGElement
 	>) => void;
 	/**
  * The customized event handler of mouseout on the area in this group
  */
-	onMouseOut?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<
-		SVGPathElement
-	>) => void;
+	onMouseOut?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
  * The customized event handler of mouseenter on the area in this group
  */
-	onMouseEnter?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<
-		SVGPathElement
+	onMouseEnter?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<
+		SVGGElement
 	>) => void;
 	/**
  * The customized event handler of mouseleave on the area in this group
  */
-	onMouseLeave?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent<
-		SVGPathElement
+	onMouseLeave?: (data: FunnelTrapezoidItem, index: number, e: NativeMouseEvent<
+		SVGGElement
 	>) => void;
 }
 
@@ -299,11 +300,11 @@ const SetFunnelTooltipEntrySettings = React.memo(({
 	| 'data'
 	| 'id'
 > & {
-	trapezoids: ReadonlyArray<FunnelTrapezoidItem>;
+	trapezoids: ReadonlyArray<FunnelTrapezoidItem> | undefined;
 }) => {
 	const tooltipEntrySettings: TooltipPayloadConfiguration = {
 		dataDefinedOnItem: data,
-		getPosition: (index) => trapezoids[Number(index)]?.tooltipPosition,
+		getPosition: (index) => trapezoids?.[Number(index)]?.tooltipPosition,
 		settings: {
 			stroke,
 			strokeWidth,
@@ -329,7 +330,7 @@ function FunnelLabelListProvider({
 }: {
 	showLabels: boolean;
 	trapezoids: ReadonlyArray<FunnelTrapezoidItem> | undefined;
-	children: ReactNode;
+	children: OctaneNode;
 }) {
 	const labelListEntries: ReadonlyArray<CartesianLabelListEntry> | undefined = useMemo(() => {
 		if (!showLabels) {
@@ -818,16 +819,18 @@ export function computeFunnelTrapezoids({
  * @provides LabelListContext
  * @provides CellReader
  */
-function FunnelFn(outsideProps: Props) {
-	const { id: externalId, ...props } = resolveDefaultProps(outsideProps, defaultFunnelProps);
+function FunnelFn<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+) {
+	// Internal chart data also supports the built-in 'name' key when no nameKey is supplied.
+	const { id: externalId, ...props } = resolveDefaultProps<Props, typeof defaultFunnelProps>(
+		outsideProps,
+		defaultFunnelProps,
+	);
 	return <RegisterGraphicalItemId id={externalId} type="funnel">
 		{(id) => <FunnelImpl {...props} id={id} />}
 	</RegisterGraphicalItemId>;
 }
 
-export const Funnel = FunnelFn as (outsideProps: Props<
-	DataPointType,
-	DataValueType
->) => ReactElement;
-// @ts-expect-error we need to set the displayName for debugging purposes
+export const Funnel = FunnelFn as typeof FunnelFn & { displayName?: string };
 Funnel.displayName = 'Funnel';

package/src/cartesian/GraphicalItemClipPath.tsrx

@@ -1,3 +1,10 @@
+import type { AxisId } from '../state/cartesianAxisSlice';
+
+type GraphicalItemClipPathProps = {
+	xAxisId: AxisId;
+	yAxisId: AxisId;
+	clipPathId: string;
+};
 // Port of cartesian/GraphicalItemClipPath.tsx — the per-item clipPath used
 // when either axis has allowDataOverflow.
 import { useAppSelector } from '../state/hooks';
@@ -11,16 +18,16 @@ import {
 } from '../state/selectors/axisSelectors';
 import { usePlotArea } from '../hooks';
 
-export function useNeedsClip(xAxisId, yAxisId) {
+export function useNeedsClip(xAxisId: AxisId, yAxisId: AxisId) {
 	const xAxis = useAppSelector((state) => selectXAxisSettings(state, xAxisId));
 	const yAxis = useAppSelector((state) => selectYAxisSettings(state, yAxisId));
-	const needClipX = xAxis?.allowDataOverflow ?? implicitXAxis.allowDataOverflow;
-	const needClipY = yAxis?.allowDataOverflow ?? implicitYAxis.allowDataOverflow;
+	const needClipX: boolean = xAxis?.allowDataOverflow ?? implicitXAxis.allowDataOverflow;
+	const needClipY: boolean = yAxis?.allowDataOverflow ?? implicitYAxis.allowDataOverflow;
 	const needClip = needClipX || needClipY;
 	return { needClip, needClipX, needClipY };
 }
 
-export function GraphicalItemClipPath(props) @{
+export function GraphicalItemClipPath(props: GraphicalItemClipPathProps) @{
 	const { xAxisId, yAxisId, clipPathId } = props;
 	const plotArea = usePlotArea();
 	const { needClipX, needClipY, needClip } = useNeedsClip(xAxisId, yAxisId);

package/src/cartesian/Line.ts

@@ -2,3 +2,4 @@
 // lineSelectors.js) import `computeLinePoints` from '../../cartesian/Line' —
 // this .ts entry forwards to the .tsrx implementation.
 export { Line, computeLinePoints, defaultLineProps } from './Line.tsrx';
+export type * from './Line.tsrx';