@octanejs/recharts 0.1.40 → 0.1.42

package/src/state/{externalEventsMiddleware.js → externalEventsMiddleware.ts}

@@ -1,6 +1,14 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/externalEventsMiddleware.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { NativeEvent } from '../util/OctaneTypes';
+import {
+	createAction,
+	createListenerMiddleware,
+	ListenerEffectAPI,
+	PayloadAction,
+} from '@reduxjs/toolkit';
+
+import { CategoricalChartFunc } from '../chart/types';
+import { MouseHandlerDataParam } from '../synchronisation/types';
 import {
 	selectActiveLabel,
 	selectActiveTooltipCoordinate,
@@ -8,9 +16,17 @@ import {
 	selectActiveTooltipIndex,
 	selectIsTooltipActive,
 } from './selectors/tooltipSelectors';
+import { AppDispatch, RechartsRootState } from './store';
 import { createEventProxy } from '../util/createEventProxy';
-export var externalEventAction = createAction('externalEvent');
-export var externalEventsMiddleware = createListenerMiddleware();
+
+type ExternalEventActionPayload<E = NativeEvent> = {
+	reactEvent: E;
+	handler: CategoricalChartFunc<E> | undefined;
+};
+
+export const externalEventAction = createAction<ExternalEventActionPayload<any>>('externalEvent');
+
+export const externalEventsMiddleware = createListenerMiddleware<RechartsRootState>();
 
 /*
  * We need a Map keyed by event type because this middleware handles MULTIPLE different event types
@@ -19,35 +35,38 @@ export var externalEventsMiddleware = createListenerMiddleware();
  * For example, a click event and a mousemove event can happen in quick succession and both should be processed.
  * This is different from mouseMoveMiddleware which only handles one event type and uses a single rafId.
  */
-var rafIdMap = new Map();
-var timeoutIdMap = new Map();
-var latestEventMap = new Map();
+const rafIdMap = new Map<string, number>();
+const timeoutIdMap = new Map<string, ReturnType<typeof setTimeout>>();
+const latestEventMap = new Map<string, ExternalEventActionPayload>();
+
 externalEventsMiddleware.startListening({
 	actionCreator: externalEventAction,
-	effect: (action, listenerApi) => {
-		var _action$payload = action.payload,
-			handler = _action$payload.handler,
-			reactEvent = _action$payload.reactEvent;
+	effect: (
+		action: PayloadAction<ExternalEventActionPayload>,
+		listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>,
+	) => {
+		const { handler, reactEvent } = action.payload;
 		if (handler == null) {
 			return;
 		}
-		var eventType = reactEvent.type;
-		var eventProxy = createEventProxy(reactEvent);
+
+		const eventType = reactEvent.type;
+		const eventProxy = createEventProxy(reactEvent);
+
 		latestEventMap.set(eventType, {
 			handler,
 			reactEvent: eventProxy,
 		});
 
 		// Cancel any pending execution for this event type
-		var existingRafId = rafIdMap.get(eventType);
+		const existingRafId = rafIdMap.get(eventType);
 		if (existingRafId !== undefined) {
 			cancelAnimationFrame(existingRafId);
 			rafIdMap.delete(eventType);
 		}
-		var state = listenerApi.getState();
-		var _state$eventSettings = state.eventSettings,
-			throttleDelay = _state$eventSettings.throttleDelay,
-			throttledEvents = _state$eventSettings.throttledEvents;
+
+		const state = listenerApi.getState();
+		const { throttleDelay, throttledEvents } = state.eventSettings;
 
 		/*
 		 * reactEvent.type gives us the event type as a string, e.g., 'click', 'mousemove', etc.
@@ -58,31 +77,30 @@ externalEventsMiddleware.startListening({
 		 * with a string argument.
 		 * To satisfy TypeScript, we need to explicitly typecast throttledEvents here.
 		 */
-		var eventListAsString = throttledEvents;
+		const eventListAsString: 'all' | ReadonlyArray<string> | undefined = throttledEvents;
 
 		// Check if this event type should be throttled
 		// throttledEvents can be 'all' or an array of event names
-		var isThrottled =
-			eventListAsString === 'all' ||
-			(eventListAsString === null || eventListAsString === void 0
-				? void 0
-				: eventListAsString.includes(eventType));
-		var existingTimeoutId = timeoutIdMap.get(eventType);
+		const isThrottled = eventListAsString === 'all' || eventListAsString?.includes(eventType);
+
+		const existingTimeoutId = timeoutIdMap.get(eventType);
 		if (existingTimeoutId !== undefined && (typeof throttleDelay !== 'number' || !isThrottled)) {
 			clearTimeout(existingTimeoutId);
 			timeoutIdMap.delete(eventType);
 		}
-		var callback = () => {
-			var latestAction = latestEventMap.get(eventType);
+
+		const callback = () => {
+			const latestAction = latestEventMap.get(eventType);
+
 			try {
 				if (!latestAction) {
 					// This happens if the event was consumed by the leading edge and no new event came in
 					return;
 				}
-				var latestHandler = latestAction.handler,
-					latestEvent = latestAction.reactEvent;
-				var currentState = listenerApi.getState();
-				var nextState = {
+
+				const { handler: latestHandler, reactEvent: latestEvent } = latestAction;
+				const currentState: RechartsRootState = listenerApi.getState();
+				const nextState: MouseHandlerDataParam = {
 					activeCoordinate: selectActiveTooltipCoordinate(currentState),
 					activeDataKey: selectActiveTooltipDataKey(currentState),
 					activeIndex: selectActiveTooltipIndex(currentState),
@@ -90,6 +108,7 @@ externalEventsMiddleware.startListening({
 					activeTooltipIndex: selectActiveTooltipIndex(currentState),
 					isTooltipActive: selectIsTooltipActive(currentState),
 				};
+
 				if (latestHandler) {
 					latestHandler(nextState, latestEvent);
 				}
@@ -99,13 +118,15 @@ externalEventsMiddleware.startListening({
 				latestEventMap.delete(eventType);
 			}
 		};
+
 		if (!isThrottled) {
 			// Execute immediately
 			callback();
 			return;
 		}
+
 		if (throttleDelay === 'raf') {
-			var rafId = requestAnimationFrame(callback);
+			const rafId = requestAnimationFrame(callback);
 			rafIdMap.set(eventType, rafId);
 		} else if (typeof throttleDelay === 'number') {
 			if (!timeoutIdMap.has(eventType)) {
@@ -116,7 +137,7 @@ externalEventsMiddleware.startListening({
 				callback();
 
 				// Start cooldown
-				var timeoutId = setTimeout(callback, throttleDelay);
+				const timeoutId = setTimeout(callback, throttleDelay);
 				timeoutIdMap.set(eventType, timeoutId);
 			}
 		} else {

package/src/state/graphicalItemsSlice.ts

@@ -0,0 +1,180 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, current, PayloadAction, prepareAutoBatched } from '@reduxjs/toolkit';
+import { castDraft, type Draft } from 'immer';
+import { ChartData } from './chartDataSlice';
+import { AxisId } from './cartesianAxisSlice';
+import { DataKey } from '../util/types';
+import { LineSettings } from './types/LineSettings';
+import { ScatterSettings } from './types/ScatterSettings';
+import { AreaSettings } from './types/AreaSettings';
+import { BarSettings } from './types/BarSettings';
+import { RadialBarSettings } from './types/RadialBarSettings';
+import { PieSettings } from './types/PieSettings';
+import { RadarSettings } from './types/RadarSettings';
+
+/**
+ * Unique ID of the graphical item.
+ * This is used to identify the graphical item in the state and in the React tree.
+ * This is required for every graphical item - it's either provided by the user or generated automatically.
+ */
+export type GraphicalItemId = string;
+
+export interface GraphicalItemSettings {
+	/**
+	 * Unique ID of the graphical item.
+	 * This is used to identify the graphical item in the state and in the React tree.
+	 * This is required for every graphical item - it's either provided by the user or generated automatically.
+	 */
+	id: GraphicalItemId;
+	/**
+	 * If the given graphical item has its own data array, it will appear here.
+	 * If this is undefined, the data will be taken from the chart root prop.
+	 */
+	data: ChartData | undefined;
+	dataKey: DataKey<any> | undefined;
+	/**
+	 * Why not just stop pushing the graphical items to state when they are hidden?
+	 * Well some components decide to continue showing them anyway.
+	 * Legend for example will keep showing a record for hidden graphical items.
+	 * Stacks for example will ignore them.
+	 */
+	hide: boolean;
+}
+
+export interface BaseCartesianGraphicalItemSettings extends GraphicalItemSettings {
+	/**
+	 * Each of the graphical items explicitly says which axis it uses;
+	 * this property is optional for users but every graphical item must have a default,
+	 * and it is required here.
+	 */
+	xAxisId: AxisId;
+	yAxisId: AxisId;
+	zAxisId: AxisId;
+	/**
+	 * Graphical items that are inside Brush panorama should not interact with the main area graphical items
+	 * and vice versa.
+	 */
+	isPanorama: boolean;
+}
+
+export type CartesianGraphicalItemSettings =
+	AreaSettings | BarSettings | LineSettings | ScatterSettings;
+
+export interface BasePolarGraphicalItemSettings extends GraphicalItemSettings {
+	angleAxisId: AxisId;
+	radiusAxisId: AxisId;
+}
+
+export type PolarGraphicalItemSettings = PieSettings | RadarSettings | RadialBarSettings;
+
+export type GraphicalItemsState = {
+	/**
+	 * This is an array of all cartesian graphical items and their settings.
+	 * Graphical item is a visual representation of data on the chart.
+	 * Some examples are: Line, Bar.
+	 *
+	 * The order is arbitrary; do not expect that indexes here will be the same as indexes elsewhere.
+	 */
+	cartesianItems: ReadonlyArray<CartesianGraphicalItemSettings>;
+	/**
+	 * This is an array of all polar graphical items and their settings.
+	 * Graphical item is a visual representation of data on the chart.
+	 * Some examples are: Pie, Radar, RadialBar
+	 *
+	 * The order is arbitrary; do not expect that indexes here will be the same as indexes elsewhere.
+	 */
+	polarItems: ReadonlyArray<PolarGraphicalItemSettings>;
+};
+
+const initialState: GraphicalItemsState = {
+	cartesianItems: [],
+	polarItems: [],
+};
+
+type ReplacePayload<T> = {
+	prev: T;
+	next: T;
+};
+
+// Registered props may contain native DOM refs. The private callback boundary
+// avoids RTK's prepared-action validator recursively comparing raw DOM-backed
+// settings with Draft<Settings>. Every access still uses the exact known draft;
+// the exported reducer state and action payloads remain fully typed.
+const graphicalItemsSlice = createSlice({
+	name: 'graphicalItems',
+	initialState,
+	reducers: {
+		addCartesianGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<CartesianGraphicalItemSettings>) {
+				(state as Draft<GraphicalItemsState>).cartesianItems.push(castDraft(action.payload));
+			},
+			prepare: prepareAutoBatched<CartesianGraphicalItemSettings>(),
+		},
+		replaceCartesianGraphicalItem: {
+			reducer(
+				state: unknown,
+				action: PayloadAction<ReplacePayload<CartesianGraphicalItemSettings>>,
+			) {
+				const { prev, next } = action.payload;
+				const index = current(state as Draft<GraphicalItemsState>).cartesianItems.indexOf(
+					castDraft(prev),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).cartesianItems[index] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<ReplacePayload<CartesianGraphicalItemSettings>>(),
+		},
+		removeCartesianGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<CartesianGraphicalItemSettings>) {
+				const index = current(state as Draft<GraphicalItemsState>).cartesianItems.indexOf(
+					castDraft(action.payload),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).cartesianItems.splice(index, 1);
+				}
+			},
+			prepare: prepareAutoBatched<CartesianGraphicalItemSettings>(),
+		},
+		addPolarGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<PolarGraphicalItemSettings>) {
+				(state as Draft<GraphicalItemsState>).polarItems.push(castDraft(action.payload));
+			},
+			prepare: prepareAutoBatched<PolarGraphicalItemSettings>(),
+		},
+		removePolarGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<PolarGraphicalItemSettings>) {
+				const index = current(state as Draft<GraphicalItemsState>).polarItems.indexOf(
+					castDraft(action.payload),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).polarItems.splice(index, 1);
+				}
+			},
+			prepare: prepareAutoBatched<PolarGraphicalItemSettings>(),
+		},
+		replacePolarGraphicalItem: {
+			reducer(state: unknown, action: PayloadAction<ReplacePayload<PolarGraphicalItemSettings>>) {
+				const { prev, next } = action.payload;
+				const index = current(state as Draft<GraphicalItemsState>).polarItems.indexOf(
+					castDraft(prev),
+				);
+				if (index > -1) {
+					(state as Draft<GraphicalItemsState>).polarItems[index] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched<ReplacePayload<PolarGraphicalItemSettings>>(),
+		},
+	},
+});
+
+export const {
+	addCartesianGraphicalItem,
+	replaceCartesianGraphicalItem,
+	removeCartesianGraphicalItem,
+	addPolarGraphicalItem,
+	removePolarGraphicalItem,
+	replacePolarGraphicalItem,
+} = graphicalItemsSlice.actions;
+
+export const graphicalItemsReducer = graphicalItemsSlice.reducer;

package/src/state/{keyboardEventsMiddleware.js → keyboardEventsMiddleware.ts}

@@ -1,7 +1,7 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/keyboardEventsMiddleware.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
-import { setKeyboardInteraction } from './tooltipSlice';
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createAction, createListenerMiddleware, ListenerEffectAPI } from '@reduxjs/toolkit';
+import { setKeyboardInteraction, TooltipInteractionState } from './tooltipSlice';
+import { AppDispatch, RechartsRootState } from './store';
 import {
 	selectTooltipAxisDomain,
 	selectTooltipAxisTicks,
@@ -11,55 +11,64 @@ import { selectCoordinateForDefaultIndex } from './selectors/selectors';
 import { selectChartDirection, selectTooltipAxisDataKey } from './selectors/axisSelectors';
 import { combineActiveTooltipIndex } from './selectors/combiners/combineActiveTooltipIndex';
 import { selectTooltipEventType } from './selectors/selectTooltipEventType';
-export var keyDownAction = createAction('keyDown');
-export var focusAction = createAction('focus');
-export var blurAction = createAction('blur');
-export var keyboardEventsMiddleware = createListenerMiddleware();
-var rafId = null;
-var timeoutId = null;
-var latestKeyboardActionPayload = null;
+
+export const keyDownAction = createAction<KeyboardEvent['key']>('keyDown');
+export const focusAction = createAction('focus');
+export const blurAction = createAction('blur');
+
+export const keyboardEventsMiddleware = createListenerMiddleware<RechartsRootState>();
+
+let rafId: number | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+let latestKeyboardActionPayload: KeyboardEvent['key'] | null = null;
+
 keyboardEventsMiddleware.startListening({
 	actionCreator: keyDownAction,
-	effect: (action, listenerApi) => {
+	effect: (
+		action: ReturnType<typeof keyDownAction>,
+		listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>,
+	) => {
 		latestKeyboardActionPayload = action.payload;
+
 		if (rafId !== null) {
 			cancelAnimationFrame(rafId);
 			rafId = null;
 		}
-		var state = listenerApi.getState();
-		var _state$eventSettings = state.eventSettings,
-			throttleDelay = _state$eventSettings.throttleDelay,
-			throttledEvents = _state$eventSettings.throttledEvents;
-		var isThrottled = throttledEvents === 'all' || throttledEvents.includes('keydown');
+
+		const state: RechartsRootState = listenerApi.getState();
+		const { throttleDelay, throttledEvents } = state.eventSettings;
+		const isThrottled = throttledEvents === 'all' || throttledEvents.includes('keydown');
+
 		if (timeoutId !== null && (typeof throttleDelay !== 'number' || !isThrottled)) {
 			clearTimeout(timeoutId);
 			timeoutId = null;
 		}
-		var callback = () => {
+
+		const callback = () => {
 			try {
-				var currentState = listenerApi.getState();
-				var accessibilityLayerIsActive = currentState.rootProps.accessibilityLayer !== false;
+				const currentState = listenerApi.getState();
+				const accessibilityLayerIsActive = currentState.rootProps.accessibilityLayer !== false;
 				if (!accessibilityLayerIsActive) {
 					return;
 				}
-				var keyboardInteraction = currentState.tooltip.keyboardInteraction;
-				var key = latestKeyboardActionPayload;
+				const { keyboardInteraction } = currentState.tooltip;
+				const key = latestKeyboardActionPayload;
 				if (key !== 'ArrowRight' && key !== 'ArrowLeft' && key !== 'Enter') {
 					return;
 				}
 
 				// TODO this is lacking index for charts that do not support numeric indexes
-				var resolvedIndex = combineActiveTooltipIndex(
+				const resolvedIndex = combineActiveTooltipIndex(
 					keyboardInteraction,
 					selectTooltipDisplayedData(currentState),
 					selectTooltipAxisDataKey(currentState),
 					selectTooltipAxisDomain(currentState),
 				);
-				var currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex);
-				var isOutsideDomain = !Number.isFinite(currentIndex) || currentIndex < 0;
-				var tooltipTicks = selectTooltipAxisTicks(currentState);
-				var displayedData = selectTooltipDisplayedData(currentState);
-				var tooltipEventType = selectTooltipEventType(
+				const currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex);
+				const isOutsideDomain = !Number.isFinite(currentIndex) || currentIndex < 0;
+				const tooltipTicks = selectTooltipAxisTicks(currentState);
+				const displayedData = selectTooltipDisplayedData(currentState);
+				const tooltipEventType = selectTooltipEventType(
 					currentState,
 					currentState.tooltip.settings.shared,
 				);
@@ -67,7 +76,7 @@ keyboardEventsMiddleware.startListening({
 					if (isOutsideDomain) {
 						return;
 					}
-					var _coordinate = selectCoordinateForDefaultIndex(
+					const coordinate = selectCoordinateForDefaultIndex(
 						currentState,
 						tooltipEventType,
 						'hover',
@@ -77,31 +86,33 @@ keyboardEventsMiddleware.startListening({
 						setKeyboardInteraction({
 							active: !keyboardInteraction.active,
 							activeIndex: keyboardInteraction.index,
-							activeCoordinate: _coordinate,
+							activeCoordinate: coordinate,
 						}),
 					);
 					return;
 				}
-				var direction = selectChartDirection(currentState);
-				var directionMultiplier = direction === 'left-to-right' ? 1 : -1;
-				var movement = key === 'ArrowRight' ? 1 : -1;
-				var nextIndex;
+
+				const direction = selectChartDirection(currentState);
+				const directionMultiplier = direction === 'left-to-right' ? 1 : -1;
+				const movement = key === 'ArrowRight' ? 1 : -1;
+				let nextIndex: number;
 				if (isOutsideDomain) {
-					var axisDataKey = selectTooltipAxisDataKey(currentState);
-					var domain = selectTooltipAxisDomain(currentState);
-					var effectiveMovement = movement * directionMultiplier;
+					const axisDataKey = selectTooltipAxisDataKey(currentState);
+					const domain = selectTooltipAxisDomain(currentState);
+					const effectiveMovement = movement * directionMultiplier;
 
 					// Build a minimal TooltipInteractionState for the candidate-index check.
-					var mkInteraction = (i) => ({
+					const mkInteraction = (i: number): TooltipInteractionState => ({
 						active: false,
 						index: String(i),
 						dataKey: undefined,
 						graphicalItemId: undefined,
 						coordinate: undefined,
 					});
+
 					nextIndex = -1;
 					if (effectiveMovement > 0) {
-						for (var i = 0; i < displayedData.length; i++) {
+						for (let i = 0; i < displayedData.length; i++) {
 							if (
 								combineActiveTooltipIndex(mkInteraction(i), displayedData, axisDataKey, domain) !=
 								null
@@ -111,29 +122,28 @@ keyboardEventsMiddleware.startListening({
 							}
 						}
 					} else {
-						for (var _i = displayedData.length - 1; _i >= 0; _i--) {
+						for (let i = displayedData.length - 1; i >= 0; i--) {
 							if (
-								combineActiveTooltipIndex(mkInteraction(_i), displayedData, axisDataKey, domain) !=
+								combineActiveTooltipIndex(mkInteraction(i), displayedData, axisDataKey, domain) !=
 								null
 							) {
-								nextIndex = _i;
+								nextIndex = i;
 								break;
 							}
 						}
 					}
+
 					if (nextIndex < 0) {
 						return;
 					}
 				} else {
 					nextIndex = currentIndex + movement * directionMultiplier;
-					var dataLength =
-						(tooltipTicks === null || tooltipTicks === void 0 ? void 0 : tooltipTicks.length) ||
-						displayedData.length;
+					const dataLength = tooltipTicks?.length || displayedData.length;
 					if (dataLength === 0 || nextIndex >= dataLength || nextIndex < 0) {
 						return;
 					}
 				}
-				var coordinate = selectCoordinateForDefaultIndex(
+				const coordinate = selectCoordinateForDefaultIndex(
 					currentState,
 					tooltipEventType,
 					'hover',
@@ -151,16 +161,19 @@ keyboardEventsMiddleware.startListening({
 				timeoutId = null;
 			}
 		};
+
 		if (!isThrottled) {
 			callback();
 			return;
 		}
+
 		if (throttleDelay === 'raf') {
 			rafId = requestAnimationFrame(callback);
 		} else if (typeof throttleDelay === 'number') {
 			if (timeoutId === null) {
 				callback();
 				latestKeyboardActionPayload = null;
+
 				timeoutId = setTimeout(() => {
 					if (latestKeyboardActionPayload) {
 						callback();
@@ -173,22 +186,23 @@ keyboardEventsMiddleware.startListening({
 		}
 	},
 });
+
 keyboardEventsMiddleware.startListening({
 	actionCreator: focusAction,
-	effect: (_action, listenerApi) => {
-		var state = listenerApi.getState();
-		var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
+	effect: (_action, listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>) => {
+		const state: RechartsRootState = listenerApi.getState();
+		const accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
 		if (!accessibilityLayerIsActive) {
 			return;
 		}
-		var keyboardInteraction = state.tooltip.keyboardInteraction;
+		const { keyboardInteraction } = state.tooltip;
 		if (keyboardInteraction.active) {
 			return;
 		}
 		if (keyboardInteraction.index == null) {
-			var nextIndex = '0';
-			var tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
-			var coordinate = selectCoordinateForDefaultIndex(
+			const nextIndex = '0';
+			const tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
+			const coordinate = selectCoordinateForDefaultIndex(
 				state,
 				tooltipEventType,
 				'hover',
@@ -204,15 +218,16 @@ keyboardEventsMiddleware.startListening({
 		}
 	},
 });
+
 keyboardEventsMiddleware.startListening({
 	actionCreator: blurAction,
-	effect: (_action, listenerApi) => {
-		var state = listenerApi.getState();
-		var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
+	effect: (_action, listenerApi: ListenerEffectAPI<RechartsRootState, AppDispatch>) => {
+		const state: RechartsRootState = listenerApi.getState();
+		const accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
 		if (!accessibilityLayerIsActive) {
 			return;
 		}
-		var keyboardInteraction = state.tooltip.keyboardInteraction;
+		const { keyboardInteraction } = state.tooltip;
 		if (keyboardInteraction.active) {
 			listenerApi.dispatch(
 				setKeyboardInteraction({

package/src/state/layoutSlice.ts

@@ -0,0 +1,50 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { LayoutType, Margin, Size } from '../util/types';
+
+type ChartLayoutState = {
+	layoutType: LayoutType;
+	width: number;
+	height: number;
+	margin: Margin;
+	/**
+	 * How much is the chart zoomed in.
+	 * Used for scaling the mouse coordinates to the chart coordinates.
+	 */
+	scale: number;
+};
+
+const initialState: ChartLayoutState = {
+	layoutType: 'horizontal',
+	width: 0,
+	height: 0,
+	margin: { top: 5, right: 5, bottom: 5, left: 5 },
+	scale: 1,
+};
+
+const chartLayoutSlice = createSlice({
+	name: 'chartLayout',
+	initialState,
+	reducers: {
+		setLayout(state, action: PayloadAction<LayoutType>) {
+			state.layoutType = action.payload;
+		},
+		setChartSize(state, action: PayloadAction<Size>) {
+			state.width = action.payload.width;
+			state.height = action.payload.height;
+		},
+		setMargin(state, action: PayloadAction<Partial<Margin>>) {
+			state.margin.top = action.payload.top ?? 0;
+			state.margin.right = action.payload.right ?? 0;
+			state.margin.bottom = action.payload.bottom ?? 0;
+			state.margin.left = action.payload.left ?? 0;
+		},
+		setScale(state, action: PayloadAction<number>) {
+			state.scale = action.payload;
+		},
+	},
+});
+
+export const { setMargin, setLayout, setChartSize, setScale } = chartLayoutSlice.actions;
+
+export const chartLayoutReducer = chartLayoutSlice.reducer;