solid-recharts 0.2.1 → 1.0.0

package/src/context/chartDataContext.tsx

@@ -1,15 +1,14 @@
 // Ported from recharts 3.8.1 src/context/chartDataContext.tsx (commit 7a23854).
 //
 // Solid deviations: `useAppDispatch` + action creators → `useAppStore()` + slice
-// actions (`store.actions.chartData.*`); `useEffect` → two-arg `createEffect`
-// (the cleanup is returned from the apply phase); selector hooks return
+// actions (`store.actions.chartData.*`); `useEffect` → `createEffect` + `onCleanup`;
+// selector hooks return
 // Accessors (since `useAppSelector` does). `SetComputedData` and the BrushStartEndIndex
 // type are kept local; the latter re-homes to brushUpdateContext when ported.
-import { createEffect, type Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { type Accessor, createEffect, on, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
 import { ChartData } from "../state/chartDataSlice";
 import { useAppSelector, useAppStore } from "../state/hooks";
-import { unregisterCleanup } from "../state/unregisterOnCleanup";
 import { RechartsRootState } from "../state/store";
 import { useIsPanorama } from "./PanoramaContext";
 
@@ -25,17 +24,19 @@ export const ChartDataContextProvider = (props: {
   const isPanorama = useIsPanorama();
 
   createEffect(
-    () => props.chartData,
-    (chartData) => {
-      // Panorama mode reuses the main chart's data — don't overwrite it.
-      if (isPanorama) {
-        return undefined;
-      }
-      store?.actions.chartData.setChartData(chartData);
-      return unregisterCleanup(() => {
-        store?.actions.chartData.setChartData(undefined);
-      });
-    },
+    on(
+      () => props.chartData,
+      (chartData) => {
+        // Panorama mode reuses the main chart's data — don't overwrite it.
+        if (isPanorama) {
+          return undefined;
+        }
+        store?.actions.chartData.setChartData(chartData);
+        onCleanup(() => {
+          store?.actions.chartData.setChartData(undefined);
+        });
+      },
+    ),
   );
 
   return null;
@@ -45,13 +46,15 @@ export const SetComputedData = (props: { computedData: unknown }): JSX.Element =
   const store = useAppStore();
 
   createEffect(
-    () => props.computedData,
-    (computedData) => {
-      store?.actions.chartData.setComputedData(computedData);
-      return unregisterCleanup(() => {
-        store?.actions.chartData.setChartData(undefined);
-      });
-    },
+    on(
+      () => props.computedData,
+      (computedData) => {
+        store?.actions.chartData.setComputedData(computedData);
+        onCleanup(() => {
+          store?.actions.chartData.setChartData(undefined);
+        });
+      },
+    ),
   );
 
   return null;

package/src/context/chartLayoutContext.tsx

@@ -3,8 +3,8 @@
 // Solid deviations: selector hooks return Accessors (since `useAppSelector`
 // does); `useAppDispatch` + action creators → `useAppStore().actions` +
 // `createEffect`. Brush/responsive reads go through the current stubs.
-import { createEffect, type Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { type Accessor, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import {
   CartesianLayout,
   CartesianViewBoxRequired,
@@ -135,12 +135,14 @@ export const ReportChartSize = (props: {
     responsive && responsive.height > 0 ? responsive.height : props.height;
 
   createEffect(
-    () => ({ width: width(), height: height() }),
-    ({ width: w, height: h }) => {
-      if (!isPanorama && isPositiveNumber(w) && isPositiveNumber(h)) {
-        store?.actions.layout.setChartSize({ width: w, height: h });
-      }
-    },
+    on(
+      () => ({ width: width(), height: height() }),
+      ({ width: w, height: h }) => {
+        if (!isPanorama && isPositiveNumber(w) && isPositiveNumber(h)) {
+          store?.actions.layout.setChartSize({ width: w, height: h });
+        }
+      },
+    ),
   );
 
   return null;
@@ -149,10 +151,12 @@ export const ReportChartSize = (props: {
 export const ReportChartMargin = (props: { margin: Partial<Margin> }): JSX.Element => {
   const store = useAppStore();
   createEffect(
-    () => props.margin,
-    (margin) => {
-      store?.actions.layout.setMargin(margin);
-    },
+    on(
+      () => props.margin,
+      (margin) => {
+        store?.actions.layout.setMargin(margin);
+      },
+    ),
   );
   return null;
 };

package/src/polar/Pie.tsx

@@ -31,8 +31,8 @@
 // recharts (the empty/hidden root Layer stays inline, mounting no portal).
 // DEFERRED: `maxRadius`/`cornerRadius` rounding edge cases, float-precise per-frame
 // animation angle matrices.
-import { createEffect, createMemo, For, merge, Show, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, untrack, mergeProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useUniqueId } from "../util/useUniqueId";
 import {
@@ -580,7 +580,7 @@ export function Pie<DataPointType = Record<string, unknown>, DataValueType = unk
   props: PieProps<DataPointType, DataValueType>,
 ): JSX.Element {
   const store = useAppStore();
-  const merged = merge(pieDefaultProps, props);
+  const merged = mergeProps(pieDefaultProps, props);
   const id = useUniqueId("recharts-pie", props.id);
 
   if (store != null) {
@@ -703,18 +703,19 @@ export function Pie<DataPointType = Record<string, unknown>, DataValueType = unk
   // re-appears re-runs the ENTER animation from a collapsed state instead of resuming the
   // tween from the last visible (mid-progress) frame. Plain-ref write (no reactive graph).
   createEffect(
-    () => merged.hide || sectors() == null,
-    (shouldReset) => {
-      if (shouldReset) {
-        previousSectorsRef.current = null;
-      }
-    },
+    on(
+      () => merged.hide || sectors() == null,
+      (shouldReset) => {
+        if (shouldReset) {
+          previousSectorsRef.current = null;
+        }
+      },
+    ),
   );
   const polarLayout = usePolarChartLayout();
 
-  // Tracks animation in-progress (gates the labels). ownedWrite: handleAnimationEnd
-  // can fire from the driver's effect-cleanup when a mid-animation chart is disposed
-  // (route/soft navigation) — a legal teardown write.
+  // Tracks animation in-progress (gates the labels). handleAnimationEnd can fire
+  // from the driver's cleanup when a mid-animation chart is disposed.
   const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
     () => props.onAnimationStart?.(),
     () => props.onAnimationEnd?.(),

package/src/polar/PolarAngleAxis.tsx

@@ -17,8 +17,8 @@
 // evaluated element to inject computed x/y/payload — use the function form
 // instead). NOTE: the reference PolarAngleAxis renders no axis `label` title
 // either (only PolarRadiusAxis does) — no gap there.
-import { For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { Layer } from "../container/Layer";
@@ -331,7 +331,7 @@ export function PolarAngleAxis<DataPointType = unknown, DataValueType = unknown>
 ): JSX.Element {
   const store = useAppStore();
   const layout = usePolarChartLayout();
-  const merged = merge(polarAngleAxisDefaultProps, props);
+  const merged = mergeProps(polarAngleAxisDefaultProps, props);
   const isPanorama = useIsPanorama();
 
   if (store != null) {

package/src/polar/PolarGrid.tsx

@@ -10,8 +10,8 @@
 // default DefaultZIndexes.grid). DEFERRED (documented): background fill rect (fill
 // defaults to "none"), generic SVG-prop passthrough beyond
 // stroke/strokeWidth/strokeDasharray.
-import { For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector } from "../state/hooks";
 import { AxisId } from "../state/cartesianAxisSlice";
 import { selectPolarGridAngles, selectPolarGridRadii } from "../state/selectors/polarGridSelectors";
@@ -107,7 +107,7 @@ const ConcentricRing = (
     fallback={
       <path
         {...concentricPolygonAttrs(props.cx, props.cy)}
-        class={["recharts-polar-grid-concentric-polygon", props.class]}
+        class={["recharts-polar-grid-concentric-polygon", props.class].filter(Boolean).join(" ")}
         fill={props.fill ?? "none"}
         fill-opacity={props.fillOpacity}
         stroke={props.stroke}
@@ -118,7 +118,7 @@ const ConcentricRing = (
     }
   >
     <circle
-      class={["recharts-polar-grid-concentric-circle", props.class]}
+      class={["recharts-polar-grid-concentric-circle", props.class].filter(Boolean).join(" ")}
       fill={props.fill ?? "none"}
       fill-opacity={props.fillOpacity}
       stroke={props.stroke}
@@ -155,7 +155,7 @@ const RadialLine = (
 };
 
 export const PolarGrid = (props: PolarGridProps): JSX.Element => {
-  const merged = merge(polarGridDefaultProps, props);
+  const merged = mergeProps(polarGridDefaultProps, props);
   const polarViewBox = useAppSelector(selectPolarViewBox);
   const anglesFromStore = useAppSelector((state) =>
     selectPolarGridAngles(state, merged.angleAxisId),

package/src/polar/PolarRadiusAxis.tsx

@@ -14,8 +14,8 @@
 // DefaultZIndexes.axis).
 // DEFERRED (documented): ELEMENT-form `tick` (Solid can't clone-and-inject
 // computed props into an evaluated node — use the function form instead).
-import { For, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { For, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { Layer } from "../container/Layer";
@@ -263,7 +263,7 @@ export function PolarRadiusAxis<DataPointType = unknown, DataValueType = unknown
 ): JSX.Element {
   const store = useAppStore();
   const layout = usePolarChartLayout();
-  const merged = merge(polarRadiusAxisDefaultProps, props);
+  const merged = mergeProps(polarRadiusAxisDefaultProps, props);
 
   if (store != null) {
     registerInStore<RadiusAxisSettings>(

package/src/polar/Radar.tsx

@@ -21,8 +21,8 @@
 // cloneElement). PERMANENT-N/A: element-form `shape`. DEFERRED: object-form
 // `shape`. zIndex relayering IS wired: the `.recharts-radar` Layer is wrapped in
 // <ZIndexLayer> (default DefaultZIndexes.area = 100), matching recharts.
-import { createMemo, merge, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, Show, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
 import { useUniqueId } from "../util/useUniqueId";
@@ -291,7 +291,7 @@ export function Radar<DataPointType = Record<string, unknown>, DataValueType = u
   props: RadarProps<DataPointType, DataValueType>,
 ): JSX.Element {
   const store = useAppStore();
-  const merged = merge(radarDefaultProps, props);
+  const merged = mergeProps(radarDefaultProps, props);
   const isPanorama = useIsPanorama();
   const id = useUniqueId("recharts-radar", props.id);
 

package/src/polar/RadialBar.tsx

@@ -30,8 +30,8 @@
 // (final frame), element-form shape, per-sector item-hover dispatch (sectors lack
 // tooltipPosition).
 // Cells ARE wired: a <Cell> child overrides the per-sector fill/stroke/class.
-import { createMemo, For, merge, Show, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, untrack, mergeProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useUniqueId } from "../util/useUniqueId";
 import {
@@ -481,7 +481,7 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
   props: RadialBarProps<DataPointType, DataValueType>,
 ): JSX.Element {
   const store = useAppStore();
-  const merged = merge(radialBarDefaultProps, props);
+  const merged = mergeProps(radialBarDefaultProps, props);
   const id = useUniqueId("recharts-radial-bar", props.id);
 
   const settings = (): RadialBarSettings => ({

package/src/shape/Cross.tsx

@@ -4,11 +4,11 @@
  * Ported from recharts 3.8.1 src/shape/Cross.tsx (commit 7a23854).
  * Solid deviations: `className` (recharts) → `class: string` (and Omit the wide
  * SVG `class` so the array form typechecks); destructuring defaults → `?? 0`
- * accessors; `clsx` → `class={[...]}`; `return null` → `<Show>`.
+ * accessors; `clsx` → `class={[...].filter(Boolean).join(" ")}`; `return null` → `<Show>`.
  */
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { Show, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { isNumber } from "../util/DataUtils";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
 
@@ -62,7 +62,7 @@ export const Cross = (props: CrossProps): JSX.Element => {
   // SVG-prop filter; only allowlisted keys (x, y, width, height, …) survive onto
   // the <path>. `top`/`left`/`class` are filtered/handled separately.
   const passthrough = (): Record<string, unknown> => ({
-    ...omit(props, "class"),
+    ...splitProps(props, ["class"])[1],
     x: x(),
     y: y(),
     top: top(),
@@ -75,7 +75,7 @@ export const Cross = (props: CrossProps): JSX.Element => {
     <Show when={valid()}>
       <path
         {...svgPropertiesAndEvents(passthrough())}
-        class={["recharts-cross", props.class]}
+        class={["recharts-cross", props.class].filter(Boolean).join(" ")}
         d={getPath(x(), y(), width(), height(), top(), left())}
       />
     </Show>

package/src/shape/Curve.tsx

@@ -4,7 +4,7 @@
  * Ported from recharts 3.8.1 src/shape/Curve.tsx (commit 7a23854).
  * Pure `getPath`/`getCurveFactory` helpers copied verbatim (modulo type
  * adjustments). Solid deviations:
- *   - `className` → `class` (Omit the wide SVG `class`); `clsx` → `class={[...]}`.
+ *   - `className` → `class` (Omit the wide SVG `class`); `clsx` → `class={[...].filter(Boolean).join(" ")}`.
  *   - `resolveDefaultProps` → `merge()` defaults via per-prop `?? default`.
  *   - `React.forwardRef` → `ref?: SVGPathElement | ((el: SVGPathElement) => void)`.
  *   - `return null` → `<Show>`.
@@ -17,8 +17,8 @@
  *     generic type internally but its typings don't reflect that.
  */
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { Show, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import {
   area as shapeArea,
   type Area as D3AreaCurve,
@@ -303,8 +303,7 @@ export const Curve = (props: CurveProps): JSX.Element => {
   // `strokeDasharray` (camelCase) is forwarded by the spread — svgPropertiesNoEvents
   // renames it to the kebab `stroke-dasharray` DOM attribute (see svg-attribute-rename).
   const others = (): Record<string, unknown> => ({
-    ...omit(
-      props,
+    ...splitProps(props, [
       "class",
       "type",
       "layout",
@@ -313,7 +312,7 @@ export const Curve = (props: CurveProps): JSX.Element => {
       "connectNulls",
       "path",
       "pathRef",
-    ),
+    ])[1],
   });
 
   // recharts Curve spreads `svgPropertiesNoEvents(props)` for attributes and
@@ -326,7 +325,7 @@ export const Curve = (props: CurveProps): JSX.Element => {
       <path
         {...svgPropertiesNoEvents(others())}
         {...(adaptEventHandlers(props) ?? {})}
-        class={["recharts-curve", props.class]}
+        class={["recharts-curve", props.class].filter(Boolean).join(" ")}
         d={dAttr()}
         ref={props.pathRef}
       />

package/src/shape/Dot.tsx

@@ -1,7 +1,7 @@
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
-import { Show, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { isNumber } from "../util/DataUtils";
 
 interface DotOwnProps {
@@ -33,13 +33,13 @@ export type DotProps = Omit<
  * because it is not a valid SVG attribute.
  */
 export const Dot = (props: DotProps) => {
-  const rest = omit(props, "class", "cx", "cy", "r", "clipDot");
+  const rest = splitProps(props, ["class", "cx", "cy", "r", "clipDot"])[1];
 
   return (
     <Show when={isNumber(props.cx) && isNumber(props.cy) && isNumber(props.r)}>
       <circle
         {...svgPropertiesAndEvents({ ...rest })}
-        class={["recharts-dot", props.class]}
+        class={["recharts-dot", props.class].filter(Boolean).join(" ")}
         cx={props.cx}
         cy={props.cy}
         r={props.r}

package/src/shape/Polygon.tsx

@@ -4,12 +4,12 @@
  * Ported from recharts 3.8.1 src/shape/Polygon.tsx (commit 7a23854).
  * Pure path helpers are copied verbatim. Solid deviations: `className` → `class`
  * (Omit the wide SVG `class`); no destructuring (use `omit` + a keyed `<Show>`
- * to narrow `points` without a non-null `!`); `clsx` → `class={[...]}`;
+ * to narrow `points` without a non-null `!`); `clsx` → `class={[...].filter(Boolean).join(" ")}`;
  * `return null` → `<Show>`.
  */
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { Show, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { Coordinate } from "../util/types";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
 import { roundTemplateLiteral } from "../util/round";
@@ -103,9 +103,9 @@ export type PolygonProps = Omit<
 
 export const Polygon = (props: PolygonProps): JSX.Element => {
   const others = (): Record<string, unknown> => ({
-    ...omit(props, "class", "points", "baseLinePoints", "connectNulls"),
+    ...splitProps(props, ["class", "points", "baseLinePoints", "connectNulls"])[1],
   });
-  const layerClass = (): Array<string | undefined> => ["recharts-polygon", props.class];
+  const layerClass = (): string => ["recharts-polygon", props.class].filter(Boolean).join(" ");
 
   // Narrow `points` to a non-empty array via keyed Show (no non-null assertion).
   const validPoints = (): ReadonlyArray<Coordinate> | undefined =>

package/src/shape/Rectangle.tsx

@@ -4,7 +4,7 @@
  * Ported from recharts 3.8.1 src/shape/Rectangle.tsx (commit 7a23854).
  * Pure `getRectanglePath` copied verbatim. Solid deviations: `className` →
  * `class` (Omit the wide SVG `class`); destructuring defaults → `?? default`;
- * `clsx` → `class={[...]}`; `return null` → `<Show>`; the radius is rendered as
+ * `clsx` → `class={[...].filter(Boolean).join(" ")}`; `return null` → `<Show>`; the radius is rendered as
  * a number-or-undefined attribute (overriding the spread).
  *
  * The update-animation path (`isUpdateAnimationActive`) is WIRED: it drives
@@ -14,8 +14,8 @@
  * (e.g. Bar's rectangles) stays static — wiring is regression-safe.
  */
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createEffect, createSignal, Show, omit, untrack } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createSignal, Show, untrack, splitProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import type { AnimationDuration } from "../util/types";
 import type { EasingInput } from "../animation/easing";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
@@ -154,14 +154,14 @@ export const Rectangle = (props: RectangleProps): JSX.Element => {
   const animationEasing = (): EasingInput => props.animationEasing ?? "ease";
   const animationBegin = (): number => props.animationBegin ?? 0;
 
-  const layerClass = (): Array<string | undefined> => ["recharts-rectangle", props.class];
+  const layerClass = (): string => ["recharts-rectangle", props.class].filter(Boolean).join(" ");
 
   // recharts renders x/y/width/height/radius on the <path> (React allows extra
   // attrs). Solid's PathSVGAttributes is stricter, so route them through the
   // (loosely-typed) svgPropertiesAndEvents spread rather than explicit attrs.
   // `radius` is rendered only when it's a number (array radius → undefined).
   const basePathProps = (): Record<string, unknown> => ({
-    ...omit(props, "class", "style"),
+    ...splitProps(props, ["class", "style"])[1],
     radius: typeof radius() === "number" ? radius() : undefined,
   });
 
@@ -178,21 +178,23 @@ export const Rectangle = (props: RectangleProps): JSX.Element => {
     pathEl = el;
   };
   createEffect(
-    () => ({ x: x(), y: y(), width: width(), height: height(), radius: radius() }),
-    () => {
-      if (pathEl?.getTotalLength == null) {
-        return;
-      }
-      let len = 0;
-      try {
-        len = pathEl.getTotalLength();
-      } catch {
-        return; // getTotalLength can throw on detached/empty paths — keep the last value.
-      }
-      if (len) {
-        setTotalLength(len);
-      }
-    },
+    on(
+      () => ({ x: x(), y: y(), width: width(), height: height(), radius: radius() }),
+      () => {
+        if (pathEl?.getTotalLength == null) {
+          return;
+        }
+        let len = 0;
+        try {
+          len = pathEl.getTotalLength();
+        } catch {
+          return; // getTotalLength can throw on detached/empty paths — keep the last value.
+        }
+        if (len) {
+          setTotalLength(len);
+        }
+      },
+    ),
   );
 
   const animationId = useAnimationId(

package/src/shape/Sector.tsx

@@ -4,11 +4,11 @@
  * Ported from recharts 3.8.1 src/shape/Sector.tsx (commit 7a23854).
  * Pure geometry helpers copied verbatim. Solid deviations: `resolveDefaultProps`
  * → per-prop `?? default` accessors; `className` → `class` (Omit the wide SVG
- * `class`); `clsx` → `class={[...]}`; `return null` → `<Show>`.
+ * `class`); `clsx` → `class={[...].filter(Boolean).join(" ")}`; `return null` → `<Show>`.
  */
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { Show, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import { GeometrySector, GeometrySectorWithCornerRadius } from "../util/types";
 import { polarToCartesian, RADIAN } from "../util/PolarUtils";
 import { getPercentValue, mathSign } from "../util/DataUtils";
@@ -280,7 +280,7 @@ export const Sector = (props: SectorProps): JSX.Element => {
   };
 
   const passthrough = (): Record<string, unknown> => ({
-    ...omit(props, "class"),
+    ...splitProps(props, ["class"])[1],
     cx: cx(),
     cy: cy(),
     innerRadius: innerRadius(),
@@ -296,7 +296,7 @@ export const Sector = (props: SectorProps): JSX.Element => {
     <Show when={valid()}>
       <path
         {...svgPropertiesAndEvents(passthrough())}
-        class={["recharts-sector", props.class]}
+        class={["recharts-sector", props.class].filter(Boolean).join(" ")}
         d={path()}
       />
     </Show>

package/src/shape/Symbols.tsx

@@ -4,12 +4,12 @@
  * Ported from recharts 3.8.1 src/shape/Symbols.tsx (commit 7a23854).
  * Pure d3-shape symbol math copied verbatim. Solid deviations: `className` →
  * `class` (Omit the wide SVG `class`); destructuring defaults → `?? default`
- * accessors; `clsx` → `class={[...]}`; `return null` → `<Show>`; the
+ * accessors; `clsx` → `class={[...].filter(Boolean).join(" ")}`; `return null` → `<Show>`; the
  * `registerSymbol` static is attached via `Object.assign` (no `as`).
  */
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { Show, omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import {
   symbol as shapeSymbol,
   symbolCircle,
@@ -123,7 +123,7 @@ const SymbolsComponent = (props: SymbolsProps): JSX.Element => {
   };
 
   const passthrough = (): Record<string, unknown> => ({
-    ...omit(props, "class", "type", "size", "sizeType"),
+    ...splitProps(props, ["class", "type", "size", "sizeType"])[1],
     type: type(),
     size: size(),
     sizeType: sizeType(),
@@ -133,7 +133,7 @@ const SymbolsComponent = (props: SymbolsProps): JSX.Element => {
     <Show when={isNumber(props.cx) && isNumber(props.cy) && isNumber(size())}>
       <path
         {...svgPropertiesAndEvents(passthrough())}
-        class={["recharts-symbols", props.class]}
+        class={["recharts-symbols", props.class].filter(Boolean).join(" ")}
         transform={`translate(${props.cx}, ${props.cy})`}
         d={getPath()}
       />