solid-recharts 0.2.0 → 1.0.0

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 { createEffect, 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";
@@ -47,7 +47,7 @@ import { usePolarChartLayout } from "../context/chartLayoutContext";
 import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
 import type { PolarAxisLineObjectProps, PolarTickEventHandler } from "./PolarAngleAxis";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 type TickOrientation = "left" | "right" | "middle";
 
@@ -263,54 +263,46 @@ 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);
 
-  let prev: RadiusAxisSettings | null = null;
-
-  createEffect(
-    (): RadiusAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(layout(), "radiusAxis", merged.type);
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: merged.radiusAxisId,
-        scale: merged.scale,
-        type: evaluatedType,
-        dataKey: merged.dataKey,
-        unit: undefined,
-        name: merged.name,
-        allowDuplicatedCategory: merged.allowDuplicatedCategory,
-        allowDataOverflow: merged.allowDataOverflow,
-        reversed: merged.reversed,
-        includeHidden: merged.includeHidden,
-        domain: merged.domain,
-        allowDecimals: merged.allowDecimals,
-        tickCount: merged.tickCount,
-        ticks: merged.ticks,
-        // DEVIATION: the settings slice shares the cartesian tick renderer type,
-        // so a polar function-form renderer is recorded as `true` (presence only —
-        // the renderer itself stays local to this component's render; no selector
-        // reads the function back out of the store).
-        tick: typeof merged.tick === "function" ? true : merged.tick,
-        niceTicks: merged.niceTicks,
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      store.actions.polarAxis.addRadiusAxis(settings);
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.polarAxis.removeRadiusAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<RadiusAxisSettings>(
+      (): RadiusAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(layout(), "radiusAxis", merged.type);
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: merged.radiusAxisId,
+          scale: merged.scale,
+          type: evaluatedType,
+          dataKey: merged.dataKey,
+          unit: undefined,
+          name: merged.name,
+          allowDuplicatedCategory: merged.allowDuplicatedCategory,
+          allowDataOverflow: merged.allowDataOverflow,
+          reversed: merged.reversed,
+          includeHidden: merged.includeHidden,
+          domain: merged.domain,
+          allowDecimals: merged.allowDecimals,
+          tickCount: merged.tickCount,
+          ticks: merged.ticks,
+          // DEVIATION: the settings slice shares the cartesian tick renderer type,
+          // so a polar function-form renderer is recorded as `true` (presence only —
+          // the renderer itself stays local to this component's render; no selector
+          // reads the function back out of the store).
+          tick: typeof merged.tick === "function" ? true : merged.tick,
+          niceTicks: merged.niceTicks,
+        };
+      },
+      {
+        // addRadiusAxis overwrites by id, so it doubles as replace-on-change.
+        add: (next) => store.actions.polarAxis.addRadiusAxis(next),
+        replace: (_prev, next) => store.actions.polarAxis.addRadiusAxis(next),
+        remove: (prev) => store.actions.polarAxis.removeRadiusAxis(prev),
+      },
+    );
+  }
 
   const viewBox = useAppSelector(selectPolarViewBox);
   const scale = useAppSelector((state) =>

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 { createEffect, 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";
@@ -74,7 +74,7 @@ import { SetTooltipEntrySettings } from "../state/SetTooltipEntrySettings";
 import { SetLegendPayload } from "../state/SetLegendPayload";
 import { LegendPayload } from "../component/DefaultLegendContent";
 import { TooltipPayloadConfiguration } from "../state/tooltipSlice";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 /** recharts: stroke (if not "none") wins as the legend/tooltip color, else fill. */
 const getLegendItemColor = (
@@ -291,42 +291,30 @@ 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);
 
-  let prev: RadarSettings | null = null;
-
-  createEffect(
-    (): RadarSettings => ({
-      id,
-      type: "radar",
-      // Radar has no own data prop — it always reads the chart data.
-      data: undefined,
-      dataKey: merged.dataKey,
-      hide: merged.hide,
-      angleAxisId: merged.angleAxisId,
-      radiusAxisId: merged.radiusAxisId,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addPolarGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removePolarGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<RadarSettings>(
+      () => ({
+        id,
+        type: "radar",
+        // Radar has no own data prop — it always reads the chart data.
+        data: undefined,
+        dataKey: merged.dataKey,
+        hide: merged.hide,
+        angleAxisId: merged.angleAxisId,
+        radiusAxisId: merged.radiusAxisId,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addPolarGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removePolarGraphicalItem(prev),
+      },
+    );
+  }
 
   const radar = useAppSelector((state) =>
     selectRadarPoints(state, merged.radiusAxisId, merged.angleAxisId, isPanorama, id),

package/src/polar/RadialBar.tsx

@@ -30,11 +30,15 @@
 // (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 { createEffect, createMemo, createSignal, 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 { AnimatedItems, type AnimationInterpolateFn } from "../animation/AnimatedItems";
+import {
+  AnimatedItems,
+  useAnimationCallbacks,
+  type AnimationInterpolateFn,
+} from "../animation/AnimatedItems";
 import { matchAppend, type AnimationMatchByProp } from "../animation/matchBy";
 import type { MutableRef } from "../animation/useAnimationStartSnapshot";
 import { usePolarChartLayout } from "../context/chartLayoutContext";
@@ -96,7 +100,7 @@ import {
 } from "../util/ChartUtils";
 import { interpolate, isNumber, mathSign } from "../util/DataUtils";
 import type { StackSeries } from "../util/stacks/stackTypes";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export type RadialBarDataItem = SectorProps &
   PolarViewBoxRequired &
@@ -477,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 => ({
@@ -494,29 +498,14 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
     maxBarSize: merged.maxBarSize,
   });
 
-  let prev: RadialBarSettings | null = null;
-
-  createEffect(
-    (): RadialBarSettings => settings(),
-    (s) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addPolarGraphicalItem(s);
-      } else if (prev !== s) {
-        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next: s });
-      }
-      prev = s;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removePolarGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<RadialBarSettings>(() => settings(), {
+      add: (next) => store.actions.graphicalItems.addPolarGraphicalItem(next),
+      replace: (prev, next) =>
+        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next }),
+      remove: (prev) => store.actions.graphicalItems.removePolarGraphicalItem(prev),
+    });
+  }
 
   // Per-sector <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);
@@ -574,17 +563,10 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
     current: null,
   };
   // Labels are hidden while the sectors animate (recharts' showLabels={!isAnimating}).
-  // ownedWrite: handleAnimationEnd also fires from the animation effect cleanup when a
-  // mid-animation chart is disposed (route/soft navigation) — a legal teardown write.
-  const [showLabels, setShowLabels] = createSignal(true, { ownedWrite: true });
-  const handleAnimationStart = (): void => {
-    props.onAnimationStart?.();
-    setShowLabels(false);
-  };
-  const handleAnimationEnd = (): void => {
-    props.onAnimationEnd?.();
-    setShowLabels(true);
-  };
+  const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
+    () => props.onAnimationStart?.(),
+    () => props.onAnimationEnd?.(),
+  );
 
   // User pointer handlers are forwarded to each sector's wrapping <Layer>: the
   // mouse handlers wrap into the tooltip-item dispatch (called props-first), and
@@ -669,7 +651,7 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
             <Layer class={layerClass()}>
               <PolarLabelListContextProvider
                 value={() =>
-                  showLabels()
+                  !isAnimating()
                     ? secs().map(
                         (sector): PolarLabelListEntry => ({
                           value: sector.value,
@@ -730,7 +712,7 @@ export function RadialBar<DataPointType = Record<string, unknown>, DataValueType
                             isActive={isSectorActiveShape(i())}
                             option={sectorOption(i())}
                             animationElapsedTime={animationElapsedTime}
-                            isAnimating={!showLabels() || animationElapsedTime < 1}
+                            isAnimating={isAnimating() || animationElapsedTime < 1}
                             isEntrance={isEntrance}
                             class={`recharts-radial-bar-sector ${entry.class ?? ""}`}
                             fill={entry.fill ?? merged.fill}

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,
@@ -38,7 +38,7 @@ import {
   curveStepBefore,
   line as shapeLine,
   type Line as D3LineCurve,
-} from "victory-vendor/d3-shape";
+} from "d3-shape";
 import { isNumber, upperFirst } from "../util/DataUtils";
 import { isWellBehavedNumber } from "../util/isWellBehavedNumber";
 import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";
@@ -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,
@@ -20,7 +20,7 @@ import {
   symbolTriangle,
   symbolWye,
   type SymbolType as D3SymbolType,
-} from "victory-vendor/d3-shape";
+} from "d3-shape";
 import { SymbolType } from "../util/types";
 import { isNumber, upperFirst } from "../util/DataUtils";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
@@ -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()}
       />