@solidports/recharts 0.1.0

package/src/component/responsiveContainerUtils.ts

@@ -0,0 +1,134 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { isPercent } from "../util/DataUtils"
+
+import type { Percent } from "../util/types"
+import type { Props } from "./ResponsiveContainer"
+
+export const defaultResponsiveContainerProps = {
+	debounce: 0,
+	height: "100%",
+	initialDimension: {
+		height: -1,
+		width: -1,
+	},
+	minWidth: 0,
+	width: "100%",
+} as const satisfies Partial<Props>
+
+export const calculateChartDimensions = (
+	containerWidth: number | undefined,
+	containerHeight: number | undefined,
+	props: {
+		aspect: number | undefined
+		height: Percent | number | undefined
+		maxHeight: number | undefined
+		width: Percent | number | undefined
+	},
+) => {
+	const {
+		width = defaultResponsiveContainerProps.width,
+		height = defaultResponsiveContainerProps.height,
+		aspect,
+		maxHeight,
+	} = props
+
+	/*
+	 * The containerWidth and containerHeight are already percentage based because it's set as that percentage in CSS.
+	 * Means we don't have to calculate percentages here.
+	 */
+	let calculatedWidth: number | undefined = isPercent(width) ? containerWidth : Number(width)
+	let calculatedHeight: number | undefined = isPercent(height) ? containerHeight : Number(height)
+
+	if (aspect && aspect > 0) {
+		/* Preserve the desired aspect ratio */
+		if (calculatedWidth) {
+			/* Will default to using width for aspect ratio */
+			calculatedHeight = calculatedWidth / aspect
+		} else if (calculatedHeight) {
+			/* But we should also take height into consideration */
+			calculatedWidth = calculatedHeight * aspect
+		}
+
+		/* if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight */
+		if (maxHeight && calculatedHeight != null && calculatedHeight > maxHeight) {
+			calculatedHeight = maxHeight
+		}
+	}
+
+	return { calculatedHeight, calculatedWidth }
+}
+
+const bothOverflow: JSX.CSSProperties = {
+	height: 0,
+	overflow: "visible",
+	width: 0,
+}
+const overflowX: JSX.CSSProperties = {
+	overflowX: "visible",
+	width: 0,
+} as JSX.CSSProperties
+const overflowY: JSX.CSSProperties = {
+	height: 0,
+	overflowY: "visible",
+} as JSX.CSSProperties
+const noStyle: JSX.CSSProperties = {}
+
+/**
+ * This zero-size, overflow-visible is required to allow the chart to shrink.
+ * Without it, the chart itself will fill the ResponsiveContainer, and while it allows the chart to grow,
+ * it would always keep the container at the size of the chart,
+ * and ResizeObserver would never fire.
+ * With this zero-size element, the chart itself never actually fills the container,
+ * it just so happens that it is visible because it overflows.
+ * I learned this trick from the `react-virtualized` library: https://github.com/bvaughn/react-virtualized-auto-sizer/blob/master/src/AutoSizer.ts
+ * See https://github.com/recharts/recharts/issues/172 and also https://github.com/bvaughn/react-virtualized/issues/68
+ *
+ * Also, we don't need to apply the zero-size style if the dimension is a fixed number (or undefined),
+ * because in that case the chart can't shrink in that dimension anyway.
+ * This fixes defining the dimensions using aspect ratio: https://github.com/recharts/recharts/issues/6245
+ */
+export const getInnerDivStyle = (props: {
+	height?: Percent | number
+	width?: Percent | number
+}): JSX.CSSProperties => {
+	/* eslint-disable-next-line solid/reactivity -- plain object, not a Solid props proxy */
+	const { width, height } = props
+	const isWidthPercent = isPercent(width)
+	const isHeightPercent = isPercent(height)
+
+	if (isWidthPercent && isHeightPercent) {
+		return bothOverflow
+	}
+	if (isWidthPercent) {
+		return overflowX
+	}
+	if (isHeightPercent) {
+		return overflowY
+	}
+	return noStyle
+}
+
+export function getDefaultWidthAndHeight({
+	width,
+	height,
+	aspect,
+}: {
+	aspect: number | undefined
+	height: Percent | number | undefined
+	width: Percent | number | undefined
+}): { height: Percent | number | undefined; width: Percent | number | undefined } {
+	let calculatedWidth = width
+	let calculatedHeight = height
+
+	if (calculatedWidth === undefined && calculatedHeight === undefined) {
+		calculatedWidth = defaultResponsiveContainerProps.width
+		calculatedHeight = defaultResponsiveContainerProps.height
+	} else if (calculatedWidth === undefined) {
+		calculatedWidth = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.width
+	} else if (calculatedHeight === undefined) {
+		calculatedHeight = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.height
+	}
+
+	return { height: calculatedHeight, width: calculatedWidth }
+}

package/src/container/ClipPathProvider.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-cycle */
+import { createContext, Show, useContext } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+import { uniqueId } from "../util/DataUtils"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { selectPlotArea } from "../state/selectors/selectPlotArea"
+
+const ClipPathIdContext = createContext<string | null>(null)
+
+/**
+ * Generates a unique clip path ID for use in SVG elements,
+ * and puts it in a context provider.
+ *
+ * To read the clip path ID, use the `useClipPathId` hook,
+ * or render `<ClipPath>` component which will automatically use the ID from this context.
+ *
+ * @param props children - children to be wrapped by the provider
+ * @returns Context Provider
+ */
+export function ClipPathProvider(props: { children: JSX.Element }) {
+	const clipPathId = `${uniqueId("recharts")}-clip`
+	const ctx = useChartStore()
+	const plotArea = () => (ctx ? selectPlotArea(ctx.store) : undefined)
+
+	/* Show's render-fn child re-fires on every truthy `when` value change —
+	 * meaning the entire body, including `{props.children}`, gets re-instantiated
+	 * each time `plotArea()` returns a new reference. With the Solid props proxy
+	 * for children, that re-instantiates user JSX (and every Bar/Funnel inside)
+	 * on every chart-offset reactive cycle. The cleanup of those children fires
+	 * `removeZIndexLayer` / `removeGraphicalItem` etc., which invalidates
+	 * selectors that feed back into selectPlotArea — tight loop, OOM. Always
+	 * render the Provider + children; gate only the inline <defs> on plotArea. */
+	return (
+		<ClipPathIdContext value={clipPathId}>
+			<Show when={plotArea()}>
+				{(area) => (
+					<defs>
+						<clipPath id={clipPathId}>
+							<rect x={area().x} y={area().y} height={area().height} width={area().width} />
+						</clipPath>
+					</defs>
+				)}
+			</Show>
+			{props.children}
+		</ClipPathIdContext>
+	)
+}
+
+export const useClipPathId = (): string | null => {
+	return useContext(ClipPathIdContext)
+}

package/src/container/Layer.tsx

@@ -0,0 +1,38 @@
+import type { JSX } from '@solidjs/web';
+import type { WithoutRemoveFalse } from "../util/types"
+import { untrack } from "solid-js"
+import { clsx } from "clsx"
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
+
+import { bindRef, splitProps } from '../util/solid-1-compat';
+interface LayerProps {
+	class?: string
+	children?: JSX.Element
+	ref?: SVGGElement | ((el: SVGGElement) => void)
+}
+
+export type Props = WithoutRemoveFalse<JSX.SvgSVGAttributes<SVGGElement>> & LayerProps
+
+/**
+ * Creates an SVG group element to group other SVG elements.
+ *
+ * Useful if you want to apply transformations or styles to a set of elements
+ * without affecting other elements in the SVG.
+ *
+ * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/g
+ */
+export function Layer(props: Props) {
+	const [local, others] = splitProps(props, ["children", "class", "ref"])
+	const layerClass = () => clsx("recharts-layer", local.class)
+	const svgRest = () => svgPropertiesAndEvents(others)
+
+	return (
+		<g
+			class={layerClass()}
+			{...svgRest()}
+			ref={(el) => untrack(() => bindRef(local.ref, el))}
+		>
+			{local.children}
+		</g>
+	)
+}

package/src/container/RootSurface.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { createMemo, Show } from 'solid-js';
+import { useChartHeight, useChartWidth } from "../context/chartLayoutContext"
+import { useAccessibilityLayer } from "../context/accessibilityContext"
+import { useIsPanorama } from "../context/PanoramaContext"
+import { Surface } from "./Surface"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { selectBrushDimensions } from "../state/selectors/brushSelectors"
+import { isPositiveNumber } from "../util/isWellBehavedNumber"
+import { AllZIndexPortals } from "../zIndex/ZIndexPortal"
+import { bindRef } from "../util/solid-1-compat"
+
+type RootSurfaceProps = {
+	children: JSX.Element
+	title: string | undefined
+	desc: string | undefined
+	otherAttributes: Record<string, unknown> | null
+	ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+}
+
+const FULL_WIDTH_AND_HEIGHT = {
+	display: "block",
+	height: "100%",
+	/*
+	 * display: block is necessary here because the default for an SVG is display: inline,
+	 * which in some browsers (Chrome) adds a little bit of extra space above and below the SVG
+	 * to make space for the descender of letters like "g" and "y". This throws off the height calculation
+	 * and causes the container to grow indefinitely on each render with responsive=true.
+	 * Display: block removes that extra space.
+	 *
+	 * Interestingly, Firefox does not have this problem, but it doesn't hurt to add the style anyway.
+	 */
+	width: "100%",
+}
+
+function MainChartSurface(props: RootSurfaceProps) {
+	const width = createMemo(() => useChartWidth())
+	const height = createMemo(() => useChartHeight())
+	const hasAccessibilityLayer = createMemo(() => useAccessibilityLayer())
+
+	const tabIndex = (): number | undefined => {
+		if (props.otherAttributes != null) {
+			if (typeof props.otherAttributes.tabIndex === "number") {
+				return props.otherAttributes.tabIndex
+			}
+			return hasAccessibilityLayer() ? 0 : undefined
+		}
+		return undefined
+	}
+
+	const role = (): JSX.HTMLAttributes<HTMLElement>["role"] => {
+		if (props.otherAttributes != null) {
+			if (typeof props.otherAttributes.role === "string") {
+				return props.otherAttributes.role as JSX.HTMLAttributes<HTMLElement>["role"]
+			}
+			return hasAccessibilityLayer() ? "application" : undefined
+		}
+		return undefined
+	}
+
+	const ready = createMemo(() => isPositiveNumber(width()) && isPositiveNumber(height()))
+
+	return (
+		<Show when={ready()}>
+			<Surface
+				{...props.otherAttributes}
+				title={props.title}
+				desc={props.desc}
+				role={role()}
+				tabindex={tabIndex()}
+				width={width() ?? 0}
+				height={height() ?? 0}
+				style={FULL_WIDTH_AND_HEIGHT}
+				ref={(el) => bindRef(props.ref, el)}
+			>
+				{props.children}
+			</Surface>
+		</Show>
+	)
+}
+
+function BrushPanoramaSurface(props: { children: JSX.Element }) {
+	const ctx = useChartStore()
+	const brushDimensions = () => (ctx ? selectBrushDimensions(ctx.store) : undefined)
+
+	return (
+		<Show when={brushDimensions()}>
+			{(dims) => (
+				<Surface width={dims().width} height={dims().height} x={dims().x} y={dims().y}>
+					{props.children}
+				</Surface>
+			)}
+		</Show>
+	)
+}
+
+export function RootSurface(props: RootSurfaceProps) {
+	const isPanorama = useIsPanorama()
+
+	return (
+		<Show
+			when={isPanorama === false}
+			fallback={
+				<BrushPanoramaSurface>
+					<AllZIndexPortals isPanorama>{props.children}</AllZIndexPortals>
+				</BrushPanoramaSurface>
+			}
+		>
+			<MainChartSurface
+				ref={(el) => bindRef(props.ref, el)}
+				title={props.title}
+				desc={props.desc}
+				otherAttributes={props.otherAttributes}
+			>
+				<AllZIndexPortals isPanorama={false}>{props.children}</AllZIndexPortals>
+			</MainChartSurface>
+		</Show>
+	)
+}

package/src/container/Surface.tsx

@@ -0,0 +1,61 @@
+import type { JSX } from '@solidjs/web';
+import { untrack } from "solid-js"
+import { clsx } from "clsx"
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
+import type { CartesianViewBox } from "../util/types"
+
+import { bindRef, splitProps } from '../util/solid-1-compat';
+interface SurfaceProps {
+	width: number | string
+	height: number | string
+	viewBox?: CartesianViewBox
+	class?: string
+	style?: JSX.CSSProperties
+	children?: JSX.Element
+	title?: string
+	desc?: string
+	ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+}
+
+export type Props = Omit<JSX.SvgSVGAttributes<SVGSVGElement>, "viewBox"> & SurfaceProps
+
+/**
+ * Renders an SVG element.
+ *
+ * All charts already include a Surface component, so you would not normally use this directly.
+ *
+ * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
+ */
+export function Surface(props: Props) {
+	const [local, others] = splitProps(props, [
+		"children",
+		"class",
+		"desc",
+		"height",
+		"ref",
+		"style",
+		"title",
+		"viewBox",
+		"width",
+	])
+
+	const svgView = () => local.viewBox || { height: local.height, width: local.width, x: 0, y: 0 }
+	const layerClass = () => clsx("recharts-surface", local.class)
+	const svgRest = () => svgPropertiesAndEvents(others)
+
+	return (
+		<svg
+			{...svgRest()}
+			class={layerClass()}
+			width={local.width}
+			height={local.height}
+			style={local.style}
+			viewBox={`${svgView().x} ${svgView().y} ${svgView().width} ${svgView().height}`}
+			ref={(el) => untrack(() => bindRef(props.ref, el))}
+		>
+			<title>{local.title}</title>
+			<desc>{local.desc}</desc>
+			{local.children}
+		</svg>
+	)
+}

package/src/context/CellsContext.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable import/no-cycle, sort-keys */
+import { createContext, createSignal, onCleanup, useContext } from 'solid-js';
+/* React parity: upstream walks `props.children` via `findAllByType(Cell)` to
+ * discover per-data-point overrides (fill, stroke, ...). Solid JSX is opaque —
+ * descendants resolve to DOM nodes, not vnodes — so introspection is impossible.
+ * Instead, <Cell/> calls `register()` at setup time to hand its props up; the
+ * graphical-item parent (Bar/Pie/Scatter/...) reads `cells()` to get an
+ * insertion-ordered array shaped like upstream's findAllByType result. */
+
+export type CellPropsRecord = Record<string, unknown>
+
+/* Upstream code reads `cells[i].props` — keep that wrapper shape so existing
+ * computeBarRectangles / Pie / Scatter logic spreads `(cells[i] as { props }).props`
+ * unchanged. */
+export type RegisteredCell = { props: CellPropsRecord }
+
+export type CellsRegistry = {
+	register: (props: () => CellPropsRecord) => void
+	cells: () => ReadonlyArray<RegisteredCell>
+}
+
+const CellsContext = createContext<CellsRegistry | null>(null)
+
+/* Each Cell entry stores the prop accessor — re-reading at consumer time keeps
+ * fill/stroke reactive to upstream signal changes (e.g. row.visitors > 0
+ * branch flipping in BarNegative). */
+type Entry = { id: number; getProps: () => CellPropsRecord }
+
+export function createCellsRegistry(): CellsRegistry & {
+	Provider: typeof CellsContext
+} {
+	/* Cells register from their component body, so this registry opts into owned writes. */
+	const [entries, setEntries] = createSignal<ReadonlyArray<Entry>>([], { ownedWrite: true })
+	let nextId = 0
+
+	const register = (getProps: () => CellPropsRecord): void => {
+		const id = nextId++
+		setEntries((prev) => [...prev, { id, getProps }])
+		onCleanup(() => {
+			setEntries((prev) => prev.filter((e) => e.id !== id))
+		})
+	}
+
+	const cells = (): ReadonlyArray<RegisteredCell> =>
+		entries().map((e) => ({ props: e.getProps() }))
+
+	return { register, cells, Provider: CellsContext }
+}
+
+export function useCellsRegistry(): CellsRegistry | null {
+	return useContext(CellsContext)
+}
+
+export const CellsContextProvider = CellsContext

package/src/context/ErrorBarContext.tsx

@@ -0,0 +1,146 @@
+import { createContext, createEffect, onCleanup, untrack, useContext } from 'solid-js';
+import type { Accessor } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+import type { ErrorBarsState } from "../state/errorBarSlice"
+import type { AxisId } from "../state/cartesianAxisSlice"
+import type {
+	ErrorBarDataItem,
+	ErrorBarDataPointFormatter,
+	ErrorBarDirection,
+} from "../cartesian/ErrorBar"
+import type { ErrorBarsSettings } from "../state/errorBarSlice"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { useGraphicalItemId } from "./RegisterGraphicalItemId"
+import type { BarRectangleItem } from "../cartesian/Bar"
+import type { LinePointItem } from "../cartesian/Line"
+import type { ScatterPointItem } from "../cartesian/Scatter"
+import type { DataKey } from "../util/types"
+import { isSameStoreEntry } from "../state/storeIdentity"
+import { teardownWrite } from "../state/teardownWrite"
+
+type ErrorBarItemType = BarRectangleItem | LinePointItem | ScatterPointItem
+
+/**
+ * A type-erased formatter that the context stores.
+ * The entry parameter uses the union so consumers can call it with any item type.
+ */
+type ErasedErrorBarFormatter = (
+	entry: ErrorBarItemType,
+	dataKey: DataKey<ErrorBarItemType, number[] | number>,
+	direction: ErrorBarDirection,
+) => ErrorBarDataItem
+
+type ErrorBarContextType = {
+	data: ReadonlyArray<unknown> | undefined
+	dataPointFormatter: ErasedErrorBarFormatter
+	errorBarOffset: number
+	xAxisId: AxisId
+	yAxisId: AxisId
+}
+
+const initialContextState: ErrorBarContextType = {
+	data: [],
+	dataPointFormatter: () => ({ value: 0, x: 0, y: 0 }),
+	errorBarOffset: 0,
+	xAxisId: "xAxis-0",
+	yAxisId: "yAxis-0",
+}
+
+/* Provider value is an Accessor (GOTCHA-005-A) — Solid context returns a static
+   read at consume time, so wrapping the value in `() => ...` lets ErrorBarImpl
+   re-evaluate `ctx().data` reactively as `rects()` populates. */
+const initialContextAccessor: Accessor<ErrorBarContextType> = () => initialContextState
+
+const ErrorBarContext = createContext<Accessor<ErrorBarContextType>>(initialContextAccessor)
+
+/**
+ * Wraps a specifically-typed formatter into the erased context formatter type.
+ * This is safe because at runtime, each provider only passes entries
+ * of the correct type for its formatter.
+ */
+function eraseFormatter<T extends ErrorBarItemType>(
+	formatter: ErrorBarDataPointFormatter<T>,
+): ErasedErrorBarFormatter {
+	return (entry, dataKey, direction) =>
+		formatter(entry as T, dataKey as DataKey<T, number[] | number>, direction)
+}
+
+type SetErrorBarContextProps<T extends ErrorBarItemType> = {
+	data: ReadonlyArray<unknown> | undefined
+	dataPointFormatter: ErrorBarDataPointFormatter<T>
+	errorBarOffset: number
+	xAxisId: AxisId
+	yAxisId: AxisId
+	children: JSX.Element
+}
+
+export function SetErrorBarContext<T extends ErrorBarItemType>(props: SetErrorBarContextProps<T>) {
+	/* Pass the Accessor itself (not its value) so consumers re-evaluate as
+	   `props.data` populates downstream — Solid's createContext returns a single
+	   read at useContext time, the Accessor wraps the live value. */
+	const value: Accessor<ErrorBarContextType> = () => ({
+		data: props.data,
+		dataPointFormatter: eraseFormatter(props.dataPointFormatter),
+		errorBarOffset: props.errorBarOffset,
+		xAxisId: props.xAxisId,
+		yAxisId: props.yAxisId,
+	})
+	return <ErrorBarContext value={value}>{props.children}</ErrorBarContext>
+}
+
+export const useErrorBarContext = (): Accessor<ErrorBarContextType> => useContext(ErrorBarContext)
+
+export function ReportErrorBarSettings(props: ErrorBarsSettings): null {
+	const ctx = useChartStore()
+	const graphicalItemId = useGraphicalItemId()
+	let prevProps: ErrorBarsSettings | null = null
+
+	/* Track only dataKey/direction; setStore reads stay untracked so this
+	   scope does not re-subscribe to state.errorBars[id] (would loop). */
+	createEffect(
+		() => ({ dataKey: props.dataKey, direction: props.direction }),
+		({ dataKey, direction }) => {
+		untrack(() => {
+			if (graphicalItemId == null) {
+				return
+			}
+			const next: ErrorBarsSettings = { dataKey, direction }
+			if (prevProps === null) {
+				ctx?.setStore("errorBars", (errorBars: ErrorBarsState) => {
+					const list = errorBars[graphicalItemId] ?? []
+					errorBars[graphicalItemId] = [...list, next]
+				})
+			} else {
+				const prev = prevProps
+				ctx?.setStore("errorBars", (errorBars: ErrorBarsState) => {
+					const list = errorBars[graphicalItemId]
+					if (list == null) return
+					errorBars[graphicalItemId] = list.map((e) => (isSameStoreEntry(e, prev) ? next : e))
+				})
+			}
+			prevProps = next
+		})
+		},
+	)
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			if (prevProps != null && graphicalItemId != null) {
+				const toRemove = prevProps
+				ctx?.setStore(
+					"errorBars",
+					(errorBars: ErrorBarsState) => {
+						const list = errorBars[graphicalItemId]
+						if (list == null) return
+						errorBars[graphicalItemId] = list.filter(
+							(e: ErrorBarsSettings) => !isSameStoreEntry(e, toRemove),
+						)
+					},
+				)
+				prevProps = null
+			}
+		})
+	})
+
+	return null
+}

package/src/context/GraphicalItemChildrenScope.tsx

@@ -0,0 +1,18 @@
+import { children as resolveChildren } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+/**
+ * Wraps user JSX (e.g. <ErrorBar/>) so that:
+ *  - createComponent(ErrorBar, ...) fires exactly once,
+ *  - that single invocation captures the current owner — which must include
+ *    both RegisterGraphicalItemId.Provider AND SetErrorBarContext.Provider,
+ *  - subsequent re-renders of the descendant tree read the memoized nodes
+ *    instead of re-minting ErrorBar (which would loop the addErrorBar
+ *    dispatch through the store-feedback cycle).
+ *
+ * MUST be rendered inside SetErrorBarContext.Provider and inside the
+ * RegisterGraphicalItemId children-fn scope. See GOTCHA-017.
+ */
+export function GraphicalItemChildrenScope(props: { children: JSX.Element }): JSX.Element {
+	const resolved = resolveChildren(() => props.children)
+	return <>{resolved()}</>
+}

package/src/context/PanoramaContext.tsx

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+const PanoramaContext = createContext<boolean | null>(null)
+
+export const useIsPanorama = (): boolean => useContext(PanoramaContext) != null
+
+export const PanoramaContextProvider = (props: { children: JSX.Element }) => (
+	<PanoramaContext value>{props.children}</PanoramaContext>
+)

package/src/context/RegisterGraphicalItemId.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+import { useUniqueId } from "../util/useUniqueId"
+import type { GraphicalItemId } from "../state/graphicalItemsSlice"
+
+export type IdSetter = {
+	/**
+	 * Children must be a function that receives the resolved ID of the graphical item.
+	 * This ID will either be the one provided via props.id or generated automatically.
+	 */
+	children: (id: GraphicalItemId) => JSX.Element
+	id?: string
+	type: string
+}
+
+const GraphicalItemIdContext = createContext<GraphicalItemId | null>(null)
+
+export const RegisterGraphicalItemId = (props: IdSetter) => {
+	/* eslint-disable-next-line solid/reactivity -- IDs are stable; useUniqueId calls useId() which must run at setup, not in a memo */
+	const resolvedId = useUniqueId(`recharts-${props.type}`, props.id)
+	return (
+		<GraphicalItemIdContext value={resolvedId}>
+			{props.children(resolvedId)}
+		</GraphicalItemIdContext>
+	)
+}
+
+export function useGraphicalItemId(): GraphicalItemId | null {
+	return useContext(GraphicalItemIdContext)
+}

package/src/context/accessibilityContext.tsx

@@ -0,0 +1,6 @@
+import { useChartStore } from "../state/RechartsStoreContext"
+
+export const useAccessibilityLayer = (): boolean => {
+	const ctx = useChartStore()
+	return ctx?.store.rootProps.accessibilityLayer ?? true
+}

package/src/context/brushUpdateContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'solid-js';
+export type BrushStartEndIndex = {
+	endIndex: number
+	startIndex: number
+}
+
+export type OnBrushUpdate = (newState: BrushStartEndIndex) => void
+
+export const BrushUpdateDispatchContext = createContext<OnBrushUpdate>(() => {})