@octanejs/recharts 0.1.41 → 0.1.43

package/src/component/Cursor.tsrx

@@ -1,5 +1,6 @@
+import type { ComponentType, OctaneElement, SVGProps } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { cloneElement, createElement, isValidElement, ReactElement, SVGProps } from 'octane';
+import { cloneElement, createElement, isValidElement } from 'octane';
 import { clsx } from 'clsx';
 import {
 	ChartOffsetInternal,
@@ -9,19 +10,19 @@ import {
 	PolarCoordinate,
 	TooltipEventType,
 } from '../util/types';
-import { Curve } from '../shape/Curve';
-import { Cross } from '../shape/Cross';
+import { Curve } from '../shape/Curve.tsrx';
+import { Cross } from '../shape/Cross.tsrx';
 import { getCursorRectangle } from '../util/cursor/getCursorRectangle';
-import { Rectangle } from '../shape/Rectangle';
+import { Rectangle } from '../shape/Rectangle.tsrx';
 import { getRadialCursorPoints } from '../util/cursor/getRadialCursorPoints';
-import { Sector } from '../shape/Sector';
+import { Sector } from '../shape/Sector.tsrx';
 import { getCursorPoints } from '../util/cursor/getCursorPoints';
 import { useChartLayout, useOffsetInternal } from '../context/chartLayoutContext';
 import { useTooltipAxisBandSize } from '../context/useTooltipAxis';
 import { useChartName } from '../state/selectors/selectors';
 import { TooltipIndex, TooltipPayload } from '../state/tooltipSlice';
 import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
-import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 
 /**
@@ -29,7 +30,7 @@ import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
  * If set an object, the option is the configuration of cursor.
  * If set a React element, the option is the custom react element of drawing cursor
  */
-export type CursorDefinition = boolean | ReactElement | SVGProps<SVGElement>;
+export type CursorDefinition = boolean | OctaneElement | SVGProps<SVGElement>;
 
 export interface CursorProps extends ZIndexable {
 	cursor: CursorDefinition;
@@ -53,7 +54,7 @@ function RenderCursor({
 	cursorProps,
 }: {
 	cursor: CursorDefinition;
-	cursorComp: React.ComponentType<any>;
+	cursorComp: ComponentType<any>;
 	cursorProps: any;
 }) {
 	if (isValidElement(cursor)) {
@@ -82,7 +83,7 @@ export function CursorInternal(props: CursorConnectedProps) {
 	if (!cursor || !activeCoordinate || chartName !== 'ScatterChart' && tooltipEventType !== 'axis') {
 		return null;
 	}
-	let restProps, cursorComp: React.ComponentType<any>, preferredZIndex: number;
+	let restProps, cursorComp: ComponentType<any>, preferredZIndex: number;
 
 	if (chartName === 'ScatterChart') {
 		restProps = activeCoordinate;
@@ -110,7 +111,7 @@ export function CursorInternal(props: CursorConnectedProps) {
 		preferredZIndex = DefaultZIndexes.cursorLine;
 	}
 
-	const extraClassName: string | undefined =
+	const extraClassName =
 		typeof cursor === 'object' && 'className' in cursor ? cursor.className : undefined;
 
 	const cursorProps = {

package/src/component/DefaultLegendContent.tsrx

@@ -1,9 +1,14 @@
+import type {
+	CSSProperties,
+	NativeMouseEvent,
+	OctaneElement,
+	OctaneNode,
+} from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { ReactNode, MouseEvent, ReactElement, CSSProperties } from 'octane';
 
 import { clsx } from 'clsx';
-import { Surface } from '../container/Surface';
-import { Symbols } from '../shape/Symbols';
+import { Surface } from '../container/Surface.tsrx';
+import { Symbols } from '../shape/Symbols.tsrx';
 import {
 	DataKey,
 	LegendType,
@@ -14,11 +19,11 @@ import {
 import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
 
 const SIZE = 32;
-export type ContentType = ReactElement | ((props: Props) => ReactNode);
+export type ContentType = OctaneElement | ((props: Props) => OctaneNode);
 
 export type HorizontalAlignmentType = 'center' | 'left' | 'right';
 export type VerticalAlignmentType = 'top' | 'bottom' | 'middle';
-export type Formatter = (value: any, entry: LegendPayload, index: number) => ReactNode;
+export type Formatter = (value: any, entry: LegendPayload, index: number) => OctaneNode;
 
 export interface LegendPayload {
 	/**
@@ -35,7 +40,7 @@ export interface LegendPayload {
 	payload?: object;
 	formatter?: Formatter;
 	inactive?: boolean;
-	legendIcon?: ReactElement<SVGElement>;
+	legendIcon?: OctaneElement<SVGElement>;
 	dataKey?: DataKey<any>;
 }
 
@@ -95,16 +100,16 @@ interface DefaultLegendContentProps {
  * The customized event handler of mouseenter on the items in this group
  * @example https://recharts.github.io/examples/LegendEffectOpacity
  */
-	onMouseEnter?: (data: LegendPayload, index: number, event: MouseEvent<HTMLElement>) => void;
+	onMouseEnter?: (data: LegendPayload, index: number, event: NativeMouseEvent<HTMLElement>) => void;
 	/**
  * The customized event handler of mouseleave on the items in this group
  * @example https://recharts.github.io/examples/LegendEffectOpacity
  */
-	onMouseLeave?: (data: LegendPayload, index: number, event: MouseEvent<HTMLElement>) => void;
+	onMouseLeave?: (data: LegendPayload, index: number, event: NativeMouseEvent<HTMLElement>) => void;
 	/**
  * The customized event handler of click on the items in this group
  */
-	onClick?: (data: LegendPayload, index: number, event: MouseEvent<HTMLElement>) => void;
+	onClick?: (data: LegendPayload, index: number, event: NativeMouseEvent<HTMLElement>) => void;
 	/**
  * DefaultLegendContent.payload is omitted from Legend props.
  * A custom payload can be passed here if desired, or it can be passed from the Legend "content" callback.
@@ -119,7 +124,7 @@ interface DefaultLegendContentProps {
 
 export type Props =
 	DefaultLegendContentProps & Omit<
-		PresentationAttributesAdaptChildEvent<any, ReactElement>,
+		PresentationAttributesAdaptChildEvent<any, OctaneElement>,
 		keyof DefaultLegendContentProps
 	>;
 

package/src/component/DefaultTooltipContent.tsrx

@@ -1,9 +1,10 @@
+import type { CSSProperties, HTMLAttributes, OctaneNode, SVGProps } from '../util/OctaneTypes.ts';
 /**
  * @fileOverview Default Tooltip Content
  */
 
 import * as React from 'octane';
-import { CSSProperties, HTMLAttributes, ReactNode, SVGProps, type OctaneNode } from 'octane';
+
 import sortBy from 'es-toolkit/compat/sortBy';
 import { clsx } from 'clsx';
 import { isNullish, isNumOrStr } from '../util/DataUtils';
@@ -35,7 +36,7 @@ export interface Payload<
 	formatter?: Formatter<TValue, TName>;
 	name?: TName;
 	value?: TValue;
-	unit?: ReactNode;
+	unit?: OctaneNode;
 	fill?: string;
 	dataKey?: DataKey<any>;
 	nameKey?: DataKey<any>;
@@ -69,8 +70,10 @@ export interface Props<TValue extends ValueType = ValueType, TName extends NameT
 	contentStyle?: CSSProperties;
 	itemStyle?: CSSProperties;
 	labelStyle?: CSSProperties;
-	labelFormatter?: (label: ReactNode, payload: ReadonlyArray<Payload<TValue, TName>>) => ReactNode;
-	label?: ReactNode;
+	labelFormatter?: (label: OctaneNode, payload: ReadonlyArray<
+		Payload<TValue, TName>
+	>) => OctaneNode;
+	label?: OctaneNode;
 	payload?: ReadonlyArray<Payload<TValue, TName>>;
 	itemSorter?: TooltipItemSorter<TValue, TName>;
 	accessibilityLayer?: boolean;
@@ -95,15 +98,14 @@ export const defaultDefaultTooltipContentProps = {
 	accessibilityLayer: false,
 } as const satisfies Partial<Props<any, any>>;
 
-function lodashLikeSortBy<T>(
+function lodashLikeSortBy<T extends Payload>(
 	array: ReadonlyArray<T>,
 	itemSorter: TooltipItemSorter | undefined,
 ): ReadonlyArray<T> {
 	if (itemSorter == null) {
 		return array;
 	}
-	// @ts-expect-error sortBy types somehow are returning a number type.
-	return sortBy(array, itemSorter);
+	return sortBy<T>(array, itemSorter);
 }
 
 /**
@@ -181,7 +183,7 @@ export const DefaultTooltipContent = (props: Props) => {
 		return null;
 	};
 
-	const finalStyle: React.CSSProperties = {
+	const finalStyle: CSSProperties = {
 		...defaultDefaultTooltipContentProps.contentStyle,
 		...contentStyle,
 	};
@@ -190,7 +192,7 @@ export const DefaultTooltipContent = (props: Props) => {
 		...labelStyle,
 	};
 	const hasLabel = !isNullish(label);
-	let finalLabel: ReactNode = hasLabel ? label : '';
+	let finalLabel: OctaneNode = hasLabel ? label : '';
 	const wrapperCN = clsx('recharts-default-tooltip', wrapperClassName);
 	const labelCN = clsx('recharts-tooltip-label', labelClassName);
 

package/src/component/Dots.tsrx

@@ -1,3 +1,32 @@
+import type { Props as DotProps } from '../shape/Dot.tsrx';
+import type { OctaneElement } from '../util/OctaneTypes.ts';
+import type { DataKey, DotItemDotProps, DotType } from '../util/types';
+import type { ZIndexable } from '../zIndex/ZIndexLayer.tsrx';
+
+export interface DotPoint {
+	readonly x: number | null;
+	readonly y: number | null;
+	readonly value?: any;
+	readonly payload?: any;
+}
+type DotItemProps = {
+	option: DotType;
+	dotProps: DotItemDotProps;
+	className: string;
+};
+type DotElementProps = Extract<DotType, OctaneElement>['props'];
+export type DotsDotProps =
+	Omit<DotProps, 'cx' | 'cy' | 'key' | 'index' | 'dataKey' | 'value' | 'payload'>;
+interface DotsProps extends ZIndexable {
+	points: ReadonlyArray<DotPoint>;
+	dot: DotType;
+	className: string;
+	dotClassName: string;
+	dataKey: DataKey<any> | undefined;
+	baseProps: DotsDotProps;
+	needClip?: boolean;
+	clipPathId?: string;
+}
 // Port of component/Dots.tsx — the dot layer Line/Area/Radar render per data
 // point; `dot` accepts boolean | props object | element | render function.
 import { cloneElement, isValidElement } from 'octane';
@@ -9,9 +38,9 @@ import { svgPropertiesAndEventsFromUnknown } from '../util/svgPropertiesAndEvent
 import { ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 
-function DotItem(props) {
+function DotItem(props: DotItemProps) {
 	const { option, dotProps, className } = props;
-	if (isValidElement(option)) {
+	if (isValidElement<DotElementProps>(option)) {
 		return cloneElement(option, dotProps);
 	}
 	if (typeof option === 'function') {
@@ -22,7 +51,7 @@ function DotItem(props) {
 	return <Dot {...rest} className={finalClassName} />;
 }
 
-function shouldRenderDots(points, dot) {
+function shouldRenderDots(points: ReadonlyArray<DotPoint> | undefined, dot: DotType) {
 	if (points == null) {
 		return false;
 	}
@@ -32,7 +61,7 @@ function shouldRenderDots(points, dot) {
 	return points.length === 1;
 }
 
-export function Dots(dotsProps) {
+export function Dots(dotsProps: DotsProps) {
 	const {
 		points,
 		dot,
@@ -50,7 +79,7 @@ export function Dots(dotsProps) {
 	const clipDot = isClipDot(dot);
 	const customDotProps = svgPropertiesAndEventsFromUnknown(dot);
 	const dots = points.map((entry, i) => {
-		const dotProps = {
+		const dotProps: DotItemDotProps = {
 			r: 3,
 			...baseProps,
 			...customDotProps,
@@ -64,7 +93,9 @@ export function Dots(dotsProps) {
 		};
 		return <DotItem key={'dot-' + i} option={dot} dotProps={dotProps} className={dotClassName} />;
 	});
-	const layerProps = {};
+	const layerProps: {
+		clipPath?: string;
+	} = {};
 	if (needClip && clipPathId != null) {
 		layerProps.clipPath = 'url(#clipPath-' + (clipDot ? '' : 'dots-') + clipPathId + ')';
 	}

package/src/component/Label.tsrx

@@ -1,3 +1,58 @@
+import type { OctaneElement, OctaneNode, RefObject, SVGProps } from '../util/OctaneTypes.ts';
+import type { RenderableText, TextAnchor, TextVerticalAnchor } from './Text.tsrx';
+import type {
+	CartesianViewBoxRequired,
+	DataKey,
+	PolarViewBoxRequired,
+	TrapezoidViewBox,
+	ViewBox,
+} from '../util/types';
+import type { ZIndexable } from '../zIndex/ZIndexLayer.tsrx';
+import type { CartesianLabelPosition } from '../cartesian/getCartesianPosition';
+
+export type LabelContentType = OctaneElement | ((props: Props) => RenderableText | OctaneElement);
+type PolarLabelPosition = 'insideStart' | 'insideEnd' | 'end';
+export type LabelPosition = CartesianLabelPosition | PolarLabelPosition;
+export type LabelFormatter = (label: RenderableText) => RenderableText;
+interface LabelProps extends ZIndexable {
+	viewBox?: ViewBox;
+	parentViewBox?: ViewBox;
+	formatter?: LabelFormatter;
+	value?: RenderableText;
+	offset?: number;
+	position?: LabelPosition;
+	children?: RenderableText;
+	className?: SVGProps<SVGTextElement>['className'];
+	content?: LabelContentType;
+	textBreakAll?: boolean;
+	angle?: number;
+	index?: number;
+	labelRef?: RefObject<SVGTextElement | null> | null;
+	zIndex?: number;
+	id?: string;
+}
+export type Props = Omit<SVGProps<SVGTextElement>, 'viewBox'> & LabelProps;
+type PropsWithDefaults =
+	Props & {
+		offset: number;
+	};
+export type ImplicitLabelType =
+	| boolean
+	| string
+	| number
+	| OctaneElement<SVGElement>
+	| ((props: any) => RenderableText | OctaneElement)
+	| (Props & {
+			dataKey?: DataKey<any>;
+	  });
+export type LabelPositionAttributes = {
+	x: number;
+	y: number;
+	textAnchor: TextAnchor;
+	verticalAnchor: TextVerticalAnchor;
+	width?: number;
+	height?: number;
+};
 // Port of component/Label.tsx — chart labels with cartesian + polar
 // positioning, radial (textPath) rendering, and the label-as-prop parser
 // (boolean | value | element | function | object). Element-as-prop resolves
@@ -23,9 +78,11 @@ import { ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 import { getCartesianPosition } from '../cartesian/getCartesianPosition';
 
-const CartesianLabelContext = createContext(null);
+const CartesianLabelContext = createContext<TrapezoidViewBox | null>(null);
 
-export function CartesianLabelContextProvider(props) @{
+export function CartesianLabelContextProvider(props: TrapezoidViewBox & {
+	children: OctaneNode;
+}) @{
 	const { x, y, upperWidth, lowerWidth, width, height, children } = props;
 	const viewBox = useMemo(() => ({ x, y, upperWidth, lowerWidth, width, height }), [
 		x,
@@ -45,9 +102,11 @@ function useCartesianLabelContext() {
 		(chartContext ? cartesianViewBoxToTrapezoid(chartContext) : undefined);
 }
 
-const PolarLabelContext = createContext(null);
+const PolarLabelContext = createContext<PolarViewBoxRequired | null>(null);
 
-export function PolarLabelContextProvider(props) @{
+export function PolarLabelContextProvider(props: PolarViewBoxRequired & {
+	children: OctaneNode;
+}) @{
 	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise, children } = props;
 	const viewBox = useMemo(
 		() => ({ cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise }),
@@ -62,7 +121,7 @@ export function usePolarLabelContext() {
 	return labelChildContext || chartContext;
 }
 
-const getLabel = (props) => {
+const getLabel = (props: Props) => {
 	const { value, formatter } = props;
 	const label = isNullish(props.children) ? value : props.children;
 	if (typeof formatter === 'function') {
@@ -71,17 +130,23 @@ const getLabel = (props) => {
 	return label;
 };
 
-export function isLabelContentAFunction(content) {
+export function isLabelContentAFunction(content: unknown) {
 	return content != null && typeof content === 'function';
 }
 
-const getDeltaAngle = (startAngle, endAngle) => {
+const getDeltaAngle = (startAngle: number, endAngle: number) => {
 	const sign = mathSign(endAngle - startAngle);
 	const deltaAngle = Math.min(Math.abs(endAngle - startAngle), 360);
 	return sign * deltaAngle;
 };
 
-function renderRadialLabel(labelProps, position, label, attrs, viewBox) {
+function renderRadialLabel(
+	labelProps: PropsWithDefaults,
+	position: PolarLabelPosition,
+	label: OctaneNode,
+	attrs: SVGProps<SVGTextElement>,
+	viewBox: PolarViewBoxRequired,
+) {
 	const { offset, className } = labelProps;
 	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise } = viewBox;
 	const radius = (innerRadius + outerRadius) / 2;
@@ -129,7 +194,11 @@ function renderRadialLabel(labelProps, position, label, attrs, viewBox) {
 	</text>;
 }
 
-const getAttrsOfPolarLabel = (viewBox, offset, position) => {
+const getAttrsOfPolarLabel = (
+	viewBox: PolarViewBoxRequired,
+	offset: number,
+	position: LabelPosition | undefined,
+): LabelPositionAttributes => {
 	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = viewBox;
 	const midAngle = (startAngle + endAngle) / 2;
 	if (position === 'outside') {
@@ -155,7 +224,9 @@ const getAttrsOfPolarLabel = (viewBox, offset, position) => {
 	return { x, y, textAnchor: 'middle', verticalAnchor: 'middle' };
 };
 
-const isPolar = (viewBox) => viewBox != null && 'cx' in viewBox && isNumber(viewBox.cx);
+const isPolar = (
+	viewBox: CartesianViewBoxRequired | TrapezoidViewBox | PolarViewBoxRequired | undefined,
+): viewBox is PolarViewBoxRequired => viewBox != null && 'cx' in viewBox && isNumber(viewBox.cx);
 
 export const defaultLabelProps = {
 	angle: 0,
@@ -163,9 +234,9 @@ export const defaultLabelProps = {
 	zIndex: DefaultZIndexes.label,
 	position: 'middle',
 	textBreakAll: false,
-};
+} as const satisfies Partial<Props>;
 
-function polarViewBoxToTrapezoid(viewBox) {
+function polarViewBoxToTrapezoid(viewBox: PolarViewBoxRequired | TrapezoidViewBox | undefined) {
 	if (!isPolar(viewBox)) {
 		return viewBox;
 	}
@@ -181,8 +252,8 @@ function polarViewBoxToTrapezoid(viewBox) {
 	};
 }
 
-export function Label(outerProps) {
-	const props = resolveDefaultProps(outerProps, defaultLabelProps);
+export function Label(outerProps: Props) {
+	const props: PropsWithDefaults = resolveDefaultProps(outerProps, defaultLabelProps);
 	const {
 		viewBox: viewBoxFromProps,
 		parentViewBox,
@@ -200,7 +271,7 @@ export function Label(outerProps) {
 	// position 'center' prefers the cartesian box (recharts#6030 quick fix).
 	const resolvedViewBox =
 		position === 'center' ? cartesianViewBox : polarViewBox ?? cartesianViewBox;
-	let viewBox, label, positionAttrs;
+	let viewBox, label, positionAttrs: LabelPositionAttributes;
 	if (viewBoxFromProps == null) {
 		viewBox = resolvedViewBox;
 	} else if (isPolar(viewBoxFromProps)) {
@@ -270,7 +341,11 @@ export function Label(outerProps) {
 
 Label.displayName = 'Label';
 
-const parseLabel = (label, viewBox, labelRef) => {
+const parseLabel = (
+	label: ImplicitLabelType | undefined,
+	viewBox: ViewBox | undefined,
+	labelRef?: RefObject<SVGTextElement | null> | null,
+) => {
 	if (!label) {
 		return null;
 	}
@@ -281,7 +356,7 @@ const parseLabel = (label, viewBox, labelRef) => {
 	if (isNumOrStr(label)) {
 		return <Label key="label-implicit" value={label} {...commonProps} />;
 	}
-	if (isValidElement(label)) {
+	if (isValidElement<SVGElement>(label)) {
 		if (label.type === Label) {
 			return cloneElement(label, { key: 'label-implicit', ...commonProps });
 		}
@@ -296,13 +371,18 @@ const parseLabel = (label, viewBox, labelRef) => {
 	return null;
 };
 
-export function CartesianLabelFromLabelProp(props) {
+export function CartesianLabelFromLabelProp(props: {
+	label: ImplicitLabelType | undefined;
+	labelRef?: RefObject<SVGTextElement | null> | null;
+}) {
 	const { label, labelRef } = props;
 	const viewBox = useCartesianLabelContext();
 	return parseLabel(label, viewBox, labelRef) || null;
 }
 
-export function PolarLabelFromLabelProp(props) {
+export function PolarLabelFromLabelProp(props: {
+	label: ImplicitLabelType | undefined;
+}) {
 	const { label } = props;
 	const viewBox = usePolarLabelContext();
 	return parseLabel(label, viewBox) || null;

package/src/component/LabelList.tsrx

@@ -1,3 +1,46 @@
+import type { SVGProps, PropsWithoutRef } from '../util/OctaneTypes.ts';
+import type { LabelContentType, LabelPosition, LabelFormatter } from './Label.tsrx';
+import type {
+	CartesianViewBoxRequired,
+	DataKey,
+	PolarViewBoxRequired,
+	TrapezoidViewBox,
+} from '../util/types';
+import type { LabelProps } from '../index';
+import type { ZIndexable } from '../zIndex/ZIndexLayer.tsrx';
+import type { RenderableText } from './Text.tsrx';
+
+export interface LabelListEntry<DataPointItem = any> {
+	value: unknown;
+	payload: DataPointItem;
+	fill: string | undefined;
+}
+export interface CartesianLabelListEntry extends LabelListEntry, TrapezoidViewBox {
+	viewBox: TrapezoidViewBox;
+	parentViewBox?: CartesianViewBoxRequired;
+}
+export interface PolarLabelListEntry extends LabelListEntry {
+	viewBox: PolarViewBoxRequired;
+	parentViewBox?: PolarViewBoxRequired;
+	clockWise?: boolean;
+}
+interface LabelListProps extends ZIndexable {
+	id?: string;
+	valueAccessor?: (entry: | CartesianLabelListEntry
+	| PolarLabelListEntry, index: number) => RenderableText;
+	clockWise?: boolean;
+	dataKey?: DataKey<any>;
+	content?: LabelContentType;
+	textBreakAll?: boolean;
+	position?: LabelPosition;
+	offset?: LabelProps['offset'];
+	angle?: number;
+	formatter?: LabelFormatter;
+	zIndex?: number;
+}
+type SvgTextProps = PropsWithoutRef<SVGProps<SVGTextElement>>;
+export type Props = Omit<SvgTextProps, 'children'> & LabelListProps;
+export type ImplicitLabelListType = boolean | LabelContentType | Props;
 // Port of component/LabelList.tsx — one Label per data entry, fed by the
 // cartesian/polar label-list contexts the graphical items provide.
 import { createContext, useContext, isValidElement } from 'octane';
@@ -10,7 +53,7 @@ import { ZIndexLayer } from '../zIndex/ZIndexLayer.tsrx';
 import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 import { isRenderableText } from './Text.tsrx';
 
-const defaultAccessor = (entry) => {
+const defaultAccessor = (entry: LabelListEntry) => {
 	const val = Array.isArray(entry.value) ? entry.value[entry.value.length - 1] : entry.value;
 	if (isRenderableText(val)) {
 		return val;
@@ -18,9 +61,13 @@ const defaultAccessor = (entry) => {
 	return undefined;
 };
 
-const CartesianLabelListContext = createContext(undefined);
+const CartesianLabelListContext = createContext<ReadonlyArray<CartesianLabelListEntry> | undefined>(
+	undefined,
+);
 export const CartesianLabelListContextProvider = CartesianLabelListContext.Provider;
-const PolarLabelListContext = createContext(undefined);
+const PolarLabelListContext = createContext<ReadonlyArray<PolarLabelListEntry> | undefined>(
+	undefined,
+);
 export const PolarLabelListContextProvider = PolarLabelListContext.Provider;
 
 function useCartesianLabelListContext() {
@@ -30,7 +77,7 @@ function usePolarLabelListContext() {
 	return useContext(PolarLabelListContext);
 }
 
-export function LabelList(labelListProps) {
+export function LabelList(labelListProps: Props) {
 	const { valueAccessor = defaultAccessor, ...restProps } = labelListProps;
 	const { dataKey, clockWise, id, textBreakAll, zIndex, ...others } = restProps;
 	const cartesianData = useCartesianLabelListContext();
@@ -65,7 +112,9 @@ export function LabelList(labelListProps) {
 
 LabelList.displayName = 'LabelList';
 
-export function LabelListFromLabelProp(props) {
+export function LabelListFromLabelProp(props: {
+	label?: ImplicitLabelListType;
+}) {
 	const { label } = props;
 	if (!label) {
 		return null;

package/src/component/Legend.tsrx

@@ -1,5 +1,6 @@
+import type { CSSProperties } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { CSSProperties, useLayoutEffect } from 'octane';
+import { useLayoutEffect } from 'octane';
 import { createPortal } from 'octane';
 import { useLegendPortal } from '../context/legendPortalContext';
 import {
@@ -8,11 +9,11 @@ import {
 	LegendPayload,
 	Props as DefaultLegendContentProps,
 	VerticalAlignmentType,
-} from './DefaultLegendContent';
+} from './DefaultLegendContent.tsrx';
 
 import { LayoutType, Margin, Size } from '../util/types';
 import { getUniqPayload, UniqueOption } from '../util/payload/getUniqPayload';
-import { useLegendPayload } from '../context/legendPayloadContext';
+import { useLegendPayload } from '../context/legendPayloadContext.tsrx';
 import { ElementOffset, useElementOffset } from '../util/useElementOffset';
 import { useChartHeight, useChartWidth, useMargin } from '../context/chartLayoutContext';
 import { LegendSettings, setLegendSettings, setLegendSize } from '../state/legendSlice';
@@ -44,7 +45,7 @@ function LegendContent(props: ContentProps) {
 		return React.cloneElement(props.content, contentProps);
 	}
 	if (typeof props.content === 'function') {
-		return React.createElement(props.content as any, contentProps);
+		return React.createElement(props.content, contentProps);
 	}
 
 	return <DefaultLegendContent {...contentProps} />;
@@ -297,6 +298,9 @@ function LegendImpl(outsideProps: Props) {
 	return createPortal(legendElement, legendPortal);
 }
 
-export const Legend = React.memo(LegendImpl, propsAreEqual);
+export const Legend = React.memo(LegendImpl, propsAreEqual) as
+	typeof LegendImpl & {
+		displayName?: string;
+	};
 
 Legend.displayName = 'Legend';