@solidports/recharts 0.1.0 → 0.1.1

package/src/component/responsiveContainerUtils.ts

@@ -1,134 +0,0 @@
-/* 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

@@ -1,51 +0,0 @@
-/* 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

@@ -1,38 +0,0 @@
-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

@@ -1,120 +0,0 @@
-/* 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

@@ -1,61 +0,0 @@
-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

@@ -1,54 +0,0 @@
-/* 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

@@ -1,146 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

package/src/context/brushUpdateContext.tsx

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