solid-recharts 0.2.1 → 1.0.0

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,8 +12,8 @@
 // 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 { 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";
@@ -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,7 +117,10 @@ 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>
   );

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}
         />
       )}
@@ -113,7 +113,7 @@ export function Dots(props: DotsProps): JSX.Element {
             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. */}
-        <For each={props.points} keyed={false}>
+        <Index each={props.points}>
           {(entry, i) => (
             <DotRenderer
               entry={entry()}
@@ -125,7 +125,7 @@ export function Dots(props: DotsProps): JSX.Element {
               points={props.points}
             />
           )}
-        </For>
+        </Index>
       </Layer>
     </Show>
   );

package/src/component/Label.tsx

@@ -16,9 +16,9 @@
 //  - context value carries an `Accessor<TrapezoidViewBox>` (Solid context is fixed
 //    at provide-time; the accessor keeps the box reactive).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createContext, createMemo, merge, omit, Show, useContext } from "solid-js";
+import { createContext, createMemo, Show, useContext, mergeProps, splitProps } from "solid-js";
 import type { Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { type RenderableText, Text } from "./Text";
 import { useUniqueId } from "../util/useUniqueId";
 import { isNullish, isNumber, isNumOrStr } from "../util/DataUtils";
@@ -109,7 +109,11 @@ export function CartesianLabelContextProvider(
     width: props.width,
     height: props.height,
   }));
-  return <CartesianLabelContext value={viewBox}>{props.children}</CartesianLabelContext>;
+  return (
+    <CartesianLabelContext.Provider value={viewBox}>
+      {props.children}
+    </CartesianLabelContext.Provider>
+  );
 }
 
 export function useCartesianLabelContext(): Accessor<TrapezoidViewBox | undefined> {
@@ -141,7 +145,7 @@ export function PolarLabelContextProvider(
     endAngle: props.endAngle,
     clockWise: props.clockWise,
   }));
-  return <PolarLabelContext value={viewBox}>{props.children}</PolarLabelContext>;
+  return <PolarLabelContext.Provider value={viewBox}>{props.children}</PolarLabelContext.Provider>;
 }
 
 export function usePolarLabelContext(): Accessor<PolarViewBoxRequired | undefined> {
@@ -223,7 +227,7 @@ const getDeltaAngle = (startAngle: number, endAngle: number): number => {
  * @consumes CartesianLabelContext
  */
 export function Label(outerProps: Props): JSX.Element {
-  const props = merge(defaultLabelProps, outerProps);
+  const props = mergeProps(defaultLabelProps, outerProps);
   const cartesianViewBox = useCartesianLabelContext();
   const polarLabelContext = usePolarLabelContext();
   const generatedRadialPathId = useUniqueId("recharts-radial-line");
@@ -252,8 +256,7 @@ export function Label(outerProps: Props): JSX.Element {
 
   const textSvgProps = createMemo(() =>
     svgPropertiesAndEvents(
-      omit(
-        props,
+      splitProps(props, [
         "content",
         "viewBox",
         "parentViewBox",
@@ -267,7 +270,7 @@ export function Label(outerProps: Props): JSX.Element {
         "index",
         "id",
         "class",
-      ),
+      ])[1],
     ),
   );
 
@@ -389,7 +392,7 @@ export function Label(outerProps: Props): JSX.Element {
     if (vb == null || typeof content !== "function") {
       return undefined;
     }
-    return { content, args: omit({ ...props, viewBox: vb }, "content") };
+    return { content, args: splitProps({ ...props, viewBox: vb }, ["content"])[1] };
   });
 
   // Render the default/polar/radial text labels inline under <Show> (their render
@@ -441,7 +444,7 @@ export function Label(outerProps: Props): JSX.Element {
             <text
               {...textSvgProps()}
               dominant-baseline="central"
-              class={["recharts-radial-bar-label", props.class]}
+              class={["recharts-radial-bar-label", props.class].filter(Boolean).join(" ")}
             >
               <defs>
                 <path id={radialPathId()} d={d().path} />

package/src/component/LabelList.tsx

@@ -14,9 +14,9 @@
 //  - element `content` (React.cloneElement) DROPPED; function `content` kept.
 //  - ZIndexLayer / `fill`-passthrough deferred (Label forwards no per-label fill).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createContext, createMemo, For, omit, Show, useContext } from "solid-js";
+import { createContext, createMemo, For, Show, useContext, splitProps } from "solid-js";
 import type { Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import {
   type LabelContentType,
   type LabelFormatter,
@@ -135,7 +135,9 @@ export function CartesianLabelListContextProvider(props: {
   children: JSX.Element;
 }): JSX.Element {
   return (
-    <CartesianLabelListContext value={props.value}>{props.children}</CartesianLabelListContext>
+    <CartesianLabelListContext.Provider value={props.value}>
+      {props.children}
+    </CartesianLabelListContext.Provider>
   );
 }
 
@@ -147,7 +149,11 @@ export function PolarLabelListContextProvider(props: {
   value: Accessor<ReadonlyArray<PolarLabelListEntry> | undefined>;
   children: JSX.Element;
 }): JSX.Element {
-  return <PolarLabelListContext value={props.value}>{props.children}</PolarLabelListContext>;
+  return (
+    <PolarLabelListContext.Provider value={props.value}>
+      {props.children}
+    </PolarLabelListContext.Provider>
+  );
 }
 
 /**
@@ -165,8 +171,7 @@ export function LabelList(props: Props): JSX.Element {
     const list = cartesianData?.() ?? polarData?.();
     return list != null && list.length > 0 ? list : undefined;
   });
-  const others = omit(
-    props,
+  const others = splitProps(props, [
     "valueAccessor",
     "clockWise",
     "dataKey",
@@ -177,7 +182,7 @@ export function LabelList(props: Props): JSX.Element {
     "offset",
     "angle",
     "formatter",
-  );
+  ])[1];
 
   const valueOf = (
     entry: CartesianLabelListEntry | PolarLabelListEntry,