vccs 0.1.0 → 0.3.0

package/dist/es/state/SetGraphicalItem.mjs

@@ -1,34 +1,49 @@
-import { getNormalizedStackId as e } from "../utils/chart.mjs";
-import { useAppDispatch as t } from "./hooks.mjs";
-import { addCartesianGraphicalItem as n, addPolarGraphicalItem as r, removeCartesianGraphicalItem as i, removePolarGraphicalItem as a, replaceCartesianGraphicalItem as o, replacePolarGraphicalItem as s } from "./graphicalItemsSlice.mjs";
-import { onUnmounted as c, unref as l, watchEffect as u } from "vue";
+import { getNormalizedStackId } from "../utils/chart.mjs";
+import { useAppDispatch } from "./hooks.mjs";
+import { addCartesianGraphicalItem, addPolarGraphicalItem, removeCartesianGraphicalItem, removePolarGraphicalItem, replaceCartesianGraphicalItem, replacePolarGraphicalItem } from "./graphicalItemsSlice.mjs";
+import { onUnmounted, unref, watchEffect } from "vue";
 //#region src/state/SetGraphicalItem.ts
-function d(r) {
-	let a = t(), s = null;
-	u(() => {
-		let t = l(r), i = {
-			...t,
-			stackId: e(t.stackId)
+function SetCartesianGraphicalItem(_props) {
+	const dispatch = useAppDispatch();
+	let preSetting = null;
+	watchEffect(() => {
+		const props = unref(_props);
+		const settings = {
+			...props,
+			stackId: getNormalizedStackId(props.stackId)
 		};
-		s === null ? a(n(i)) : s !== i && a(o({
-			prev: s,
-			next: i
-		})), s = i;
-	}), c(() => {
-		s &&= (a(i(s)), null);
+		if (preSetting === null) dispatch(addCartesianGraphicalItem(settings));
+		else if (preSetting !== settings) dispatch(replaceCartesianGraphicalItem({
+			prev: preSetting,
+			next: settings
+		}));
+		preSetting = settings;
+	});
+	onUnmounted(() => {
+		if (preSetting) {
+			dispatch(removeCartesianGraphicalItem(preSetting));
+			preSetting = null;
+		}
 	});
 }
-function f(e) {
-	let n = t(), i = null;
-	u(() => {
-		let t = l(e);
-		i === null ? n(r(t)) : i !== t && n(s({
-			prev: i,
-			next: t
-		})), i = t;
-	}), c(() => {
-		i &&= (n(a(i)), null);
+function SetPolarGraphicalItem(_props) {
+	const dispatch = useAppDispatch();
+	let preSetting = null;
+	watchEffect(() => {
+		const settings = unref(_props);
+		if (preSetting === null) dispatch(addPolarGraphicalItem(settings));
+		else if (preSetting !== settings) dispatch(replacePolarGraphicalItem({
+			prev: preSetting,
+			next: settings
+		}));
+		preSetting = settings;
+	});
+	onUnmounted(() => {
+		if (preSetting) {
+			dispatch(removePolarGraphicalItem(preSetting));
+			preSetting = null;
+		}
 	});
 }
 //#endregion
-export { d as SetCartesianGraphicalItem, f as SetPolarGraphicalItem };
+export { SetCartesianGraphicalItem, SetPolarGraphicalItem };

package/dist/es/state/SetLegendPayload.mjs

@@ -1,16 +1,20 @@
-import { useIsPanorama as e } from "../context/PanoramaContextProvider.mjs";
-import { useAppDispatch as t } from "./hooks.mjs";
-import { addLegendPayload as n, removeLegendPayload as r } from "./legendSlice.mjs";
-import { unref as i, watchEffect as a } from "vue";
+import { useIsPanorama } from "../context/PanoramaContextProvider.mjs";
+import { useAppDispatch } from "./hooks.mjs";
+import { addLegendPayload, removeLegendPayload } from "./legendSlice.mjs";
+import { unref, watchEffect } from "vue";
 //#region src/state/SetLegendPayload.ts
-function o(o) {
-	let s = t(), c = e();
-	return a((e) => {
-		let t = i(o);
-		c || (s(n(t)), e(() => {
-			s(r(t));
-		}));
-	}), null;
+function SetLegendPayload(_legendPayload) {
+	const dispatch = useAppDispatch();
+	const isPanorama = useIsPanorama();
+	watchEffect((onCleanup) => {
+		const legendPayload = unref(_legendPayload);
+		if (isPanorama) return;
+		dispatch(addLegendPayload(legendPayload));
+		onCleanup(() => {
+			dispatch(removeLegendPayload(legendPayload));
+		});
+	});
+	return null;
 }
 //#endregion
-export { o as SetLegendPayload };
+export { SetLegendPayload };

package/dist/es/state/SetTooltipEntrySettings.mjs

@@ -1,17 +1,19 @@
-import { useIsPanorama as e } from "../context/PanoramaContextProvider.mjs";
-import { addTooltipEntrySettings as t, removeTooltipEntrySettings as n } from "./tooltipSlice.mjs";
-import { useAppDispatch as r } from "./hooks.mjs";
-import { watchEffect as i } from "vue";
+import { useIsPanorama } from "../context/PanoramaContextProvider.mjs";
+import { addTooltipEntrySettings, removeTooltipEntrySettings } from "./tooltipSlice.mjs";
+import { useAppDispatch } from "./hooks.mjs";
+import { watchEffect } from "vue";
 //#region src/state/SetTooltipEntrySettings.tsx
-function a({ fn: a, args: o }) {
-	let s = r(), c = e();
-	i((e) => {
-		if (c) return;
-		let r = a(o.value);
-		s(t(r)), e(() => {
-			s(n(r));
+function SetTooltipEntrySettings({ fn, args }) {
+	const dispatch = useAppDispatch();
+	const isPanorama = useIsPanorama();
+	watchEffect((onCleanup) => {
+		if (isPanorama) return;
+		const tooltipEntrySettings = fn(args.value);
+		dispatch(addTooltipEntrySettings(tooltipEntrySettings));
+		onCleanup(() => {
+			dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
 		});
 	});
 }
 //#endregion
-export { a as SetTooltipEntrySettings };
+export { SetTooltipEntrySettings };

package/dist/es/state/brushSlice.mjs

@@ -1,6 +1,6 @@
-import { createSlice as e } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 //#region src/state/brushSlice.ts
-var t = {
+var initialState = {
 	x: 0,
 	y: 0,
 	width: 0,
@@ -11,12 +11,16 @@ var t = {
 		bottom: 0,
 		left: 0
 	}
-}, n = e({
+};
+var brushSlice = createSlice({
 	name: "brush",
-	initialState: t,
-	reducers: { setBrushSettings(e, n) {
-		return n.payload == null ? t : n.payload;
+	initialState,
+	reducers: { setBrushSettings(_state, action) {
+		if (action.payload == null) return initialState;
+		return action.payload;
 	} }
-}), { setBrushSettings: r } = n.actions, i = n.reducer;
+});
+var { setBrushSettings } = brushSlice.actions;
+var brushReducer = brushSlice.reducer;
 //#endregion
-export { i as brushReducer };
+export { brushReducer };

package/dist/es/state/cartesianAxisSlice.mjs

@@ -1,7 +1,11 @@
-import { createSlice as e } from "@reduxjs/toolkit";
-import { castDraft as t } from "immer";
+import { createSlice } from "@reduxjs/toolkit";
+import { castDraft } from "immer";
 //#region src/state/cartesianAxisSlice.ts
-var n = e({
+/**
+* This is the slice where each individual Axis element pushes its own configuration.
+* Prefer to use this one instead of axisSlice.
+*/
+var cartesianAxisSlice = createSlice({
 	name: "cartesianAxis",
 	initialState: {
 		xAxis: {},
@@ -9,25 +13,27 @@ var n = e({
 		zAxis: {}
 	},
 	reducers: {
-		addXAxis(e, n) {
-			e.xAxis[n.payload.id] = t(n.payload);
+		addXAxis(state, action) {
+			state.xAxis[action.payload.id] = castDraft(action.payload);
 		},
-		removeXAxis(e, t) {
-			delete e.xAxis[t.payload.id];
+		removeXAxis(state, action) {
+			delete state.xAxis[action.payload.id];
 		},
-		addYAxis(e, n) {
-			e.yAxis[n.payload.id] = t(n.payload);
+		addYAxis(state, action) {
+			state.yAxis[action.payload.id] = castDraft(action.payload);
 		},
-		removeYAxis(e, t) {
-			delete e.yAxis[t.payload.id];
+		removeYAxis(state, action) {
+			delete state.yAxis[action.payload.id];
 		},
-		addZAxis(e, n) {
-			e.zAxis[n.payload.id] = t(n.payload);
+		addZAxis(state, action) {
+			state.zAxis[action.payload.id] = castDraft(action.payload);
 		},
-		removeZAxis(e, t) {
-			delete e.zAxis[t.payload.id];
+		removeZAxis(state, action) {
+			delete state.zAxis[action.payload.id];
 		}
 	}
-}), { addXAxis: r, removeXAxis: i, addYAxis: a, removeYAxis: o, addZAxis: s, removeZAxis: c } = n.actions, l = n.reducer;
+});
+var { addXAxis, removeXAxis, addYAxis, removeYAxis, addZAxis, removeZAxis } = cartesianAxisSlice.actions;
+var cartesianAxisReducer = cartesianAxisSlice.reducer;
 //#endregion
-export { r as addXAxis, a as addYAxis, s as addZAxis, l as cartesianAxisReducer, i as removeXAxis, o as removeYAxis, c as removeZAxis };
+export { addXAxis, addYAxis, addZAxis, cartesianAxisReducer, removeXAxis, removeYAxis, removeZAxis };

package/dist/es/state/chartDataSlice.mjs

@@ -1,5 +1,5 @@
-import { createSlice as e } from "@reduxjs/toolkit";
-var t = e({
+import { createSlice } from "@reduxjs/toolkit";
+var chartDataSlice = createSlice({
 	name: "chartData",
 	initialState: {
 		chartData: void 0,
@@ -8,21 +8,26 @@ var t = e({
 		dataEndIndex: 0
 	},
 	reducers: {
-		setChartData(e, t) {
-			if (e.chartData = t.payload, t.payload == null) {
-				e.dataStartIndex = 0, e.dataEndIndex = 0;
+		setChartData(state, action) {
+			state.chartData = action.payload;
+			if (action.payload == null) {
+				state.dataStartIndex = 0;
+				state.dataEndIndex = 0;
 				return;
 			}
-			t.payload.length > 0 && e.dataEndIndex !== t.payload.length - 1 && (e.dataEndIndex = t.payload.length - 1);
+			if (action.payload.length > 0 && state.dataEndIndex !== action.payload.length - 1) state.dataEndIndex = action.payload.length - 1;
 		},
-		setComputedData(e, t) {
-			e.computedData = t.payload;
+		setComputedData(state, action) {
+			state.computedData = action.payload;
 		},
-		setDataStartEndIndexes(e, t) {
-			let { startIndex: n, endIndex: r } = t.payload;
-			n != null && (e.dataStartIndex = n), r != null && (e.dataEndIndex = r);
+		setDataStartEndIndexes(state, action) {
+			const { startIndex, endIndex } = action.payload;
+			if (startIndex != null) state.dataStartIndex = startIndex;
+			if (endIndex != null) state.dataEndIndex = endIndex;
 		}
 	}
-}), { setChartData: n, setDataStartEndIndexes: r, setComputedData: i } = t.actions, a = t.reducer;
+});
+var { setChartData, setDataStartEndIndexes, setComputedData } = chartDataSlice.actions;
+var chartDataReducer = chartDataSlice.reducer;
 //#endregion
-export { a as chartDataReducer, n as setChartData, r as setDataStartEndIndexes };
+export { chartDataReducer, setChartData, setDataStartEndIndexes };

package/dist/es/state/externalEventsMiddleware.mjs

@@ -1,20 +1,30 @@
-import { selectActiveLabel as e, selectActiveTooltipCoordinate as t, selectActiveTooltipDataKey as n, selectActiveTooltipIndex as r, selectIsTooltipActive as i } from "./selectors/tooltipSelectors.mjs";
-import { createAction as a } from "@reduxjs/toolkit";
+import { selectActiveLabel, selectActiveTooltipCoordinate, selectActiveTooltipDataKey, selectActiveTooltipIndex, selectIsTooltipActive } from "./selectors/tooltipSelectors.mjs";
+import { createAction } from "@reduxjs/toolkit";
 //#region src/state/externalEventsMiddleware.ts
-var o = a("externalEvent"), s = (a) => (s) => (c) => {
-	let l = s(c);
-	if (o.match(c) && c.payload.handler != null) {
-		let o = a.getState(), s = {
-			activeCoordinate: t(o),
-			activeDataKey: n(o),
-			activeIndex: r(o),
-			activeLabel: e(o),
-			activeTooltipIndex: r(o),
-			isTooltipActive: i(o)
+var externalEventAction = createAction("externalEvent");
+/**
+* Calls external event handlers (onMouseMove, onClick, etc.) synchronously within the dispatch
+* call stack, while the native event's `currentTarget` is still valid.
+*
+* Using createListenerMiddleware would defer the call to a microtask, at which point the browser
+* has already cleared `e.currentTarget` per the DOM spec, breaking coordinate-based handlers like
+* DraggablePie that rely on `getRelativeCoordinate(e)`.
+*/
+var externalEventsMiddleware = (api) => (next) => (action) => {
+	const result = next(action);
+	if (externalEventAction.match(action) && action.payload.handler != null) {
+		const state = api.getState();
+		const nextState = {
+			activeCoordinate: selectActiveTooltipCoordinate(state),
+			activeDataKey: selectActiveTooltipDataKey(state),
+			activeIndex: selectActiveTooltipIndex(state),
+			activeLabel: selectActiveLabel(state),
+			activeTooltipIndex: selectActiveTooltipIndex(state),
+			isTooltipActive: selectIsTooltipActive(state)
 		};
-		c.payload.handler(s, c.payload.event);
+		action.payload.handler(nextState, action.payload.event);
 	}
-	return l;
+	return result;
 };
 //#endregion
-export { o as externalEventAction, s as externalEventsMiddleware };
+export { externalEventAction, externalEventsMiddleware };

package/dist/es/state/graphicalItemsSlice.mjs

@@ -1,7 +1,7 @@
-import { createSlice as e, current as t } from "@reduxjs/toolkit";
-import { castDraft as n } from "immer";
+import { createSlice, current } from "@reduxjs/toolkit";
+import { castDraft } from "immer";
 //#region src/state/graphicalItemsSlice.ts
-var r = e({
+var graphicalItemsSlice = createSlice({
 	name: "graphicalItems",
 	initialState: {
 		countOfBars: 0,
@@ -9,35 +9,39 @@ var r = e({
 		polarItems: []
 	},
 	reducers: {
-		addBar(e) {
-			e.countOfBars += 1;
+		addBar(state) {
+			state.countOfBars += 1;
 		},
-		removeBar(e) {
-			--e.countOfBars;
+		removeBar(state) {
+			state.countOfBars -= 1;
 		},
-		addCartesianGraphicalItem(e, t) {
-			e.cartesianItems.push(n(t.payload));
+		addCartesianGraphicalItem(state, action) {
+			state.cartesianItems.push(castDraft(action.payload));
 		},
-		replaceCartesianGraphicalItem(e, r) {
-			let { prev: i, next: a } = r.payload, o = t(e).cartesianItems.indexOf(n(i));
-			o > -1 && (e.cartesianItems[o] = n(a));
+		replaceCartesianGraphicalItem(state, action) {
+			const { prev, next } = action.payload;
+			const index = current(state).cartesianItems.indexOf(castDraft(prev));
+			if (index > -1) state.cartesianItems[index] = castDraft(next);
 		},
-		removeCartesianGraphicalItem(e, r) {
-			let i = t(e).cartesianItems.indexOf(n(r.payload));
-			i > -1 && e.cartesianItems.splice(i, 1);
+		removeCartesianGraphicalItem(state, action) {
+			const index = current(state).cartesianItems.indexOf(castDraft(action.payload));
+			if (index > -1) state.cartesianItems.splice(index, 1);
 		},
-		addPolarGraphicalItem(e, t) {
-			e.polarItems.push(n(t.payload));
+		addPolarGraphicalItem(state, action) {
+			state.polarItems.push(castDraft(action.payload));
 		},
-		removePolarGraphicalItem(e, r) {
-			let i = t(e).polarItems.indexOf(n(r.payload));
-			i > -1 && e.polarItems.splice(i, 1);
+		removePolarGraphicalItem(state, action) {
+			const index = current(state).polarItems.indexOf(castDraft(action.payload));
+			if (index > -1) state.polarItems.splice(index, 1);
 		},
-		replacePolarGraphicalItem(e, r) {
-			let { prev: i, next: a } = r.payload, o = t(e).polarItems.indexOf(n(i));
-			o > -1 && (e.polarItems[o] = n(a));
+		replacePolarGraphicalItem(state, action) {
+			const { prev, next } = action.payload;
+			const index = current(state).polarItems.indexOf(castDraft(prev));
+			if (index > -1) state.polarItems[index] = castDraft(next);
 		}
 	}
-}), { addBar: i, removeBar: a, addCartesianGraphicalItem: o, removeCartesianGraphicalItem: s, addPolarGraphicalItem: c, replaceCartesianGraphicalItem: l, removePolarGraphicalItem: u, replacePolarGraphicalItem: d } = r.actions, f = r.reducer;
+});
+var { addBar, removeBar, addCartesianGraphicalItem, removeCartesianGraphicalItem, addPolarGraphicalItem, replaceCartesianGraphicalItem, removePolarGraphicalItem, replacePolarGraphicalItem } = graphicalItemsSlice.actions;
+var graphicalItemsReducer = graphicalItemsSlice.reducer;
 //#endregion
-export { o as addCartesianGraphicalItem, c as addPolarGraphicalItem, f as graphicalItemsReducer, s as removeCartesianGraphicalItem, u as removePolarGraphicalItem, l as replaceCartesianGraphicalItem, d as replacePolarGraphicalItem };
+export { addCartesianGraphicalItem, addPolarGraphicalItem, graphicalItemsReducer, removeCartesianGraphicalItem, removePolarGraphicalItem, replaceCartesianGraphicalItem, replacePolarGraphicalItem };

package/dist/es/state/hooks.mjs

@@ -1,5 +1,26 @@
-import { useDispatch as e, useSelector as t } from "@reduxjs/vue-redux";
+import { selectActiveTooltipDataPoints } from "./selectors/tooltipSelectors.mjs";
+import { useDispatch, useSelector } from "@reduxjs/vue-redux";
 //#region src/state/hooks.ts
-var n = e.withTypes(), r = t.withTypes();
+var useAppDispatch = useDispatch.withTypes();
+var useAppSelector = useSelector.withTypes();
+/**
+* Returns the currently active data points being displayed in the Tooltip.
+* Active means that it is currently visible; this hook will return `undefined` if there is no current interaction.
+*
+* This follows the `<Tooltip />` props, if the Tooltip element is present in the chart.
+* If there is no `<Tooltip />` then this hook will follow the default Tooltip props.
+*
+* Data point is whatever you pass as an input to the chart using the `data={}` prop.
+*
+* This returns an array because a chart can have multiple graphical items in it (multiple Lines for example)
+* and tooltip with `shared={true}` will display all items at the same time.
+*
+* Returns undefined when used outside a chart context.
+*
+* @returns Data points that are currently visible in a Tooltip
+*/
+function useActiveTooltipDataPoints() {
+	return useAppSelector(selectActiveTooltipDataPoints);
+}
 //#endregion
-export { n as useAppDispatch, r as useAppSelector };
+export { useActiveTooltipDataPoints, useAppDispatch, useAppSelector };

package/dist/es/state/keyboardEventsMiddleware.mjs

@@ -1,55 +1,63 @@
-import { selectChartDirection as e } from "./selectors/axisSelectors.mjs";
-import { setKeyboardInteraction as t } from "./tooltipSlice.mjs";
-import { combineActiveTooltipIndex as n } from "./selectors/combiners/combineActiveTooltipIndex.mjs";
-import { selectTooltipAxisTicks as r, selectTooltipDisplayedData as i } from "./selectors/tooltipSelectors.mjs";
-import { selectCoordinateForDefaultIndex as a } from "./selectors/selectors.mjs";
-import { createAction as o, createListenerMiddleware as s } from "@reduxjs/toolkit";
+import { selectChartDirection } from "./selectors/axisSelectors.mjs";
+import { setKeyboardInteraction } from "./tooltipSlice.mjs";
+import { combineActiveTooltipIndex } from "./selectors/combiners/combineActiveTooltipIndex.mjs";
+import { selectTooltipAxisTicks, selectTooltipDisplayedData } from "./selectors/tooltipSelectors.mjs";
+import { selectCoordinateForDefaultIndex } from "./selectors/selectors.mjs";
+import { createAction, createListenerMiddleware } from "@reduxjs/toolkit";
 //#region src/state/keyboardEventsMiddleware.ts
-var c = o("keyDown"), l = o("focus"), u = s();
-u.startListening({
-	actionCreator: c,
-	effect: (o, s) => {
-		let c = s.getState();
-		if (c.rootProps.accessibilityLayer === !1) return;
-		let { keyboardInteraction: l } = c.tooltip, u = o.payload;
-		if (u !== "ArrowRight" && u !== "ArrowLeft" && u !== "Enter") return;
-		let d = Number(n(l, i(c))), f = r(c);
-		if (u === "Enter") {
-			let e = a(c, "axis", "hover", String(l.index));
-			s.dispatch(t({
-				active: !l.active,
-				activeIndex: l.index,
-				activeDataKey: l.dataKey,
-				activeCoordinate: e
+var keyDownAction = createAction("keyDown");
+var focusAction = createAction("focus");
+var keyboardEventsMiddleware = createListenerMiddleware();
+keyboardEventsMiddleware.startListening({
+	actionCreator: keyDownAction,
+	effect: (action, listenerApi) => {
+		const state = listenerApi.getState();
+		if (!(state.rootProps.accessibilityLayer !== false)) return;
+		const { keyboardInteraction } = state.tooltip;
+		const key = action.payload;
+		if (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "Enter") return;
+		const currentIndex = Number(combineActiveTooltipIndex(keyboardInteraction, selectTooltipDisplayedData(state)));
+		const tooltipTicks = selectTooltipAxisTicks(state);
+		if (key === "Enter") {
+			const coordinate = selectCoordinateForDefaultIndex(state, "axis", "hover", String(keyboardInteraction.index));
+			listenerApi.dispatch(setKeyboardInteraction({
+				active: !keyboardInteraction.active,
+				activeIndex: keyboardInteraction.index,
+				activeDataKey: keyboardInteraction.dataKey,
+				activeCoordinate: coordinate
 			}));
 			return;
 		}
-		let p = e(c) === "left-to-right" ? 1 : -1, m = d + (u === "ArrowRight" ? 1 : -1) * p;
-		if (m >= f.length || m < 0) return;
-		let h = a(c, "axis", "hover", String(m));
-		s.dispatch(t({
-			active: !0,
-			activeIndex: m.toString(),
+		const directionMultiplier = selectChartDirection(state) === "left-to-right" ? 1 : -1;
+		const nextIndex = currentIndex + (key === "ArrowRight" ? 1 : -1) * directionMultiplier;
+		if (nextIndex >= tooltipTicks.length || nextIndex < 0) return;
+		const coordinate = selectCoordinateForDefaultIndex(state, "axis", "hover", String(nextIndex));
+		listenerApi.dispatch(setKeyboardInteraction({
+			active: true,
+			activeIndex: nextIndex.toString(),
 			activeDataKey: void 0,
-			activeCoordinate: h
+			activeCoordinate: coordinate
 		}));
 	}
-}), u.startListening({
-	actionCreator: l,
-	effect: (e, n) => {
-		let r = n.getState();
-		if (r.rootProps.accessibilityLayer === !1) return;
-		let { keyboardInteraction: i } = r.tooltip;
-		if (!i.active && i.index == null) {
-			let e = a(r, "axis", "hover", "0");
-			n.dispatch(t({
+});
+keyboardEventsMiddleware.startListening({
+	actionCreator: focusAction,
+	effect: (_, listenerApi) => {
+		const state = listenerApi.getState();
+		if (!(state.rootProps.accessibilityLayer !== false)) return;
+		const { keyboardInteraction } = state.tooltip;
+		if (keyboardInteraction.active) return;
+		if (keyboardInteraction.index == null) {
+			const nextIndex = "0";
+			const coordinate = selectCoordinateForDefaultIndex(state, "axis", "hover", String(nextIndex));
+			listenerApi.dispatch(setKeyboardInteraction({
 				activeDataKey: void 0,
-				active: !0,
-				activeIndex: "0",
-				activeCoordinate: e
+				active: true,
+				activeIndex: nextIndex,
+				activeCoordinate: coordinate
 			}));
 		}
 	}
 });
 //#endregion
-export { l as focusAction, c as keyDownAction, u as keyboardEventsMiddleware };
+export { focusAction, keyDownAction, keyboardEventsMiddleware };

package/dist/es/state/layoutSlice.mjs

@@ -1,6 +1,6 @@
-import { createSlice as e } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 //#region src/state/layoutSlice.ts
-var t = e({
+var chartLayoutSlice = createSlice({
 	name: "chartLayout",
 	initialState: {
 		layoutType: "horizontal",
@@ -15,19 +15,25 @@ var t = e({
 		scale: 1
 	},
 	reducers: {
-		setLayout(e, t) {
-			e.layoutType = t.payload;
+		setLayout(state, action) {
+			state.layoutType = action.payload;
 		},
-		setChartSize(e, t) {
-			e.width = t.payload.width, e.height = t.payload.height;
+		setChartSize(state, action) {
+			state.width = action.payload.width;
+			state.height = action.payload.height;
 		},
-		setMargin(e, t) {
-			e.margin.top = t.payload.top, e.margin.right = t.payload.right, e.margin.bottom = t.payload.bottom, e.margin.left = t.payload.left;
+		setMargin(state, action) {
+			state.margin.top = action.payload.top;
+			state.margin.right = action.payload.right;
+			state.margin.bottom = action.payload.bottom;
+			state.margin.left = action.payload.left;
 		},
-		setScale(e, t) {
-			e.scale = t.payload;
+		setScale(state, action) {
+			state.scale = action.payload;
 		}
 	}
-}), { setMargin: n, setLayout: r, setChartSize: i, setScale: a } = t.actions, o = t.reducer;
+});
+var { setMargin, setLayout, setChartSize, setScale } = chartLayoutSlice.actions;
+var chartLayoutReducer = chartLayoutSlice.reducer;
 //#endregion
-export { o as chartLayoutReducer, i as setChartSize, r as setLayout, n as setMargin, a as setScale };
+export { chartLayoutReducer, setChartSize, setLayout, setMargin, setScale };

package/dist/es/state/legendSlice.mjs

@@ -1,7 +1,7 @@
-import { createSlice as e, current as t } from "@reduxjs/toolkit";
-import { castDraft as n } from "immer";
+import { createSlice, current } from "@reduxjs/toolkit";
+import { castDraft } from "immer";
 //#region src/state/legendSlice.ts
-var r = e({
+var legendSlice = createSlice({
 	name: "legend",
 	initialState: {
 		settings: {
@@ -16,20 +16,25 @@ var r = e({
 		payload: []
 	},
 	reducers: {
-		setLegendSize(e, t) {
-			e.size.width = t.payload.width, e.size.height = t.payload.height;
+		setLegendSize(state, action) {
+			state.size.width = action.payload.width;
+			state.size.height = action.payload.height;
 		},
-		setLegendSettings(e, t) {
-			e.settings.align = t.payload.align, e.settings.layout = t.payload.layout, e.settings.verticalAlign = t.payload.verticalAlign;
+		setLegendSettings(state, action) {
+			state.settings.align = action.payload.align;
+			state.settings.layout = action.payload.layout;
+			state.settings.verticalAlign = action.payload.verticalAlign;
 		},
-		addLegendPayload(e, t) {
-			e.payload.push(n(t.payload));
+		addLegendPayload(state, action) {
+			state.payload.push(castDraft(action.payload));
 		},
-		removeLegendPayload(e, r) {
-			let i = t(e).payload.indexOf(n(r.payload));
-			i > -1 && e.payload.splice(i, 1);
+		removeLegendPayload(state, action) {
+			const index = current(state).payload.indexOf(castDraft(action.payload));
+			if (index > -1) state.payload.splice(index, 1);
 		}
 	}
-}), { setLegendSize: i, setLegendSettings: a, addLegendPayload: o, removeLegendPayload: s } = r.actions, c = r.reducer;
+});
+var { setLegendSize, setLegendSettings, addLegendPayload, removeLegendPayload } = legendSlice.actions;
+var legendReducer = legendSlice.reducer;
 //#endregion
-export { o as addLegendPayload, c as legendReducer, s as removeLegendPayload, a as setLegendSettings, i as setLegendSize };
+export { addLegendPayload, legendReducer, removeLegendPayload, setLegendSettings, setLegendSize };