@octanejs/recharts 0.1.41 → 0.1.43

package/src/component/ResponsiveContainer.tsrx

@@ -1,4 +1,5 @@
-import type { OctaneNode } from 'octane';
+import type { CSSProperties, HTMLAttributes, OctaneNode, Ref } from '../util/OctaneTypes.ts';
+
 import {
 	createContext,
 	useCallback,
@@ -25,7 +26,10 @@ export interface ResponsiveContainerDimensions {
 	height: number;
 }
 
-export interface Props {
+export interface Props extends Omit<
+	HTMLAttributes<HTMLDivElement>,
+	'id' | 'className' | 'style' | 'onResize'
+> {
 	aspect?: number;
 	width?: `${number}%` | number;
 	height?: `${number}%` | number;
@@ -37,10 +41,9 @@ export interface Props {
 	debounce?: number;
 	id?: string | number;
 	className?: string | number;
-	style?: React.CSSProperties;
+	style?: CSSProperties;
 	onResize?: (width: number, height: number) => void;
-	ref?: React.Ref<HTMLDivElement>;
-	[key: string]: any;
+	ref?: Ref<HTMLDivElement>;
 }
 
 const initialDimension = defaultResponsiveContainerProps.initialDimension;
@@ -87,9 +90,9 @@ function SizeDetectorContainer(props: Props) @{
 		...others
 	} = props;
 	const containerRef = useRef<HTMLDivElement | null>(null);
-	const onResizeRef = useRef(onResize);
+	const onResizeRef = useRef<Props['onResize']>(onResize);
 	onResizeRef.current = onResize;
-	useImperativeHandle(ref, () => containerRef.current, []);
+	useImperativeHandle<HTMLDivElement | null>(ref, () => containerRef.current, []);
 	const [sizes, setSizes] = useState({
 		containerWidth: initial.width,
 		containerHeight: initial.height,
@@ -114,7 +117,7 @@ function SizeDetectorContainer(props: Props) @{
 			setContainerSize(entry.contentRect.width, entry.contentRect.height);
 			onResizeRef.current?.(entry.contentRect.width, entry.contentRect.height);
 		};
-		const callback =
+		const callback: typeof handleResize & { cancel?: () => void } =
 			debounce > 0
 				? throttle(handleResize, debounce, { trailing: true, leading: false })
 				: handleResize;
@@ -123,7 +126,7 @@ function SizeDetectorContainer(props: Props) @{
 		setContainerSize(rect.width, rect.height);
 		observer.observe(containerRef.current);
 		return () => {
-			if ('cancel' in callback) callback.cancel();
+			callback.cancel?.();
 			observer.disconnect();
 		};
 	}, [setContainerSize, debounce]);
@@ -133,7 +136,7 @@ function SizeDetectorContainer(props: Props) @{
 		aspect,
 		maxHeight,
 	});
-	const outerProps: any = Object.assign({}, others, {
+	const outerProps = Object.assign({}, others, {
 		id: id ? `${id}` : undefined,
 		className: clsx('recharts-responsive-container', className),
 		style: { ...style, width, height, minWidth, minHeight, maxHeight },

package/src/component/Text.tsrx

@@ -1,3 +1,41 @@
+import type { CSSProperties, OctaneNode, SVGProps } from '../util/OctaneTypes.ts';
+
+interface Words {
+	words: Array<string>;
+	width: number | undefined;
+}
+interface WordsWithWidth {
+	words: Array<string>;
+	width: number;
+}
+interface WordWithComputedWidth {
+	word: string;
+	width: number;
+}
+interface CalculatedWordWidths {
+	wordsWithComputedWidth: Array<WordWithComputedWidth>;
+	spaceWidth: number;
+}
+type CalculateWordWidthsParam = Pick<Props, 'children' | 'breakAll' | 'style'>;
+export type TextAnchor = 'start' | 'middle' | 'end' | 'inherit';
+export type TextVerticalAnchor = 'start' | 'middle' | 'end';
+export type RenderableText = string | number | boolean | null | undefined;
+interface TextProps {
+	scaleToFit?: boolean;
+	angle?: number;
+	textAnchor?: TextAnchor;
+	verticalAnchor?: TextVerticalAnchor;
+	style?: CSSProperties;
+	lineHeight?: number | string;
+	breakAll?: boolean;
+	children?: RenderableText;
+	maxLines?: number;
+	width?: number | string;
+}
+export type Props = Omit<SVGProps<SVGTextElement>, 'textAnchor' | 'verticalAnchor'> & TextProps;
+type CalculateWordsByLinesProps = Pick<Props, 'maxLines' | 'children' | 'style' | 'breakAll'>;
+type GetWordsByLinesProps =
+	Pick<Props, 'width' | 'scaleToFit' | 'children' | 'style' | 'breakAll' | 'maxLines'>;
 // Port of component/Text.tsx — the SVG text renderer with word wrapping,
 // maxLines binary-search truncation, scaleToFit, and rotation. Measurement
 // runs through the vendored getStringSize (0×0 under SSR, so SSR renders the
@@ -14,9 +52,13 @@ import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
 
 const BREAKING_SPACES = /[ \f\n\r\t\v\u2028\u2029]+/;
 
-const calculateWordWidths = ({ children, breakAll, style }) => {
+const calculateWordWidths = ({
+	children,
+	breakAll,
+	style,
+}: CalculateWordWidthsParam): CalculatedWordWidths | null => {
 	try {
-		let words = [];
+		let words: string[] = [];
 		if (!isNullish(children)) {
 			if (breakAll) {
 				words = children.toString().split('');
@@ -37,19 +79,21 @@ const calculateWordWidths = ({ children, breakAll, style }) => {
 	}
 };
 
-export function isValidTextAnchor(value) {
+export function isValidTextAnchor(value: string | undefined): value is TextAnchor {
 	return value === 'start' || value === 'middle' || value === 'end' || value === 'inherit';
 }
 
-export function isRenderableText(val) {
+export function isRenderableText(val: unknown): val is RenderableText {
 	return isNullish(val) || typeof val === 'string' || typeof val === 'number' ||
 		typeof val === 'boolean';
 }
 
-const calculate = (words, lineWidth, spaceWidth, scaleToFit) => words.reduce((
-	result,
-	{ word, width },
-) => {
+const calculate = (
+	words: ReadonlyArray<WordWithComputedWidth>,
+	lineWidth: number | string | undefined,
+	spaceWidth: number,
+	scaleToFit: boolean,
+): WordsWithWidth[] => words.reduce<WordsWithWidth[]>((result, { word, width }) => {
 	const currentLine = result[result.length - 1];
 	if (
 		currentLine && width != null &&
@@ -66,41 +110,53 @@ const calculate = (words, lineWidth, spaceWidth, scaleToFit) => words.reduce((
 	return result;
 }, []);
 
-const findLongestLine = (words) => words.reduce((a, b) => (a.width > b.width ? a : b));
+const findLongestLine = (words: ReadonlyArray<WordsWithWidth>) => words.reduce(
+	(a, b) => (a.width > b.width ? a : b),
+);
 
 const suffix = '…';
 
 const checkOverflow = (
-	text,
-	index,
-	breakAll,
-	style,
-	maxLines,
-	lineWidth,
-	spaceWidth,
-	scaleToFit,
-) => {
+	text: string,
+	index: number,
+	breakAll: TextProps['breakAll'],
+	style: TextProps['style'],
+	maxLines: number,
+	lineWidth: number | string | undefined,
+	spaceWidth: number,
+	scaleToFit: boolean,
+): [boolean, ReadonlyArray<WordsWithWidth>] => {
 	const tempText = text.slice(0, index);
 	const words = calculateWordWidths({ breakAll, style, children: tempText + suffix });
 	if (!words) {
 		return [false, []];
 	}
-	const result = calculate(words.wordsWithComputedWidth, lineWidth, spaceWidth, scaleToFit);
+	const result: ReadonlyArray<WordsWithWidth> = calculate(
+		words.wordsWithComputedWidth,
+		lineWidth,
+		spaceWidth,
+		scaleToFit,
+	);
 	const doesOverflow =
 		result.length > maxLines || findLongestLine(result).width > Number(lineWidth);
 	return [doesOverflow, result];
 };
 
 const calculateWordsByLines = (
-	{ maxLines, children, style, breakAll },
-	initialWordsWithComputedWith,
-	spaceWidth,
-	lineWidth,
-	scaleToFit,
+	{ maxLines, children, style, breakAll }: CalculateWordsByLinesProps,
+	initialWordsWithComputedWith: ReadonlyArray<WordWithComputedWidth>,
+	spaceWidth: number,
+	lineWidth: number | string | undefined,
+	scaleToFit: boolean,
 ) => {
 	const shouldLimitLines = isNumber(maxLines);
 	const text = String(children);
-	const originalResult = calculate(initialWordsWithComputedWith, lineWidth, spaceWidth, scaleToFit);
+	const originalResult: ReadonlyArray<WordsWithWidth> = calculate(
+		initialWordsWithComputedWith,
+		lineWidth,
+		spaceWidth,
+		scaleToFit,
+	);
 	if (!shouldLimitLines || scaleToFit) {
 		return originalResult;
 	}
@@ -112,7 +168,7 @@ const calculateWordsByLines = (
 	let start = 0;
 	let end = text.length - 1;
 	let iterations = 0;
-	let trimmedResult;
+	let trimmedResult: ReadonlyArray<WordsWithWidth> | undefined;
 	while (start <= end && iterations <= text.length - 1) {
 		const middle = Math.floor((start + end) / 2);
 		const prev = middle - 1;
@@ -153,7 +209,7 @@ const calculateWordsByLines = (
 	return trimmedResult || originalResult;
 };
 
-const getWordsWithoutCalculate = (children) => {
+const getWordsWithoutCalculate = (children: OctaneNode) => {
 	const words =
 		!isNullish(children) ? children.toString().split(BREAKING_SPACES) : [];
 	return [
@@ -161,7 +217,14 @@ const getWordsWithoutCalculate = (children) => {
 	];
 };
 
-export const getWordsByLines = ({ width, scaleToFit, children, style, breakAll, maxLines }) => {
+export const getWordsByLines = ({
+	width,
+	scaleToFit,
+	children,
+	style,
+	breakAll,
+	maxLines,
+}: GetWordsByLinesProps) => {
 	// Only perform calculations if using features that require them (multiline, scaleToFit)
 	if ((width || scaleToFit) && !Global.isSsr) {
 		const wordWidths = calculateWordWidths({ breakAll, children, style });
@@ -195,9 +258,9 @@ export const textDefaultProps = {
 	verticalAnchor: 'end',
 	x: 0,
 	y: 0,
-};
+} as const satisfies Partial<Props>;
 
-export function Text(outsideProps) @{
+export function Text(outsideProps: Props) @{
 	const {
 		x: propsX,
 		y: propsY,
@@ -210,7 +273,7 @@ export function Text(outsideProps) @{
 		ref,
 		...props
 	} = resolveDefaultProps(outsideProps, textDefaultProps);
-	const wordsByLines = useMemo(() => {
+	const wordsByLines: ReadonlyArray<Words> = useMemo(() => {
 		return getWordsByLines({
 			breakAll: props.breakAll,
 			children: props.children,
@@ -229,7 +292,7 @@ export function Text(outsideProps) @{
 	if (!isWellBehavedNumber(x) || !isWellBehavedNumber(y)) {
 		return null;
 	}
-	let startDy;
+	let startDy: string;
 	switch (verticalAnchor) {
 		case 'start':
 			startDy = reduceCSSCalc('calc(' + capHeight + ')');

package/src/component/Tooltip.tsrx

@@ -1,5 +1,6 @@
+import type { CSSProperties, OctaneElement, OctaneNode } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import { CSSProperties, ReactElement, ReactNode, useEffect } from 'octane';
+import { useEffect } from 'octane';
 import { createPortal } from 'octane';
 import {
 	DefaultTooltipContent,
@@ -8,15 +9,15 @@ import {
 	Props as DefaultTooltipContentProps,
 	TooltipItemSorter,
 	ValueType,
-} from './DefaultTooltipContent';
-import { TooltipBoundingBox } from './TooltipBoundingBox';
+} from './DefaultTooltipContent.tsrx';
+import { TooltipBoundingBox } from './TooltipBoundingBox.tsrx';
 
 import { getUniqPayload, UniqueOption } from '../util/payload/getUniqPayload';
 import { AllowInDimension, AnimationDuration, EasingInput, Coordinate } from '../util/types';
 import { useViewBox } from '../context/chartLayoutContext';
 import { useAccessibilityLayer } from '../context/accessibilityContext';
 import { useElementOffset } from '../util/useElementOffset';
-import { Cursor, CursorDefinition } from './Cursor';
+import { Cursor, CursorDefinition } from './Cursor.tsrx';
 import {
 	selectActiveCoordinate,
 	selectActiveLabel,
@@ -33,12 +34,12 @@ import {
 	TooltipPayloadEntry,
 } from '../state/tooltipSlice';
 import { AxisId } from '../state/cartesianAxisSlice';
-import { useTooltipChartSynchronisation } from '../synchronisation/useChartSynchronisation';
+import { useTooltipChartSynchronisation } from '../synchronisation/useChartSynchronisation.tsrx';
 import { useTooltipEventType } from '../state/selectors/selectTooltipEventType';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
 
 export type ContentType<TValue extends ValueType = ValueType, TName extends NameType = NameType> =
-	ReactElement | ((props: TooltipContentProps<TValue, TName>) => ReactNode);
+	OctaneElement | ((props: TooltipContentProps<TValue, TName>) => OctaneNode);
 
 function defaultUniqBy(entry: Payload<ValueType, NameType>) {
 	return entry.dataKey;
@@ -60,7 +61,7 @@ export type TooltipContentProps<
 function renderContent<TValue extends ValueType, TName extends NameType>(
 	content: ContentType<TValue, TName> | undefined,
 	props: TooltipContentProps,
-): ReactNode {
+): OctaneNode {
 	if (React.isValidElement(content)) {
 		return React.cloneElement(content, props);
 	}
@@ -143,8 +144,8 @@ export type TooltipProps<TValue extends ValueType = ValueType, TName extends Nam
  * Function to customize the value in the tooltip.
  * If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "name"
  */
-		formatter?: (value: TValue, name: TName, item: TooltipPayloadEntry, index: number, payload: TooltipPayload) => | ReactNode
-		| [ReactNode, ReactNode];
+		formatter?: (value: TValue, name: TName, item: TooltipPayloadEntry, index: number, payload: TooltipPayload) => | OctaneNode
+		| [OctaneNode, OctaneNode];
 		/**
  * If true, the tooltip will display information about hidden series.
  * Defaults to false.
@@ -173,7 +174,7 @@ export type TooltipProps<TValue extends ValueType = ValueType, TName extends Nam
 		/**
  * The formatter function of label in tooltip.
  */
-		labelFormatter?: (label: any, payload: TooltipPayload) => ReactNode;
+		labelFormatter?: (label: any, payload: TooltipPayload) => OctaneNode;
 		/**
  * The style of default tooltip label which is a p element.
  * @defaultValue {}

package/src/component/TooltipBoundingBox.tsrx

@@ -1,5 +1,5 @@
+import type { CSSProperties, OctaneNode } from '../util/OctaneTypes.ts';
 import * as React from 'octane';
-import type { OctaneNode } from 'octane';
 
 import {
 	AllowInDimension,
@@ -27,7 +27,7 @@ export type TooltipBoundingBoxProps = {
 	reverseDirection: AllowInDimension;
 	useTranslate3d: boolean;
 	viewBox: CartesianViewBox;
-	wrapperStyle: React.CSSProperties;
+	wrapperStyle: CSSProperties;
 	lastBoundingBox: ElementOffset;
 	innerRef: SetElementOffset;
 	hasPortalFromProps: boolean;
@@ -100,7 +100,7 @@ function TooltipBoundingBoxImpl(props: TooltipBoundingBoxProps) {
 		useTranslate3d: props.useTranslate3d,
 		viewBox: props.viewBox,
 	});
-	const positionStyle: React.CSSProperties =
+	const positionStyle: CSSProperties =
 		props.hasPortalFromProps
 			? {}
 			: {
@@ -117,13 +117,12 @@ function TooltipBoundingBoxImpl(props: TooltipBoundingBoxProps) {
 					top: 0,
 					left: 0,
 				};
-	const outerStyle: React.CSSProperties = {
+	const outerStyle: CSSProperties = {
 		...positionStyle,
 		visibility: !state.dismissed && props.active && props.hasPayload ? 'visible' : 'hidden',
 		...props.wrapperStyle,
 	};
 	return <div
-		// @ts-expect-error typescript library does not recognize xmlns attribute, but it's required for an HTML chunk inside SVG.
 		xmlns="http://www.w3.org/1999/xhtml"
 		tabIndex={-1}
 		className={cssClasses}

package/src/component/{responsiveContainerUtils.js → responsiveContainerUtils.ts}

@@ -1,7 +1,12 @@
-// Vendored verbatim from recharts@3.9.2 es6/component/responsiveContainerUtils.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { CSSProperties } from '../util/OctaneTypes';
+
 import { isPercent } from '../util/DataUtils';
-export var defaultResponsiveContainerProps = {
+
+import type { Percent } from '../util/types';
+import type { Props } from './ResponsiveContainer.tsrx';
+
+export const defaultResponsiveContainerProps = {
 	width: '100%',
 	height: '100%',
 	debounce: 0,
@@ -10,21 +15,32 @@ export var defaultResponsiveContainerProps = {
 		width: -1,
 		height: -1,
 	},
-};
-export var calculateChartDimensions = (containerWidth, containerHeight, props) => {
-	var _props$width = props.width,
-		width = _props$width === void 0 ? defaultResponsiveContainerProps.width : _props$width,
-		_props$height = props.height,
-		height = _props$height === void 0 ? defaultResponsiveContainerProps.height : _props$height,
-		aspect = props.aspect,
-		maxHeight = props.maxHeight;
+} as const satisfies Partial<Props>;
+
+export const calculateChartDimensions = (
+	containerWidth: number | undefined,
+	containerHeight: number | undefined,
+	props: {
+		width: Percent | number | undefined;
+		height: Percent | number | undefined;
+		aspect: number | undefined;
+		maxHeight: number | undefined;
+	},
+) => {
+	const {
+		width = defaultResponsiveContainerProps.width,
+		height = defaultResponsiveContainerProps.height,
+		aspect,
+		maxHeight,
+	} = props;
 
 	/*
 	 * The containerWidth and containerHeight are already percentage based because it's set as that percentage in CSS.
 	 * Means we don't have to calculate percentages here.
 	 */
-	var calculatedWidth = isPercent(width) ? containerWidth : Number(width);
-	var calculatedHeight = isPercent(height) ? containerHeight : Number(height);
+	let calculatedWidth: number | undefined = isPercent(width) ? containerWidth : Number(width);
+	let calculatedHeight: number | undefined = isPercent(height) ? containerHeight : Number(height);
+
 	if (aspect && aspect > 0) {
 		// Preserve the desired aspect ratio
 		if (calculatedWidth) {
@@ -40,25 +56,24 @@ export var calculateChartDimensions = (containerWidth, containerHeight, props) =
 			calculatedHeight = maxHeight;
 		}
 	}
-	return {
-		calculatedWidth,
-		calculatedHeight,
-	};
+
+	return { calculatedWidth, calculatedHeight };
 };
-var bothOverflow = {
+
+const bothOverflow: CSSProperties = {
 	width: 0,
 	height: 0,
 	overflow: 'visible',
 };
-var overflowX = {
+const overflowX: CSSProperties = {
 	width: 0,
 	overflowX: 'visible',
 };
-var overflowY = {
+const overflowY: CSSProperties = {
 	height: 0,
 	overflowY: 'visible',
 };
-var noStyle = {};
+const noStyle: CSSProperties = {};
 
 /**
  * This zero-size, overflow-visible is required to allow the chart to shrink.
@@ -74,11 +89,14 @@ var noStyle = {};
  * because in that case the chart can't shrink in that dimension anyway.
  * This fixes defining the dimensions using aspect ratio: https://github.com/recharts/recharts/issues/6245
  */
-export var getInnerDivStyle = (props) => {
-	var width = props.width,
-		height = props.height;
-	var isWidthPercent = isPercent(width);
-	var isHeightPercent = isPercent(height);
+export const getInnerDivStyle = (props: {
+	width?: Percent | number;
+	height?: Percent | number;
+}): CSSProperties => {
+	const { width, height } = props;
+	const isWidthPercent = isPercent(width);
+	const isHeightPercent = isPercent(height);
+
 	if (isWidthPercent && isHeightPercent) {
 		return bothOverflow;
 	}
@@ -90,12 +108,19 @@ export var getInnerDivStyle = (props) => {
 	}
 	return noStyle;
 };
-export function getDefaultWidthAndHeight(_ref) {
-	var width = _ref.width,
-		height = _ref.height,
-		aspect = _ref.aspect;
-	var calculatedWidth = width;
-	var calculatedHeight = height;
+
+export function getDefaultWidthAndHeight({
+	width,
+	height,
+	aspect,
+}: {
+	width?: Percent | number;
+	height?: Percent | number;
+	aspect?: number;
+}): { width: Percent | number | undefined; height: Percent | number | undefined } {
+	let calculatedWidth = width;
+	let calculatedHeight = height;
+
 	if (calculatedWidth === undefined && calculatedHeight === undefined) {
 		calculatedWidth = defaultResponsiveContainerProps.width;
 		calculatedHeight = defaultResponsiveContainerProps.height;
@@ -104,8 +129,6 @@ export function getDefaultWidthAndHeight(_ref) {
 	} else if (calculatedHeight === undefined) {
 		calculatedHeight = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.height;
 	}
-	return {
-		width: calculatedWidth,
-		height: calculatedHeight,
-	};
+
+	return { width: calculatedWidth, height: calculatedHeight };
 }

package/src/container/ClipPathProvider.tsrx

@@ -1,12 +1,16 @@
+import type { OctaneNode } from '../util/OctaneTypes.ts';
+
 // Port of container/ClipPathProvider.tsx — mints the chart's clip path id,
 // renders the <defs><clipPath> sized to the plot area, and provides the id.
 import { createContext, useContext, useState } from 'octane';
 import { uniqueId } from '../util/DataUtils';
 import { usePlotArea } from '../hooks';
 
-const ClipPathIdContext = createContext(undefined);
+const ClipPathIdContext = createContext<string | undefined>(undefined);
 
-export function ClipPathProvider(props) @{
+export function ClipPathProvider(props: {
+	children: OctaneNode;
+}) @{
 	const { children } = props;
 	const [clipPathId] = useState(uniqueId('recharts') + '-clip');
 	const plotArea = usePlotArea();

package/src/container/Layer.tsrx

@@ -1,8 +1,15 @@
+import type { OctaneNode, SVGProps } from '../util/OctaneTypes.ts';
+
+interface LayerProps {
+	className?: SVGProps<SVGGElement>['className'];
+	children?: OctaneNode;
+}
+export type Props = SVGProps<SVGGElement> & LayerProps;
 // Port of container/Layer.tsx — an SVG <g> group. Ref is a plain prop.
 import { clsx } from 'clsx';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 
-export function Layer(props) {
+export function Layer(props: Props) {
 	const { children, className, ref, ...others } = props;
 	const layerClass = clsx('recharts-layer', className);
 	return <g className={layerClass} {...svgPropertiesAndEvents(others)} ref={ref}>{children}</g>;

package/src/container/RootSurface.tsrx

@@ -1,3 +1,12 @@
+import type { OctaneNode, Ref } from '../util/OctaneTypes.ts';
+
+type RootSurfaceProps = {
+	children: OctaneNode;
+	title: string | undefined;
+	desc: string | undefined;
+	otherAttributes: Record<string, unknown> | null;
+	ref?: Ref<SVGSVGElement>;
+};
 // Port of container/RootSurface.tsx — the chart's outer <svg> (via Surface),
 // sized from the store, with the zIndex portal <g>s wrapped around children.
 // A panorama (Brush preview) renders a nested, brush-sized Surface instead.
@@ -18,7 +27,7 @@ const FULL_WIDTH_AND_HEIGHT = {
 	display: 'block',
 };
 
-function MainChartSurface(props) {
+function MainChartSurface(props: RootSurfaceProps) {
 	const width = useChartWidth();
 	const height = useChartHeight();
 	const hasAccessibilityLayer = useAccessibilityLayer();
@@ -26,7 +35,7 @@ function MainChartSurface(props) {
 		return null;
 	}
 	const { children, otherAttributes, title, desc, ref } = props;
-	let tabIndex, role;
+	let tabIndex: number | undefined, role: string | undefined;
 	if (otherAttributes != null) {
 		if (typeof otherAttributes.tabIndex === 'number') {
 			tabIndex = otherAttributes.tabIndex;
@@ -52,7 +61,9 @@ function MainChartSurface(props) {
 	>{children}</Surface>;
 }
 
-function BrushPanoramaSurface(props) {
+function BrushPanoramaSurface(props: {
+	children: OctaneNode;
+}) {
 	const { children } = props;
 	const brushDimensions = useAppSelector(selectBrushDimensions);
 	if (!brushDimensions) {
@@ -62,7 +73,7 @@ function BrushPanoramaSurface(props) {
 	return <Surface width={width} height={height} x={x} y={y}>{children}</Surface>;
 }
 
-export function RootSurface(props) {
+export function RootSurface(props: RootSurfaceProps) {
 	const { children, ref, ...rest } = props;
 	const isPanorama = useIsPanorama();
 	if (isPanorama) {

package/src/container/Surface.tsrx

@@ -1,9 +1,23 @@
+import type { CSSProperties, OctaneNode, SVGProps } from '../util/OctaneTypes.ts';
+import type { CartesianViewBox } from '../util/types';
+
+interface SurfaceProps {
+	width: number | string;
+	height: number | string;
+	viewBox?: CartesianViewBox;
+	className?: string;
+	style?: CSSProperties;
+	children?: OctaneNode;
+	title?: string;
+	desc?: string;
+}
+export type Props = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & SurfaceProps;
 // Port of container/Surface.tsx — the root <svg> element every chart renders
 // into. Ref is a plain prop (octane model, no forwardRef).
 import { clsx } from 'clsx';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 
-export function Surface(props) {
+export function Surface(props: Props) {
 	const { children, width, height, viewBox, className, style, title, desc, ref, ...others } = props;
 	const svgView = viewBox || { width, height, x: 0, y: 0 };
 	const layerClass = clsx('recharts-surface', className);