solid-recharts 0.2.0 → 1.0.0

package/src/chart/LineChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/LineChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; the user-facing convenience wrapper over CartesianChart.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/PieChart.tsx

@@ -1,3 +1,4 @@
+import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/PieChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; the user-facing convenience wrapper over PolarChart.
 // `resolveDefaultProps` → Solid `merge` (lazy proxy — does NOT eagerly evaluate
@@ -5,8 +6,8 @@
 // (layout "centric", startAngle 0, endAngle 360) win over PolarChart's polar
 // defaults. `ref` is omitted from categoricalChartProps and passed separately,
 // mirroring the reference's forwardRef split.
-import { merge, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -26,7 +27,7 @@ export interface PieChartProps<DataPointType = unknown> extends PolarChartProps<
 export function PieChart<DataPointType = unknown>(
   props: PieChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = merge(defaultPieChartProps, omit(props, "ref"));
+  const categoricalChartProps = mergeProps(defaultPieChartProps, splitProps(props, ["ref"])[1]);
 
   return (
     <PolarChart

package/src/chart/PolarChart.tsx

@@ -1,3 +1,4 @@
+import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/PolarChart.tsx (commit 7a23854).
 //
 // Solid deviations: `forwardRef` → `ref` prop; `resolveDefaultProps` → per-field
@@ -7,8 +8,8 @@
 // The polar geometry props (cx/cy/innerRadius/outerRadius/startAngle/endAngle)
 // pass through to CategoricalChart exactly as in the reference — svgPropertiesNoEvents
 // forwards cx/cy onto the root <svg> (faithful) and drops the rest.
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { ChartOptions } from "../state/optionsSlice";
 import { RechartsStoreProvider } from "../state/RechartsStoreProvider";
 import { ChartDataContextProvider } from "../context/chartDataContext";
@@ -89,7 +90,7 @@ export const PolarChart = (props: PolarChartOptions): JSX.Element => {
       {/* Spread WITHOUT children (a `{...cp()}` spread eagerly evaluates the
           children getter here, before the provider sets context — running them
           outside the store); pass children as a lazy JSX child instead. */}
-      <CategoricalChart {...omit(cp(), "children")} ref={props.ref}>
+      <CategoricalChart {...splitProps(cp(), ["children"])[1]} ref={props.ref}>
         {cp().children}
       </CategoricalChart>
     </RechartsStoreProvider>

package/src/chart/RadarChart.tsx

@@ -1,8 +1,9 @@
+import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/RadarChart.tsx (commit 7a23854).
 // `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge` (lazy proxy, see PieChart).
 // RadarChart-specific defaults: layout "centric", startAngle 90, endAngle -270.
-import { merge, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -22,7 +23,7 @@ export interface RadarChartProps<DataPointType = unknown> extends PolarChartProp
 export function RadarChart<DataPointType = unknown>(
   props: RadarChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = merge(defaultRadarChartProps, omit(props, "ref"));
+  const categoricalChartProps = mergeProps(defaultRadarChartProps, splitProps(props, ["ref"])[1]);
 
   return (
     <PolarChart

package/src/chart/RadialBarChart.tsx

@@ -1,8 +1,9 @@
+import { mergeProps, splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/chart/RadialBarChart.tsx (commit 7a23854).
 // `forwardRef`→`ref` prop; `resolveDefaultProps`→`merge`. RadialBarChart defaults:
 // layout "radial", startAngle 0, endAngle 360 (PolarChart fills cx/cy/radii).
-import { merge, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { PolarChart } from "./PolarChart";
 import { PolarChartProps, TooltipEventType } from "../util/types";
@@ -24,7 +25,10 @@ export interface RadialBarChartProps<
 export function RadialBarChart<DataPointType = unknown>(
   props: RadialBarChartProps<DataPointType>,
 ): JSX.Element {
-  const categoricalChartProps = merge(defaultRadialBarChartProps, omit(props, "ref"));
+  const categoricalChartProps = mergeProps(
+    defaultRadialBarChartProps,
+    splitProps(props, ["ref"])[1],
+  );
 
   return (
     <PolarChart

package/src/chart/RechartsWrapper.tsx

@@ -5,8 +5,8 @@
 // ResponsiveContainer-context sizing, and the tooltip/legend portal contexts.
 // Renders the `recharts-wrapper` div + `ReportChartSize` (which drives the
 // Surface dimensions) + children.
-import { createMemo, createSignal, flush, onCleanup, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { batch, createMemo, createSignal, onCleanup, untrack } from "solid-js";
+import type { JSX } from "solid-js";
 import { ReportChartSize } from "../context/chartLayoutContext";
 import { TooltipPortalContext } from "../context/tooltipPortalContext";
 import { LegendPortalContext } from "../context/legendPortalContext";
@@ -95,12 +95,8 @@ export const RechartsWrapper = (props: RechartsWrapperProps): JSX.Element => {
   // the same node is passed to setTooltipPortal). The ref sets a signal that the
   // TooltipPortalContext exposes reactively, then forwards to the caller's ref.
   const [tooltipPortal, setTooltipPortal] = createSignal<HTMLElement | null>(null);
-  const [measuredWidth, setMeasuredWidth] = createSignal<number | undefined>(undefined, {
-    ownedWrite: true,
-  });
-  const [measuredHeight, setMeasuredHeight] = createSignal<number | undefined>(undefined, {
-    ownedWrite: true,
-  });
+  const [measuredWidth, setMeasuredWidth] = createSignal<number | undefined>(undefined);
+  const [measuredHeight, setMeasuredHeight] = createSignal<number | undefined>(undefined);
   let wrapperEl: HTMLDivElement | null = null;
   let resizeObserver: ResizeObserver | null = null;
 
@@ -141,9 +137,10 @@ export const RechartsWrapper = (props: RechartsWrapperProps): JSX.Element => {
     if (untrack(measuredWidth) === roundedWidth && untrack(measuredHeight) === roundedHeight) {
       return;
     }
-    setMeasuredWidth(roundedWidth);
-    setMeasuredHeight(roundedHeight);
-    flush();
+    batch(() => {
+      setMeasuredWidth(roundedWidth);
+      setMeasuredHeight(roundedHeight);
+    });
   };
 
   const measureOnce = (el: HTMLDivElement): void => {
@@ -277,7 +274,6 @@ export const RechartsWrapper = (props: RechartsWrapperProps): JSX.Element => {
 
   const handleMouseLeave = (event: MouseEvent & { currentTarget: HTMLDivElement }): void => {
     store?.actions.tooltip.mouseLeaveChart();
-    flush();
     if (store != null) {
       dispatchExternalMouseHandler(props.onMouseLeave, event);
     }
@@ -300,13 +296,11 @@ export const RechartsWrapper = (props: RechartsWrapperProps): JSX.Element => {
     const related = event.relatedTarget;
     if (related == null || !(related instanceof Node) || !el.contains(related)) {
       store?.actions.tooltip.mouseLeaveChart();
-      flush();
     }
   };
 
   const handleNativeMouseLeave = (): void => {
     store?.actions.tooltip.mouseLeaveChart();
-    flush();
   };
 
   const attachWrapperListeners = (el: HTMLDivElement): void => {
@@ -339,10 +333,6 @@ export const RechartsWrapper = (props: RechartsWrapperProps): JSX.Element => {
       clientY: event.clientY,
       currentTarget: event.currentTarget,
     });
-    // Solid 2.0 defers store propagation to a flush boundary; the external
-    // handler (dispatchExternalEvent) reads store.state synchronously, so flush
-    // the click-driven active-tooltip write first or the handler sees stale state.
-    flush();
     dispatchExternalMouseHandler(props.onClick, event);
   };
 
@@ -451,11 +441,11 @@ export const RechartsWrapper = (props: RechartsWrapperProps): JSX.Element => {
   };
 
   return (
-    <TooltipPortalContext value={tooltipPortal}>
-      <LegendPortalContext value={tooltipPortal}>
+    <TooltipPortalContext.Provider value={tooltipPortal}>
+      <LegendPortalContext.Provider value={tooltipPortal}>
         <ReportChartSize width={reportedWidth()} height={reportedHeight()} />
         <div
-          class={["recharts-wrapper", props.class]}
+          class={["recharts-wrapper", props.class].filter(Boolean).join(" ")}
           style={wrapperStyle()}
           ref={(el) => {
             setWrapperRef(el);
@@ -476,11 +466,11 @@ export const RechartsWrapper = (props: RechartsWrapperProps): JSX.Element => {
           onKeyDown={handleKeyDown}
           onFocus={onFocus}
           onBlur={onBlur}
-          tabindex={0}
+          tabIndex={0}
         >
           {props.children}
         </div>
-      </LegendPortalContext>
-    </TooltipPortalContext>
+      </LegendPortalContext.Provider>
+    </TooltipPortalContext.Provider>
   );
 };

package/src/chart/Sankey.tsx

@@ -18,8 +18,8 @@
 // through getValueByDataKey in the payload searcher (reference parity).
 // NON-GAPS: the reference Sankey has NO animation and hardcodes responsive={false}
 // on its wrapper (ResponsiveContainer sizing flows via the wrapper context).
-import { createEffect, createMemo, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { children, createMemo, For, Show, mergeProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { Surface } from "../container/Surface";
 import { Layer } from "../container/Layer";
 import { Rectangle } from "../shape/Rectangle";
@@ -767,7 +767,8 @@ const sankeyOptions: ChartOptions = {
 
 const SankeyImpl = (props: SankeyProps & { id: string }): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(sankeyDefaultProps, props);
+  const merged = mergeProps(sankeyDefaultProps, props);
+  const resolvedChildren = children(() => props.children);
   const width = useChartWidth();
   const height = useChartHeight();
 
@@ -808,8 +809,10 @@ const SankeyImpl = (props: SankeyProps & { id: string }): JSX.Element => {
 
   // Publish the computed data so the tooltip searcher can resolve node-/link-N.
   createEffect(
-    () => ({ nodes: computed().nodes, links: computed().links }),
-    (cd) => store?.actions.chartData.setComputedData(cd),
+    on(
+      () => ({ nodes: computed().nodes, links: computed().links }),
+      (cd) => store?.actions.chartData.setComputedData(cd),
+    ),
   );
 
   const dispatchEnter = (index: TooltipIndex, coord: Coordinate): void => {
@@ -956,7 +959,7 @@ const SankeyImpl = (props: SankeyProps & { id: string }): JSX.Element => {
             </Layer>
           </Layer>
           <SetTooltipEntrySettings tooltipEntrySettings={tooltipConfig()} />
-          {merged.children}
+          {resolvedChildren()}
         </Surface>
       )}
     </Show>

package/src/chart/ScatterChart.tsx

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/chart/ScatterChart.tsx (commit 7a23854).
 // `forwardRef` → `ref` prop; thin user-facing wrapper over CartesianChart.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { arrayTooltipSearcher } from "../state/optionsSlice";
 import { CartesianChart } from "./CartesianChart";
 import { CartesianChartProps, TooltipEventType } from "../util/types";

package/src/chart/SunburstChart.tsx

@@ -12,9 +12,9 @@
 // NON-GAP: `responsive` defaults to false in the reference too, and
 // ResponsiveContainer sizing flows via the wrapper context.
 // DEFERRED: event throttling nuances.
-import { createMemo, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import { scaleLinear } from "victory-vendor/d3-scale";
+import { children, createMemo, For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
+import { scaleLinear } from "d3-scale";
 import { Surface } from "../container/Surface";
 import { Layer } from "../container/Layer";
 import { Sector } from "../shape/Sector";
@@ -166,7 +166,8 @@ const SunburstChartImpl = (
   props: Required<Pick<SunburstChartProps, "data">> & SunburstChartProps & { id: string },
 ): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(sunburstDefaultProps, props);
+  const merged = mergeProps(sunburstDefaultProps, props);
+  const resolvedChildren = children(() => props.children);
   const width = useChartWidth();
   const height = useChartHeight();
 
@@ -348,7 +349,7 @@ const SunburstChartImpl = (
             </For>
           </Layer>
           <SetTooltipEntrySettings tooltipEntrySettings={tooltipConfig()} />
-          {merged.children}
+          {resolvedChildren()}
         </Surface>
       )}
     </Show>

package/src/chart/Treemap.tsx

@@ -18,8 +18,8 @@
 // works via the wrapper context (the reference itself hardcodes responsive={false}
 // on its wrapper). DEFERRED: the element form of `content` & `nestIndexContent`,
 // per-node name-fit text sizing nuances.
-import { createMemo, createSignal, For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { children, createMemo, createSignal, For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Surface } from "../container/Surface";
 import { Layer } from "../container/Layer";
 import { Rectangle } from "../shape/Rectangle";
@@ -484,7 +484,8 @@ const flattenNodes = (node: TreemapNode | null): TreemapNode[] => {
 
 const TreemapImpl = (props: TreemapProps & { id: string }): JSX.Element => {
   const store = useAppStore();
-  const merged = merge(treemapDefaultProps, props);
+  const merged = mergeProps(treemapDefaultProps, props);
+  const resolvedChildren = children(() => props.children);
   const width = useChartWidth();
   const height = useChartHeight();
 
@@ -813,7 +814,7 @@ const TreemapImpl = (props: TreemapProps & { id: string }): JSX.Element => {
               </For>
             </Layer>
             <SetTooltipEntrySettings tooltipEntrySettings={tooltipConfig()} />
-            {merged.children}
+            {resolvedChildren()}
           </Surface>
           {merged.type === "nest" ? (
             <div

package/src/component/ActivePoints.tsx

@@ -3,7 +3,7 @@
 // JSX is built in the parent's JSX scope via `renderActivePointsLayerFromState`.
 // Mounting a child component that subscribes to tooltip selectors trips STRICT_READ.
 // ZIndexLayer deferred.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { isNullish } from "../util/DataUtils";
 import type { ActiveDotProps, ActiveDotType, DataKey } from "../util/types";
 import { svgPropertiesNoEventsFromUnknownKeepCase } from "../util/svgPropertiesNoEvents";
@@ -77,9 +77,6 @@ function renderActiveDot(activeDot: ActiveDotType, dotProps: ActiveDotProps): JS
   if (typeof activeDot === "function") {
     return activeDot(dotProps);
   }
-  if (typeof activeDot === "object" && activeDot != null && "type" in activeDot) {
-    return activeDot;
-  }
   // Default <Dot> uses <Show> internally, which trips STRICT_READ when this
   // layer mounts during tooltip effect-apply — render the circle directly instead.
   // An object-form activeDot's `class`/`className` is dropped by the svg-prop
@@ -90,7 +87,7 @@ function renderActiveDot(activeDot: ActiveDotType, dotProps: ActiveDotProps): JS
       : undefined;
   return (
     <circle
-      class={["recharts-dot", customClass]}
+      class={["recharts-dot", customClass].filter(Boolean).join(" ")}
       cx={dotProps.cx}
       cy={dotProps.cy}
       r={dotProps.r}
@@ -120,17 +117,11 @@ export function renderActivePointsLayerFromState(
     ...svgPropertiesNoEventsFromUnknownKeepCase(args.activeDot),
   };
   return (
-    <g class={["recharts-layer", "recharts-active-dot"]} clip-path={args.clipPath}>
+    <g
+      class={["recharts-layer", "recharts-active-dot"].filter(Boolean).join(" ")}
+      clip-path={args.clipPath}
+    >
       {renderActiveDot(args.activeDot, dotProps)}
     </g>
   );
 }
-
-/** @deprecated Use computeActivePointState + renderActivePointsLayerFromState */
-export function renderActivePointsLayer(args: ActivePointsLayerArgs): JSX.Element | null {
-  const state = computeActivePointState(args);
-  if (state == null) {
-    return null;
-  }
-  return renderActivePointsLayerFromState(state, args);
-}

package/src/component/Cell.tsx

@@ -1,6 +1,7 @@
 // Ported from recharts 3.8.1 src/component/Cell.tsx (commit 7a23854).
-// Deviations: React's `SVGProps<SVGElement>` → Solid's `CamelSvgProps<JSX.SVGAttributes<SVGElement>>`
-// (which already names the class prop `class`); React's `displayName` is dropped.
+// Deviations: React's broad `SVGProps<SVGElement>` → the merged attribute surface
+// of Solid's element-specific SVG intrinsic types (with SVGElement-typed events);
+// React's `displayName` is dropped.
 //
 // The CellReader pattern: recharts extracts cells by walking the React element
 // tree (`findAllByType(children, Cell)`). Solid has no element-descriptor tree —
@@ -10,9 +11,26 @@
 // `collectCells`. Cells render no DOM (the standalone <Cell /> spec asserts this).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
 import { createMemo, type Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 
-export interface CellProps extends CamelSvgProps<JSX.SVGAttributes<SVGElement>> {
+type SVGIntrinsicTag = keyof SVGElementTagNameMap & keyof JSX.IntrinsicElements;
+type SVGIntrinsicAttributes = JSX.IntrinsicElements[SVGIntrinsicTag];
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+type ValueOfUnion<T, K extends PropertyKey> = T extends T
+  ? K extends keyof T
+    ? T[K]
+    : never
+  : never;
+type MergedSVGIntrinsicAttributes = {
+  [K in KeysOfUnion<SVGIntrinsicAttributes>]?: ValueOfUnion<SVGIntrinsicAttributes, K>;
+};
+type GenericSVGAttributes = Omit<
+  MergedSVGIntrinsicAttributes,
+  keyof JSX.DOMAttributes<SVGElement>
+> &
+  JSX.DOMAttributes<SVGElement>;
+
+export type CellProps = CamelSvgProps<GenericSVGAttributes> & {
   /**
    * The fill color.
    */
@@ -21,7 +39,7 @@ export interface CellProps extends CamelSvgProps<JSX.SVGAttributes<SVGElement>>
    * The stroke color.
    */
   stroke?: string;
-}
+};
 
 /**
  * Set while a parent collects its <Cell> children (see {@link collectCells}).

package/src/component/Cursor.tsx

@@ -6,12 +6,12 @@
 // optional SVG-props object (className/styling); a custom cursor ELEMENT
 // (recharts' `ReactElement` + cloneElement) is PERMANENT-N/A — there is no Solid
 // equivalent of React.isValidElement/cloneElement. Solid deviations: `clsx` →
-// `class={[...]}`; the connected `Cursor` resolves context then delegates to
+// `class={[...].filter(Boolean).join(" ")}`; the connected `Cursor` resolves context then delegates to
 // `CursorInternal`, which (like recharts) takes fully-resolved props so it can be
 // rendered standalone in tests; all reactive reads live in a tracking memo that
 // returns plain shape DATA, so the <Show> children read only plain properties.
 import { createMemo, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import {
   ChartOffsetInternal,
   Coordinate,
@@ -77,7 +77,7 @@ type CursorShape =
 /**
  * The shared cursor class, with an optional extra className from an object-form
  * `cursor` appended (the shape components type `class` as a plain string, so this
- * is joined rather than passed as a `class={[...]}` array).
+ * is joined rather than passed as a `class={[...].filter(Boolean).join(" ")}` array).
  */
 function cursorClass(cursor: CursorDefinition): string {
   if (typeof cursor === "object" && cursor != null && typeof cursor.className === "string") {

package/src/component/DefaultLegendContent.tsx

@@ -3,12 +3,12 @@
 // TYPES + component. The legend slice/selectors need these types; the component
 // renders the legend item list. Deviations: `ReactElement`→`Element`/dropped,
 // `DataKey<any>`→`DataKey<unknown>`, `ReactNode`→`Element`, `CSSProperties`→
-// `JSX.CSSProperties`, `className`→`class`, clsx→`class={[...]}`; `LegendItemSorter`
+// `JSX.CSSProperties`, `className`→`class`, clsx→`class={[...].filter(Boolean).join(" ")}`; `LegendItemSorter`
 // is co-located here (reference keeps it in Legend.tsx) so the slice can import it
 // without depending on the Legend component. `adaptEventsOfChild` events deferred.
-import { For, Show, merge } from "solid-js";
-import type { Element } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { For, Show, mergeProps } from "solid-js";
+type Element = JSX.Element;
+import type { JSX } from "solid-js";
 import { DataKey, LegendType, MousePointer } from "../util/types";
 import { Surface } from "../container/Surface";
 import { Symbols } from "../shape/Symbols";
@@ -134,7 +134,7 @@ const LegendIcon = (props: {
  * `content` prop to customize.
  */
 export const DefaultLegendContent = (props: Props): JSX.Element => {
-  const merged = merge(defaultLegendContentDefaultProps, props);
+  const merged = mergeProps(defaultLegendContentDefaultProps, props);
 
   const itemStyle = (): JSX.CSSProperties => ({
     display: merged.layout === "horizontal" ? "inline-block" : "block",
@@ -173,7 +173,9 @@ export const DefaultLegendContent = (props: Props): JSX.Element => {
                   "recharts-legend-item",
                   `legend-item-${i()}`,
                   entry.inactive ? "inactive" : undefined,
-                ]}
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
                 style={itemStyle()}
                 onClick={(event) => merged.onClick?.(entry, i(), event)}
                 onMouseEnter={(event) => merged.onMouseEnter?.(entry, i(), event)}

package/src/component/DefaultTooltipContent.tsx

@@ -5,11 +5,11 @@
 // (the per-entry `formatter` is populated from the graphical items' `formatter`
 // prop and wins over the prop-level one, per v3.9.1); `any` → `unknown`,
 // `ReactNode` → `Element`, `CSSProperties` → `JSX.CSSProperties`; `className` →
-// `class`, `clsx(...)` → `class={[...]}` array form (no clsx dep); `React.isValid-
+// `class`, `clsx(...)` → `class={[...].filter(Boolean).join(" ")}` array form (no clsx dep); `React.isValid-
 // Element` check dropped (Solid renders an Element or a string uniformly).
-import { For, Show, createMemo, merge } from "solid-js";
-import type { Element } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { For, Show, createMemo, mergeProps } from "solid-js";
+type Element = JSX.Element;
+import type { JSX } from "solid-js";
 import { isNullish, isNumOrStr } from "../util/DataUtils";
 import { DataKey, TooltipType } from "../util/types";
 import type { TooltipPayload, TooltipPayloadEntry } from "../state/tooltipSlice";
@@ -18,9 +18,10 @@ export type ValueType = number | string | ReadonlyArray<number | string>;
 export type NameType = number | string;
 
 function defaultFormatter(value: ValueType | undefined): Element {
-  return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1])
-    ? value.join(" ~ ")
-    : value;
+  if (value !== undefined && typeof value !== "string" && typeof value !== "number") {
+    return isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(" ~ ") : [...value];
+  }
+  return value;
 }
 
 export type Formatter<TValue extends ValueType = ValueType, TName extends NameType = NameType> = (
@@ -151,7 +152,7 @@ function lodashLikeSortBy(
  * `content` prop to customize.
  */
 export const DefaultTooltipContent = (props: Props): JSX.Element => {
-  const merged = merge(defaultDefaultTooltipContentProps, props);
+  const merged = mergeProps(defaultDefaultTooltipContentProps, props);
 
   const sortedPayload = createMemo<TooltipPayload>(() => {
     const payload = props.payload;
@@ -227,12 +228,15 @@ export const DefaultTooltipContent = (props: Props): JSX.Element => {
 
   return (
     <div
-      class={["recharts-default-tooltip", props.wrapperClass]}
+      class={["recharts-default-tooltip", props.wrapperClass].filter(Boolean).join(" ")}
       style={finalStyle()}
       role={merged.accessibilityLayer ? "status" : undefined}
       aria-live={merged.accessibilityLayer ? "assertive" : undefined}
     >
-      <p class={["recharts-tooltip-label", props.labelClass]} style={finalLabelStyle()}>
+      <p
+        class={["recharts-tooltip-label", props.labelClass].filter(Boolean).join(" ")}
+        style={finalLabelStyle()}
+      >
         {finalLabel()}
       </p>
       <Show when={sortedPayload().length > 0}>

package/src/component/Dots.tsx

@@ -7,8 +7,8 @@
 //     the default <Dot> (recharts does this via svgPropertiesAndEventsFromUnknown).
 //   - `ZIndexLayer` wrapper deferred (zIndex layering not ported) → plain <Layer>.
 //   - `clsx` → class string composed inline; `className` → `class`.
-import { createMemo, For, omit, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Index, Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Dot, type DotProps } from "../shape/Dot";
 import { Layer } from "../container/Layer";
 import { DataKey, DotItemDotProps, DotPoint, DotType } from "../util/types";
@@ -92,7 +92,7 @@ function DotRenderer(props: DotRendererProps): JSX.Element {
         renderFn()?.(dotProps())
       ) : (
         <Dot
-          {...omit(dotProps(), "index", "dataKey", "value", "payload", "points")}
+          {...splitProps(dotProps(), ["index", "dataKey", "value", "payload", "points"])[1]}
           class={props.dotClass}
         />
       )}
@@ -109,11 +109,15 @@ export function Dots(props: DotsProps): JSX.Element {
   return (
     <Show when={shouldRenderDots(props.points, props.dot)}>
       <Layer class={props.class} clipPath={layerClip()}>
-        <For each={props.points}>
+        {/* keyed={false} (index-keyed): during animation `points` is a fresh
+            array with fresh point objects every frame; reference-keyed <For>
+            would dispose+recreate every dot's DOM node per frame. Index-keying
+            reuses the rows and only updates cx/cy reactively. */}
+        <Index each={props.points}>
           {(entry, i) => (
             <DotRenderer
-              entry={entry}
-              index={i()}
+              entry={entry()}
+              index={i}
               dot={props.dot}
               baseProps={props.baseProps}
               dataKey={props.dataKey}
@@ -121,7 +125,7 @@ export function Dots(props: DotsProps): JSX.Element {
               points={props.points}
             />
           )}
-        </For>
+        </Index>
       </Layer>
     </Show>
   );