@octanejs/recharts 0.1.62 → 0.1.64

package/src/cartesian/Area.tsrx

@@ -91,8 +91,9 @@ export type BaseValue = number | 'dataMin' | 'dataMax';
 /**
  * Our base value array has payload in it, and we expose it externally too.
  */
-type BaseValueCoordinate<DataPointType = any> =
-	NullableCoordinate & { payload: DataPointType | undefined };
+type BaseValueCoordinate<DataPointType = any> = NullableCoordinate & {
+	payload: DataPointType | undefined;
+};
 
 /**
  * Internal props, combination of external props + defaultProps + private Recharts state
@@ -114,8 +115,8 @@ interface InternalAreaProps extends ZIndexable {
 	height: number;
 	hide: boolean;
 	/**
- * ID is mandatory internally, but optional externally.
- */
+	 * ID is mandatory internally, but optional externally.
+	 */
 	id: string;
 	isAnimationActive: boolean | 'auto';
 	isRange?: boolean;
@@ -143,235 +144,237 @@ interface InternalAreaProps extends ZIndexable {
 /**
  * External props, intended for end users to fill in
  */
-interface AreaProps<DataPointType = any, DataValueType = any> extends DataProvider<
-	DataPointType
->, Required<DataConsumer<DataPointType, DataValueType>>, ZIndexable {
+interface AreaProps<DataPointType = any, DataValueType = any>
+	extends
+		DataProvider<DataPointType>,
+		Required<DataConsumer<DataPointType, DataValueType>>,
+		ZIndexable {
 	/**
- * The active dot is rendered on the closest data point when user interacts with the chart. Options:
- *
- * - `false`: dots do not change on user activity; both active and inactive dots follow the `dot` prop (see below)
- * - `true`: renders the active dot with default settings
- * - `object`: the props of the active dot. This will be merged with the internal calculated props of the active dot
- * - `OctaneElement`: the custom active dot element
- * - `function`: a render function of the custom active dot
- *
- * @defaultValue true
- * @example <Area dataKey="value" activeDot={false} />
- * @example <Area dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
- * @example <Area dataKey="value" activeDot={CustomizedActiveDot} />
- *
- * @see {@link https://recharts.github.io/en-US/examples/SimpleLineChart/ A line chart with customized active dot}
- */
+	 * The active dot is rendered on the closest data point when user interacts with the chart. Options:
+	 *
+	 * - `false`: dots do not change on user activity; both active and inactive dots follow the `dot` prop (see below)
+	 * - `true`: renders the active dot with default settings
+	 * - `object`: the props of the active dot. This will be merged with the internal calculated props of the active dot
+	 * - `OctaneElement`: the custom active dot element
+	 * - `function`: a render function of the custom active dot
+	 *
+	 * @defaultValue true
+	 * @example <Area dataKey="value" activeDot={false} />
+	 * @example <Area dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
+	 * @example <Area dataKey="value" activeDot={CustomizedActiveDot} />
+	 *
+	 * @see {@link https://recharts.github.io/en-US/examples/SimpleLineChart/ A line chart with customized active dot}
+	 */
 	activeDot?: ActiveDotType;
 	/**
- * Specifies when the animation should begin, the unit of this option is ms.
- * @defaultValue 0
- */
+	 * Specifies when the animation should begin, the unit of this option is ms.
+	 * @defaultValue 0
+	 */
 	animationBegin?: number;
 	/**
- * Specifies the duration of animation, the unit of this option is ms.
- * @defaultValue 1500
- */
+	 * Specifies the duration of animation, the unit of this option is ms.
+	 * @defaultValue 1500
+	 */
 	animationDuration?: AnimationDuration;
 	/**
- * The type of easing function.
- * @defaultValue 'ease'
- */
+	 * The type of easing function.
+	 * @defaultValue 'ease'
+	 */
 	animationEasing?: EasingInput;
 	/**
- * Custom animation function for interpolating data items.
- * When provided, this replaces the default animation interpolation.
- *
- * @param prevItems The items from the previous animation frame, or null on first render
- * @param nextItems The target items to animate towards
- * @param animationElapsedTime A normalized time value (0 = start, 1 = end)
- * @returns The interpolated items at time animationElapsedTime
- *
- * @since 3.9
- * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
- */
+	 * Custom animation function for interpolating data items.
+	 * When provided, this replaces the default animation interpolation.
+	 *
+	 * @param prevItems The items from the previous animation frame, or null on first render
+	 * @param nextItems The target items to animate towards
+	 * @param animationElapsedTime A normalized time value (0 = start, 1 = end)
+	 * @returns The interpolated items at time animationElapsedTime
+	 *
+	 * @since 3.9
+	 * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
+	 */
 	animationInterpolateFn?: AnimationInterpolateFn<AreaPointItem, CartesianLayout>;
 	/**
- * Strategy for matching previous items to next items during animation.
- * Determines how Recharts pairs old data points with new data points
- * to create smooth transitions.
- *
- * - `matchByIndex` (default): match by array position with proportional stretching
- * - `matchAppend`: match sequentially by index and treat newly appended items as new
- * - `matchByDataKey('someKey')`: match by a data key from the payload
- * - Custom function `(item, index) => key`: match by the returned key
- *
- * @defaultValue index
- * @see matchByIndex
- * @see matchByDataKey
- * @see matchAppend
- *
- * @since 3.9
- * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
- */
+	 * Strategy for matching previous items to next items during animation.
+	 * Determines how Recharts pairs old data points with new data points
+	 * to create smooth transitions.
+	 *
+	 * - `matchByIndex` (default): match by array position with proportional stretching
+	 * - `matchAppend`: match sequentially by index and treat newly appended items as new
+	 * - `matchByDataKey('someKey')`: match by a data key from the payload
+	 * - Custom function `(item, index) => key`: match by the returned key
+	 *
+	 * @defaultValue index
+	 * @see matchByIndex
+	 * @see matchByDataKey
+	 * @see matchAppend
+	 *
+	 * @since 3.9
+	 * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
+	 */
 	animationMatchBy?: AnimationMatchByProp<AreaPointItem>;
 	/**
- * Configures the starting value used to build the internal baseline for non-ranged, non-stacked areas.
- *
- * WARNING despite the name `dataMin`|`dataMax` this actually reads the domain instead, so it should rather be
- * `domainMin`|`domainMax`. This looks like a small detail,
- * but it's actually important because domains are usually extended automatically.
- * For example the default numerical domain starts from 0.
- *
- * - `number`: uses the corresponding axis value as a flat baseline
- * - `dataMin`: uses the minimum of the value-axis domain
- * - `dataMax`: uses the maximum of the value-axis domain
- *
- * Ignored when the area is stacked or when `dataKey` already returns `[min, max]` tuples.
- *
- * Note that the baseValue does not interact with `animationInterpolateFn`;
- * baseValue is always animated by linear interpolation.
- * If you want a custom animation then have your `dataKey` return a tuple of two values instead of a single number
- * which will also render a ranged Area, and that does work with your custom `animationInterpolateFn`.
- */
+	 * Configures the starting value used to build the internal baseline for non-ranged, non-stacked areas.
+	 *
+	 * WARNING despite the name `dataMin`|`dataMax` this actually reads the domain instead, so it should rather be
+	 * `domainMin`|`domainMax`. This looks like a small detail,
+	 * but it's actually important because domains are usually extended automatically.
+	 * For example the default numerical domain starts from 0.
+	 *
+	 * - `number`: uses the corresponding axis value as a flat baseline
+	 * - `dataMin`: uses the minimum of the value-axis domain
+	 * - `dataMax`: uses the maximum of the value-axis domain
+	 *
+	 * Ignored when the area is stacked or when `dataKey` already returns `[min, max]` tuples.
+	 *
+	 * Note that the baseValue does not interact with `animationInterpolateFn`;
+	 * baseValue is always animated by linear interpolation.
+	 * If you want a custom animation then have your `dataKey` return a tuple of two values instead of a single number
+	 * which will also render a ranged Area, and that does work with your custom `animationInterpolateFn`.
+	 */
 	baseValue?: BaseValue;
 	className?: string;
 	/**
- * Whether to connect the area across null points.
- *
- * @defaultValue false
- * @see {@link https://recharts.github.io/en-US/examples/AreaChartConnectNulls/ AreaChart with connectNull true and false}
- */
+	 * Whether to connect the area across null points.
+	 *
+	 * @defaultValue false
+	 * @see {@link https://recharts.github.io/en-US/examples/AreaChartConnectNulls/ AreaChart with connectNull true and false}
+	 */
 	connectNulls?: boolean;
 	/**
- * Renders a circle element at each data point. Options:
- *
- * - `false`: no dots are drawn;
- * - `true`: renders the dots with default settings;
- * - `object`: the props of the dot. This will be merged with the internal calculated props of each dot;
- * - `OctaneElement`: the custom dot element;
- * - `function`: a render function of the custom dot.
- *
- * @defaultValue false
- */
+	 * Renders a circle element at each data point. Options:
+	 *
+	 * - `false`: no dots are drawn;
+	 * - `true`: renders the dots with default settings;
+	 * - `object`: the props of the dot. This will be merged with the internal calculated props of each dot;
+	 * - `OctaneElement`: the custom dot element;
+	 * - `function`: a render function of the custom dot.
+	 *
+	 * @defaultValue false
+	 */
 	dot?: DotType;
 	/**
- * Hides the whole graphical element when true.
- *
- * Hiding an element is different from removing it from the chart:
- * Hidden graphical elements are still visible in Legend,
- * and can be included in axis domain calculations,
- * depending on `includeHidden` props of your XAxis/YAxis.
- *
- * @defaultValue false
- */
+	 * Hides the whole graphical element when true.
+	 *
+	 * Hiding an element is different from removing it from the chart:
+	 * Hidden graphical elements are still visible in Legend,
+	 * and can be included in axis domain calculations,
+	 * depending on `includeHidden` props of your XAxis/YAxis.
+	 *
+	 * @defaultValue false
+	 */
 	hide?: boolean;
 	/**
- * Unique identifier of this component.
- * Used as an HTML attribute `id`, and also to identify this element internally.
- *
- * If undefined, Recharts will generate a unique ID automatically.
- */
+	 * Unique identifier of this component.
+	 * Used as an HTML attribute `id`, and also to identify this element internally.
+	 *
+	 * If undefined, Recharts will generate a unique ID automatically.
+	 */
 	id?: string;
 	/**
- * If set false, animation of area will be disabled.
- * If set "auto", will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
- * @defaultValue 'auto'
- */
+	 * If set false, animation of area will be disabled.
+	 * If set "auto", will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
+	 * @defaultValue 'auto'
+	 */
 	isAnimationActive?: boolean | 'auto';
 	/**
- * Renders one label for each data point. Options:
- *
- * - `true`: renders default labels
- * - `false`: no labels are rendered
- * - `object`: the props of LabelList component
- * - `OctaneElement`: a custom SVG label element, such as `<text>` or `<g>`.
- *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
- * - `function`: a render function of custom label
- *
- * @defaultValue false
- */
+	 * Renders one label for each data point. Options:
+	 *
+	 * - `true`: renders default labels
+	 * - `false`: no labels are rendered
+	 * - `object`: the props of LabelList component
+	 * - `OctaneElement`: a custom SVG label element, such as `<text>` or `<g>`.
+	 *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
+	 * - `function`: a render function of custom label
+	 *
+	 * @defaultValue false
+	 */
 	label?: ImplicitLabelListType;
 	/**
- * The type of icon in legend.
- * If set to 'none', no legend item will be rendered.
- * @defaultValue 'line'
- */
+	 * The type of icon in legend.
+	 * If set to 'none', no legend item will be rendered.
+	 * @defaultValue 'line'
+	 */
 	legendType?: LegendType;
 	/**
- * The name of data.
- * This option will be used in tooltip and legend to represent this graphical item.
- * If no value was set to this option, the value of dataKey will be used alternatively.
- */
+	 * The name of data.
+	 * This option will be used in tooltip and legend to represent this graphical item.
+	 * If no value was set to this option, the value of dataKey will be used alternatively.
+	 */
 	name?: string | number;
 	/**
- * The customized event handler of animation end
- */
+	 * The customized event handler of animation end
+	 */
 	onAnimationEnd?: () => void;
 	/**
- * The customized event handler of animation start
- */
+	 * The customized event handler of animation start
+	 */
 	onAnimationStart?: () => void;
 	/**
- * If set a OctaneElement, the shape of area can be customized.
- * If set a function, the function will be called to render customized shape.
- * By default, renders a filled curve path with a clipPath entrance animation.
- *
- * During animations the shape receives additional props: `animationElapsedTime`, `isAnimating`, and `isEntrance`.
- * When a custom shape is provided, the built-in clipPath entrance animation is skipped.
- *
- * @see AreaRevealShape — the default entrance animation, available for import from recharts
- * @example <Area dataKey="value" shape={CustomizedShapeComponent} />
- * @example <Area dataKey="value" shape={renderShapeFunction} />
- */
+	 * If set a OctaneElement, the shape of area can be customized.
+	 * If set a function, the function will be called to render customized shape.
+	 * By default, renders a filled curve path with a clipPath entrance animation.
+	 *
+	 * During animations the shape receives additional props: `animationElapsedTime`, `isAnimating`, and `isEntrance`.
+	 * When a custom shape is provided, the built-in clipPath entrance animation is skipped.
+	 *
+	 * @see AreaRevealShape — the default entrance animation, available for import from recharts
+	 * @example <Area dataKey="value" shape={CustomizedShapeComponent} />
+	 * @example <Area dataKey="value" shape={renderShapeFunction} />
+	 */
 	shape?: ActiveShape<AreaRevealShapeProps, SVGPathElement>;
 	/**
- * When two Areas have the same axisId and same stackId, then the two Areas are stacked in the chart.
- */
+	 * When two Areas have the same axisId and same stackId, then the two Areas are stacked in the chart.
+	 */
 	stackId?: StackId;
 	/**
- * The stroke color. If "none", no line will be drawn.
- * @defaultValue '#3182bd'
- */
+	 * The stroke color. If "none", no line will be drawn.
+	 * @defaultValue '#3182bd'
+	 */
 	stroke?: string;
 	/**
- * The width of the stroke
- * @defaultValue 1
- */
+	 * The width of the stroke
+	 * @defaultValue 1
+	 */
 	strokeWidth?: string | number;
 	tooltipType?: TooltipType;
 	/**
- * The interpolation type of curve. Allows custom interpolation function.
- *
- * @defaultValue linear
- * @link https://d3js.org/d3-shape/curve
- * @see {@link https://recharts.github.io/en-US/examples/CardinalAreaChart/ An AreaChart which has two area with different interpolation.}
- */
+	 * The interpolation type of curve. Allows custom interpolation function.
+	 *
+	 * @defaultValue linear
+	 * @link https://d3js.org/d3-shape/curve
+	 * @see {@link https://recharts.github.io/en-US/examples/CardinalAreaChart/ An AreaChart which has two area with different interpolation.}
+	 */
 	type?: CurveType;
 	/**
- * The unit of data. This option will be used in tooltip.
- */
+	 * The unit of data. This option will be used in tooltip.
+	 */
 	unit?: string | number;
 	/**
- * Formats the value displayed in the tooltip for this Area.
- * When set, takes precedence over the `formatter` prop on the Tooltip component.
- */
+	 * Formats the value displayed in the tooltip for this Area.
+	 * When set, takes precedence over the `formatter` prop on the Tooltip component.
+	 */
 	formatter?: Formatter;
 	/**
- * The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
- * @defaultValue 0
- */
+	 * The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
+	 * @defaultValue 0
+	 */
 	xAxisId?: AxisId;
 	/**
- * The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
- * @defaultValue 0
- */
+	 * The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
+	 * @defaultValue 0
+	 */
 	yAxisId?: AxisId;
 	/**
- * Z-Index of this component and its children. The higher the value,
- * the more on top it will be rendered.
- * Components with higher zIndex will appear in front of components with lower zIndex.
- * If undefined or 0, the content is rendered in the default layer without portals.
- *
- * @since 3.4
- * @defaultValue 100
- * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
- */
+	 * Z-Index of this component and its children. The higher the value,
+	 * the more on top it will be rendered.
+	 * Components with higher zIndex will appear in front of components with lower zIndex.
+	 * If undefined or 0, the content is rendered in the default layer without portals.
+	 *
+	 * @since 3.4
+	 * @defaultValue 100
+	 * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
+	 */
 	zIndex?: number;
 }
 
@@ -398,10 +401,10 @@ const defaultAreaAnimateItems: AnimationInterpolateFn<AreaPointItem, CartesianLa
 		}
 		if (item.status === 'added') {
 			/*
- * Here we just return the final position without interpolating
- * so that we can allow the default initial animation that is done by clipPath in AreaRevealShape.
- * If you want your own custom animations then you may want to interpolate this one as well.
- */
+			 * Here we just return the final position without interpolating
+			 * so that we can allow the default initial animation that is done by clipPath in AreaRevealShape.
+			 * If you want your own custom animations then you may want to interpolate this one as well.
+			 */
 			return [item.next];
 		}
 		// removed: drop
@@ -436,21 +439,19 @@ export const defaultAreaProps = {
 /**
  * Because of naming conflict, we are forced to ignore certain (valid) SVG attributes.
  */
-type AreaSvgProps =
-	Omit<
-		CurveProps,
-		'points' | 'ref' | 'layout' | 'path' | 'pathRef' | 'baseLine' | 'dangerouslySetInnerHTML'
-	>;
+type AreaSvgProps = Omit<
+	CurveProps,
+	'points' | 'ref' | 'layout' | 'path' | 'pathRef' | 'baseLine' | 'dangerouslySetInnerHTML'
+>;
 
 type InternalProps = AreaSvgProps & InternalAreaProps;
 
-export type Props<DataPointType, ValueAxisType> =
-	AreaSvgProps & AreaProps<DataPointType, ValueAxisType>;
+export type Props<DataPointType, ValueAxisType> = AreaSvgProps &
+	AreaProps<DataPointType, ValueAxisType>;
 
-type PropsWithDefaults<DataPointType, ValueAxisType> =
-	WithIdRequired<
-		RequiresDefaultProps<Props<DataPointType, ValueAxisType>, typeof defaultAreaProps>
-	>;
+type PropsWithDefaults<DataPointType, ValueAxisType> = WithIdRequired<
+	RequiresDefaultProps<Props<DataPointType, ValueAxisType>, typeof defaultAreaProps>
+>;
 
 function getLegendItemColor(
 	stroke: string | undefined,
@@ -538,16 +539,18 @@ function AreaDotsWrapper({
 	const { needClip, dot, dataKey } = props;
 	const areaProps: DotsDotProps = svgPropertiesNoEvents(props);
 
-	return <Dots
-		points={points}
-		dot={dot}
-		className="recharts-area-dots"
-		dotClassName="recharts-area-dot"
-		dataKey={dataKey}
-		baseProps={areaProps}
-		needClip={needClip}
-		clipPathId={clipPathId}
-	/>;
+	return (
+		<Dots
+			points={points}
+			dot={dot}
+			className="recharts-area-dots"
+			dotClassName="recharts-area-dot"
+			dataKey={dataKey}
+			baseProps={areaProps}
+			needClip={needClip}
+			clipPathId={clipPathId}
+		/>
+	);
 }
 
 function AreaLabelListProvider({
@@ -559,30 +562,32 @@ function AreaLabelListProvider({
 	children: OctaneNode;
 	points: ReadonlyArray<AreaPointItem>;
 }) {
-	const labelListEntries: ReadonlyArray<CartesianLabelListEntry> = points.map((
-		point,
-	): CartesianLabelListEntry => {
-		const viewBox: TrapezoidViewBox = {
-			x: point.x ?? 0,
-			y: point.y ?? 0,
-			width: 0,
-			lowerWidth: 0,
-			upperWidth: 0,
-			height: 0,
-		};
-		return {
-			...viewBox,
-			value: point.value,
-			payload: point.payload,
-			parentViewBox: undefined,
-			viewBox,
-			fill: undefined,
-		};
-	});
+	const labelListEntries: ReadonlyArray<CartesianLabelListEntry> = points.map(
+		(point): CartesianLabelListEntry => {
+			const viewBox: TrapezoidViewBox = {
+				x: point.x ?? 0,
+				y: point.y ?? 0,
+				width: 0,
+				lowerWidth: 0,
+				upperWidth: 0,
+				height: 0,
+			};
+			return {
+				...viewBox,
+				value: point.value,
+				payload: point.payload,
+				parentViewBox: undefined,
+				viewBox,
+				fill: undefined,
+			};
+		},
+	);
 
-	return <CartesianLabelListContextProvider
-		value={showLabels ? labelListEntries : undefined}
-	>{children}</CartesianLabelListContextProvider>;
+	return (
+		<CartesianLabelListContextProvider value={showLabels ? labelListEntries : undefined}>
+			{children}
+		</CartesianLabelListContextProvider>
+	);
 }
 
 function StaticArea({
@@ -624,13 +629,16 @@ function StaticArea({
 		isEntrance,
 	};
 
-	return <>
-		{points?.length > 1 &&
-			<Layer clipPath={needClip ? `url(#clipPath-${clipPathId})` : undefined}>
-				<Shape option={shape} DefaultShape={defaultAreaProps.shape} shapeProps={curveProps} />
-			</Layer>}
-		<AreaDotsWrapper points={points} props={propsWithoutId} clipPathId={clipPathId} />
-	</>;
+	return (
+		<>
+			{points?.length > 1 && (
+				<Layer clipPath={needClip ? `url(#clipPath-${clipPathId})` : undefined}>
+					<Shape option={shape} DefaultShape={defaultAreaProps.shape} shapeProps={curveProps} />
+				</Layer>
+			)}
+			<AreaDotsWrapper points={points} props={propsWithoutId} clipPathId={clipPathId} />
+		</>
+	);
 }
 
 function interpolateScalarBaseLine(
@@ -696,49 +704,57 @@ function AreaWithAnimation({
 		baseLineAnimationItems = null;
 	}
 
-	return <AnimatedItems
-		animationInput={animationInput}
-		animationIdPrefix="recharts-area-"
-		items={points}
-		previousItemsRef={previousPointsRef}
-		isAnimationActive={isAnimationActive}
-		animationBegin={animationBegin}
-		animationDuration={animationDuration}
-		animationEasing={animationEasing}
-		onAnimationStart={handleAnimationStart}
-		onAnimationEnd={handleAnimationEnd}
-		animationInterpolateFn={animationInterpolateFn}
-		animationMatchBy={animationMatchBy}
-		layout={layout}
-	>
-		{(stepPoints, animationElapsedTime, isEntrance) => {
-			let stepBaseLine: number | ReadonlyArray<NullableCoordinate> | undefined;
-			if (animationElapsedTime === 1) {
-				stepBaseLine = baseLine;
-			} else if (Array.isArray(baseLine)) {
-				stepBaseLine = animationInterpolateFn(baseLineAnimationItems, animationElapsedTime, layout);
-			} else {
-				stepBaseLine = isEntrance
-					? baseLine
-					: interpolateScalarBaseLine(baseLine, prevBaseLine, animationElapsedTime);
-			}
-			baseLineAnimationState.syncStepValue(stepBaseLine, animationElapsedTime);
-			return <AreaLabelListProvider showLabels={!isAnimating} points={points}>
-				{props.children}
-				<StaticArea
-					points={stepPoints}
-					baseLine={stepBaseLine}
-					needClip={needClip}
-					clipPathId={clipPathId}
-					props={props}
-					animationElapsedTime={animationElapsedTime}
-					isAnimating={isAnimating || animationElapsedTime < 1}
-					isEntrance={isEntrance}
-				/>
-				<LabelListFromLabelProp label={props.label} />
-			</AreaLabelListProvider>;
-		}}
-	</AnimatedItems>;
+	return (
+		<AnimatedItems
+			animationInput={animationInput}
+			animationIdPrefix="recharts-area-"
+			items={points}
+			previousItemsRef={previousPointsRef}
+			isAnimationActive={isAnimationActive}
+			animationBegin={animationBegin}
+			animationDuration={animationDuration}
+			animationEasing={animationEasing}
+			onAnimationStart={handleAnimationStart}
+			onAnimationEnd={handleAnimationEnd}
+			animationInterpolateFn={animationInterpolateFn}
+			animationMatchBy={animationMatchBy}
+			layout={layout}
+		>
+			{(stepPoints, animationElapsedTime, isEntrance) => {
+				let stepBaseLine: number | ReadonlyArray<NullableCoordinate> | undefined;
+				if (animationElapsedTime === 1) {
+					stepBaseLine = baseLine;
+				} else if (Array.isArray(baseLine)) {
+					stepBaseLine = animationInterpolateFn(
+						baseLineAnimationItems,
+						animationElapsedTime,
+						layout,
+					);
+				} else {
+					stepBaseLine = isEntrance
+						? baseLine
+						: interpolateScalarBaseLine(baseLine, prevBaseLine, animationElapsedTime);
+				}
+				baseLineAnimationState.syncStepValue(stepBaseLine, animationElapsedTime);
+				return (
+					<AreaLabelListProvider showLabels={!isAnimating} points={points}>
+						{props.children}
+						<StaticArea
+							points={stepPoints}
+							baseLine={stepBaseLine}
+							needClip={needClip}
+							clipPathId={clipPathId}
+							props={props}
+							animationElapsedTime={animationElapsedTime}
+							isAnimating={isAnimating || animationElapsedTime < 1}
+							isEntrance={isEntrance}
+						/>
+						<LabelListFromLabelProp label={props.label} />
+					</AreaLabelListProvider>
+				);
+			}}
+		</AnimatedItems>
+	);
 }
 
 /*
@@ -755,23 +771,25 @@ function RenderArea({
 	props: InternalProps;
 }) {
 	/*
- * These two must be refs, not state!
- * Because we want to store the most recent shape of the animation in case we have to interrupt the animation;
- * that happens when user initiates another animation before the current one finishes.
- *
- * If this was a useState, then every step in the animation would trigger a re-render.
- * So, useRef it is.
- */
+	 * These two must be refs, not state!
+	 * Because we want to store the most recent shape of the animation in case we have to interrupt the animation;
+	 * that happens when user initiates another animation before the current one finishes.
+	 *
+	 * If this was a useState, then every step in the animation would trigger a re-render.
+	 * So, useRef it is.
+	 */
 	const previousPointsRef = useRef<ReadonlyArray<AreaPointItem> | null>(null);
 	const previousBaselineRef = useRef<BaseLineType | undefined>(undefined);
 
-	return <AreaWithAnimation
-		needClip={needClip}
-		clipPathId={clipPathId}
-		props={props}
-		previousPointsRef={previousPointsRef}
-		previousBaselineRef={previousBaselineRef}
-	/>;
+	return (
+		<AreaWithAnimation
+			needClip={needClip}
+			clipPathId={clipPathId}
+			props={props}
+			previousPointsRef={previousPointsRef}
+			previousBaselineRef={previousBaselineRef}
+		/>
+	);
 }
 
 function AreaWithState(props: InternalProps) {
@@ -805,39 +823,44 @@ function AreaWithState(props: InternalProps) {
 		? `url(#clipPath-${clipDot ? '' : 'dots-'}${clipPathId})`
 		: undefined;
 
-	return <ZIndexLayer zIndex={zIndex}>
-		<Layer className={layerClass}>
-			{needClip &&
-				<defs>
-					<GraphicalItemClipPath clipPathId={clipPathId} xAxisId={xAxisId} yAxisId={yAxisId} />
-					{!clipDot &&
-						<clipPath id={`clipPath-dots-${clipPathId}`}>
-							<rect
-								x={left - dotSize / 2}
-								y={top - dotSize / 2}
-								width={width + dotSize}
-								height={height + dotSize}
-							/>
-						</clipPath>}
-				</defs>}
-			<RenderArea needClip={needClip} clipPathId={clipPathId} props={props} />
-		</Layer>
-		<ActivePoints
-			points={points}
-			mainColor={getLegendItemColor(props.stroke, props.fill)}
-			itemDataKey={props.dataKey}
-			activeDot={props.activeDot}
-			clipPath={activePointsClipPath}
-		/>
-		{props.isRange && Array.isArray(baseLine) &&
+	return (
+		<ZIndexLayer zIndex={zIndex}>
+			<Layer className={layerClass}>
+				{needClip && (
+					<defs>
+						<GraphicalItemClipPath clipPathId={clipPathId} xAxisId={xAxisId} yAxisId={yAxisId} />
+						{!clipDot && (
+							<clipPath id={`clipPath-dots-${clipPathId}`}>
+								<rect
+									x={left - dotSize / 2}
+									y={top - dotSize / 2}
+									width={width + dotSize}
+									height={height + dotSize}
+								/>
+							</clipPath>
+						)}
+					</defs>
+				)}
+				<RenderArea needClip={needClip} clipPathId={clipPathId} props={props} />
+			</Layer>
 			<ActivePoints
-				points={baseLine}
+				points={points}
 				mainColor={getLegendItemColor(props.stroke, props.fill)}
 				itemDataKey={props.dataKey}
 				activeDot={props.activeDot}
 				clipPath={activePointsClipPath}
-			/>}
-	</ZIndexLayer>;
+			/>
+			{props.isRange && Array.isArray(baseLine) && (
+				<ActivePoints
+					points={baseLine}
+					mainColor={getLegendItemColor(props.stroke, props.fill)}
+					itemDataKey={props.dataKey}
+					activeDot={props.activeDot}
+					clipPath={activePointsClipPath}
+				/>
+			)}
+		</ZIndexLayer>
+	);
 }
 
 function AreaImpl<DataPointType, ValueAxisType>(
@@ -869,7 +892,7 @@ function AreaImpl<DataPointType, ValueAxisType>(
 		useAppSelector((state) => selectArea(state, props.id, isPanorama)) ?? {};
 	const plotArea = usePlotArea();
 
-	if (layout !== 'horizontal' && layout !== 'vertical' || plotArea == null) {
+	if ((layout !== 'horizontal' && layout !== 'vertical') || plotArea == null) {
 		// Can't render Area in an unsupported layout
 		return null;
 	}
@@ -885,32 +908,34 @@ function AreaImpl<DataPointType, ValueAxisType>(
 		return null;
 	}
 
-	return <AreaWithState
-		{...everythingElse}
-		activeDot={activeDot}
-		animationBegin={animationBegin}
-		animationDuration={animationDuration}
-		animationEasing={animationEasing}
-		baseLine={baseLine}
-		connectNulls={connectNulls}
-		dot={dot}
-		fill={fill}
-		fillOpacity={fillOpacity}
-		height={height}
-		hide={hide}
-		layout={layout}
-		isAnimationActive={isAnimationActive}
-		isRange={isRange}
-		legendType={legendType}
-		needClip={needClip}
-		points={points}
-		stroke={stroke}
-		width={width}
-		left={left}
-		top={top}
-		xAxisId={xAxisId}
-		yAxisId={yAxisId}
-	/>;
+	return (
+		<AreaWithState
+			{...everythingElse}
+			activeDot={activeDot}
+			animationBegin={animationBegin}
+			animationDuration={animationDuration}
+			animationEasing={animationEasing}
+			baseLine={baseLine}
+			connectNulls={connectNulls}
+			dot={dot}
+			fill={fill}
+			fillOpacity={fillOpacity}
+			height={height}
+			hide={hide}
+			layout={layout}
+			isAnimationActive={isAnimationActive}
+			isRange={isRange}
+			legendType={legendType}
+			needClip={needClip}
+			points={points}
+			stroke={stroke}
+			width={width}
+			left={left}
+			top={top}
+			xAxisId={xAxisId}
+			yAxisId={yAxisId}
+		/>
+	);
 }
 
 export const getBaseValue = (
@@ -928,8 +953,7 @@ export const getBaseValue = (
 		return baseValue;
 	}
 
-	const numericAxis =
-		layout === 'horizontal' ? yAxis : xAxis;
+	const numericAxis = layout === 'horizontal' ? yAxis : xAxis;
 	const domain = numericAxis.scale.domain() as readonly [number, number];
 
 	if (numericAxis.type === 'number') {
@@ -1005,19 +1029,19 @@ export function computeArea({
 		const value1 = valueAsArray?.[1] ?? null;
 
 		const isBreakPoint =
-			value1 == null || hasStack && !connectNulls && getValueByDataKey(entry, dataKey) == null;
+			value1 == null || (hasStack && !connectNulls && getValueByDataKey(entry, dataKey) == null);
 
 		if (isHorizontalLayout) {
 			return {
 				x: getCateCoordinateOfLine({ axis: xAxis, ticks: xAxisTicks, bandSize, entry, index }),
-				y: isBreakPoint ? null : yAxis.scale.map(value1) ?? null,
+				y: isBreakPoint ? null : (yAxis.scale.map(value1) ?? null),
 				value: valueAsArray,
 				payload: entry,
 			};
 		}
 
 		return {
-			x: isBreakPoint ? null : xAxis.scale.map(value1) ?? null,
+			x: isBreakPoint ? null : (xAxis.scale.map(value1) ?? null),
 			y: getCateCoordinateOfLine({ axis: yAxis, ticks: yAxisTicks, bandSize, entry, index }),
 			value: valueAsArray,
 			payload: entry,
@@ -1031,12 +1055,12 @@ export function computeArea({
 			if (isHorizontalLayout) {
 				return {
 					x: entry.x,
-					y: x != null && entry.y != null ? yAxis.scale.map(x) ?? null : null,
+					y: x != null && entry.y != null ? (yAxis.scale.map(x) ?? null) : null,
 					payload: entry.payload,
 				};
 			}
 			return {
-				x: x != null ? xAxis.scale.map(x) ?? null : null,
+				x: x != null ? (xAxis.scale.map(x) ?? null) : null,
 				y: entry.y,
 				payload: entry.payload,
 			};
@@ -1058,40 +1082,44 @@ function AreaFn<DataPointType = any, ValueAxisType = any>(
 	const props = resolveDefaultProps(outsideProps, defaultAreaProps);
 	const isPanorama = useIsPanorama();
 	// Report all props to Redux store first, before calling hooks, to avoid circular dependencies.
-	return <RegisterGraphicalItemId id={props.id} type="area">
-		{(id) => <>
-			<SetLegendPayload legendPayload={computeLegendPayloadFromAreaData(props)} />
-			<SetAreaTooltipEntrySettings
-				dataKey={props.dataKey}
-				data={props.data}
-				stroke={props.stroke}
-				strokeWidth={props.strokeWidth}
-				fill={props.fill}
-				name={props.name}
-				hide={props.hide}
-				unit={props.unit}
-				formatter={props.formatter}
-				tooltipType={props.tooltipType}
-				id={id}
-			/>
-			<SetCartesianGraphicalItem
-				type="area"
-				id={id}
-				data={props.data}
-				dataKey={props.dataKey}
-				xAxisId={props.xAxisId}
-				yAxisId={props.yAxisId}
-				zAxisId={0}
-				stackId={getNormalizedStackId(props.stackId)}
-				hide={props.hide}
-				barSize={undefined}
-				baseValue={props.baseValue}
-				isPanorama={isPanorama}
-				connectNulls={props.connectNulls}
-			/>
-			<AreaImpl {...props} id={id} />
-		</>}
-	</RegisterGraphicalItemId>;
+	return (
+		<RegisterGraphicalItemId id={props.id} type="area">
+			{(id) => (
+				<>
+					<SetLegendPayload legendPayload={computeLegendPayloadFromAreaData(props)} />
+					<SetAreaTooltipEntrySettings
+						dataKey={props.dataKey}
+						data={props.data}
+						stroke={props.stroke}
+						strokeWidth={props.strokeWidth}
+						fill={props.fill}
+						name={props.name}
+						hide={props.hide}
+						unit={props.unit}
+						formatter={props.formatter}
+						tooltipType={props.tooltipType}
+						id={id}
+					/>
+					<SetCartesianGraphicalItem
+						type="area"
+						id={id}
+						data={props.data}
+						dataKey={props.dataKey}
+						xAxisId={props.xAxisId}
+						yAxisId={props.yAxisId}
+						zAxisId={0}
+						stackId={getNormalizedStackId(props.stackId)}
+						hide={props.hide}
+						barSize={undefined}
+						baseValue={props.baseValue}
+						isPanorama={isPanorama}
+						connectNulls={props.connectNulls}
+					/>
+					<AreaImpl {...props} id={id} />
+				</>
+			)}
+		</RegisterGraphicalItemId>
+	);
 }
 
 /**