@octanejs/recharts 0.1.0

package/src/zIndex/ZIndexLayer.tsrx

@@ -0,0 +1,80 @@
+// Port of zIndex/ZIndexLayer.tsx — renders children into the redux-registered
+// <g> for the given zIndex via an octane portal (SVG has no CSS z-index).
+// Registration is deferred-cleanup: while a zIndex changes, the old portal
+// element stays alive until the new one is ready, avoiding a flash.
+import { createPortal, useLayoutEffect, useRef } from 'octane';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import { selectZIndexPortalElement } from './zIndexSelectors';
+import { registerZIndexPortal, unregisterZIndexPortal } from '../state/zIndexSlice';
+import { useIsInChartContext } from '../context/chartLayoutContext.ts';
+import { useIsPanorama } from '../context/PanoramaContext.ts';
+
+/** @since 3.4 */
+export function ZIndexLayer(props) {
+	const { zIndex, children } = props;
+	// Outside a chart there is no zIndex portal state — render normally.
+	const isInChartContext = useIsInChartContext();
+	// zIndex undefined or 0 renders normally (0 is the default layer).
+	const shouldRenderInPortal = isInChartContext && zIndex !== undefined && zIndex !== 0;
+	const isPanorama = useIsPanorama();
+
+	// Deferred-cleanup bookkeeping: every registered zIndex, plus the last valid
+	// portal node to keep rendering into during a zIndex transition.
+	const lastPortalElementRef = useRef(undefined);
+	const registeredZIndexesRef = useRef(new Set());
+	const dispatch = useAppDispatch();
+	const portalElement = useAppSelector(
+		(state) => selectZIndexPortalElement(state, zIndex, isPanorama),
+	);
+
+	useLayoutEffect(() => {
+		if (!shouldRenderInPortal) {
+			// Portal rendering was disabled — clean up any stale registrations.
+			const registered = registeredZIndexesRef.current;
+			registered.forEach((z) => {
+				dispatch(unregisterZIndexPortal({ zIndex: z }));
+			});
+			registered.clear();
+			lastPortalElementRef.current = undefined;
+			return;
+		}
+		// Register the current zIndex (idempotent — skips if already registered).
+		if (!registeredZIndexesRef.current.has(zIndex)) {
+			dispatch(registerZIndexPortal({ zIndex }));
+			registeredZIndexesRef.current.add(zIndex);
+		}
+		// When the new portal element is ready, retire old zIndex registrations.
+		if (portalElement) {
+			lastPortalElementRef.current = portalElement;
+			const registered = registeredZIndexesRef.current;
+			registered.forEach((z) => {
+				if (z !== zIndex) {
+					dispatch(unregisterZIndexPortal({ zIndex: z }));
+					registered.delete(z);
+				}
+			});
+		}
+	}, [dispatch, zIndex, shouldRenderInPortal, portalElement]);
+
+	// Unmount-only cleanup — unregister everything when the component is removed.
+	useLayoutEffect(() => {
+		const registered = registeredZIndexesRef.current;
+		return () => {
+			registered.forEach((z) => {
+				dispatch(unregisterZIndexPortal({ zIndex: z }));
+			});
+			registered.clear();
+		};
+	}, [dispatch]);
+
+	if (!shouldRenderInPortal) {
+		return children;
+	}
+	// Prefer the current portal; fall back to the cached one during transitions.
+	const targetElement = portalElement ?? lastPortalElementRef.current;
+	if (!targetElement) {
+		// Very first render — no portal has ever been registered yet.
+		return null;
+	}
+	return createPortal(children, targetElement);
+}

package/src/zIndex/ZIndexLayer.tsrx.d.ts

@@ -0,0 +1,2 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export declare function ZIndexLayer(props: { zIndex?: number; children?: unknown }): unknown;

package/src/zIndex/ZIndexPortal.tsrx

@@ -0,0 +1,43 @@
+// Port of zIndex/ZIndexPortal.tsx — SVG cannot use CSS z-index, so recharts
+// renders one <g> per registered zIndex (negatives before the default layer,
+// positives after) and ZIndexLayer portals content into them.
+import { useLayoutEffect, useRef } from 'octane';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import { registerZIndexPortalElement, unregisterZIndexPortalElement } from '../state/zIndexSlice';
+import { selectAllRegisteredZIndexes } from './zIndexSelectors';
+
+function ZIndexSvgPortal(props) {
+	const { zIndex, isPanorama } = props;
+	const ref = useRef(null);
+	const dispatch = useAppDispatch();
+	useLayoutEffect(() => {
+		if (ref.current) {
+			dispatch(registerZIndexPortalElement({ zIndex, element: ref.current, isPanorama }));
+		}
+		return () => {
+			dispatch(unregisterZIndexPortalElement({ zIndex, isPanorama }));
+		};
+	}, [dispatch, zIndex, isPanorama]);
+	// these g elements should not be tabbable
+	return <g tabIndex={-1} ref={ref} className={'recharts-zIndex-layer_' + zIndex}></g>;
+}
+
+export function AllZIndexPortals(props) @{
+	const { children, isPanorama } = props;
+	const allRegisteredZIndexes = useAppSelector(selectAllRegisteredZIndexes);
+	if (!allRegisteredZIndexes || allRegisteredZIndexes.length === 0) {
+		return children;
+	}
+	const allNegativeZIndexes = allRegisteredZIndexes.filter((zIndex) => zIndex < 0);
+	// We exclude zero on purpose - that is the default layer, and it doesn't need a portal.
+	const allPositiveZIndexes = allRegisteredZIndexes.filter((zIndex) => zIndex > 0);
+	<>
+		@for (const zIndex of allNegativeZIndexes; key zIndex) {
+			<ZIndexSvgPortal zIndex={zIndex} isPanorama={isPanorama} />
+		}
+		{children}
+		@for (const zIndex of allPositiveZIndexes; key zIndex) {
+			<ZIndexSvgPortal zIndex={zIndex} isPanorama={isPanorama} />
+		}
+	</>
+}

package/src/zIndex/getZIndexFromUnknown.js

@@ -0,0 +1,15 @@
+// Vendored verbatim from recharts@3.9.2 es6/zIndex/getZIndexFromUnknown.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
+export function getZIndexFromUnknown(input, defaultZIndex) {
+	if (
+		input &&
+		typeof input === 'object' &&
+		'zIndex' in input &&
+		typeof input.zIndex === 'number' &&
+		isWellBehavedNumber(input.zIndex)
+	) {
+		return input.zIndex;
+	}
+	return defaultZIndex;
+}

package/src/zIndex/zIndexSelectors.js

@@ -0,0 +1,45 @@
+// Vendored verbatim from recharts@3.9.2 es6/zIndex/zIndexSelectors.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createSelector } from 'reselect';
+import { arrayContentsAreEqualCheck } from '../state/selectors/arrayEqualityCheck';
+import { DefaultZIndexes } from './DefaultZIndexes';
+
+/**
+ * Given a zIndex, returns the corresponding portal element reference.
+ * If no zIndex is provided or if the zIndex is not registered, returns undefined.
+ *
+ * It also returns undefined in case the z-index portal has not been rendered yet.
+ */
+export var selectZIndexPortalElement = createSelector(
+	(state) => state.zIndex.zIndexMap,
+	(_, zIndex) => zIndex,
+	(_, _zIndex, isPanorama) => isPanorama,
+	(zIndexMap, zIndex, isPanorama) => {
+		if (zIndex == null) {
+			return undefined;
+		}
+		var entry = zIndexMap[zIndex];
+		if (entry == null) {
+			return undefined;
+		}
+		if (isPanorama) {
+			return entry.panoramaElement;
+		}
+		return entry.element;
+	},
+);
+export var selectAllRegisteredZIndexes = createSelector(
+	(state) => state.zIndex.zIndexMap,
+	(zIndexMap) => {
+		var allNumbers = Object.keys(zIndexMap)
+			.map((zIndexStr) => parseInt(zIndexStr, 10))
+			.concat(Object.values(DefaultZIndexes));
+		var uniqueNumbers = Array.from(new Set(allNumbers));
+		return uniqueNumbers.sort((a, b) => a - b);
+	},
+	{
+		memoizeOptions: {
+			resultEqualityCheck: arrayContentsAreEqualCheck,
+		},
+	},
+);