solid-recharts 0.2.0 → 1.0.0

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,

package/src/component/Legend.tsx

@@ -6,8 +6,9 @@
 // supported), onBBoxUpdate, React.memo. Solid deviations: createPortal →
 // `<Portal mount>`; useLayoutEffect dispatches → createEffect; hooks return
 // accessors; `className`→`class`, React CSSProperties → JSX.CSSProperties.
-import { createEffect, createMemo, merge, Show } from "solid-js";
-import { JSX, Portal } from "@solidjs/web";
+import { createMemo, Show, mergeProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
+import { DirectPortal } from "../util/DirectPortal";
 import {
   ContentType,
   DefaultLegendContent,
@@ -127,7 +128,7 @@ function getDefaultPosition(
 }
 
 export const Legend = (props: LegendProps): JSX.Element => {
-  const merged = merge(legendDefaultProps, props);
+  const merged = mergeProps(legendDefaultProps, props);
   const store = useAppStore();
   const contextPayload = useLegendPayload();
   const legendPortalFromContext = useLegendPortal();
@@ -138,26 +139,30 @@ export const Legend = (props: LegendProps): JSX.Element => {
 
   // Push the legend settings into the store (drives the offset's legend space).
   createEffect(
-    () => ({
-      align: merged.align,
-      layout: merged.layout,
-      verticalAlign: merged.verticalAlign,
-      itemSorter: merged.itemSorter,
-    }),
-    (settings) => {
-      store?.actions.legend.setLegendSettings(settings);
-    },
+    on(
+      () => ({
+        align: merged.align,
+        layout: merged.layout,
+        verticalAlign: merged.verticalAlign,
+        itemSorter: merged.itemSorter,
+      }),
+      (settings) => {
+        store?.actions.legend.setLegendSettings(settings);
+      },
+    ),
   );
 
   // Report the measured size; reset to 0 on cleanup. (When a portal is supplied
   // from props, nothing needs the size, matching recharts.)
   createEffect(
-    () => ({ width: lastBoundingBox().width, height: lastBoundingBox().height }),
-    (size) => {
-      if (props.portal == null) {
-        store?.actions.legend.setLegendSize(size);
-      }
-    },
+    on(
+      () => ({ width: lastBoundingBox().width, height: lastBoundingBox().height }),
+      (size) => {
+        if (props.portal == null) {
+          store?.actions.legend.setLegendSize(size);
+        }
+      },
+    ),
   );
 
   const portal = (): HTMLElement | null => props.portal ?? legendPortalFromContext();
@@ -167,7 +172,7 @@ export const Legend = (props: LegendProps): JSX.Element => {
   );
 
   // Props handed to a function-form `content`. Built as a plain object (spreading
-  // the Solid `merge()` proxy leaks a MERGE_SOURCE symbol and doesn't materialize
+  // the Solid `mergeProps()` proxy leaks a MERGE_SOURCE symbol and doesn't materialize
   // keys); reads finalPayload()/chart dims so the enclosing reactive insert re-runs
   // when the payload populates.
   const buildContentProps = (): LegendContentProps => {
@@ -242,7 +247,7 @@ export const Legend = (props: LegendProps): JSX.Element => {
       }
     >
       {(mount) => (
-        <Portal mount={mount()}>
+        <DirectPortal mount={mount()}>
           <div class="recharts-legend-wrapper" style={outerStyle()} ref={updateBoundingBox}>
             <Show
               when={typeof merged.content === "function" ? merged.content : null}
@@ -266,7 +271,7 @@ export const Legend = (props: LegendProps): JSX.Element => {
               {(contentFn) => <>{contentFn()(buildContentProps())}</>}
             </Show>
           </div>
-        </Portal>
+        </DirectPortal>
       )}
     </Show>
   );

package/src/component/ResponsiveContainer.tsx

@@ -3,18 +3,19 @@
 // prop, and two-arg createEffect. Prop deviation: className -> class.
 import {
   Accessor,
+  batch,
   createContext,
-  createEffect,
   createMemo,
   createSignal,
-  flush,
-  omit,
   onCleanup,
-  onSettled,
+  onMount,
   untrack,
   useContext,
+  splitProps,
+  createEffect,
+  on,
 } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import {
   calculateChartDimensions,
   defaultResponsiveContainerProps,
@@ -93,9 +94,9 @@ function ResponsiveContainerContextProvider(props: {
   });
 
   return (
-    <ResponsiveContainerContext value={size}>
+    <ResponsiveContainerContext.Provider value={size}>
       {size() == null ? null : props.children}
-    </ResponsiveContainerContext>
+    </ResponsiveContainerContext.Provider>
   );
 }
 
@@ -181,8 +182,7 @@ function SizeDetectorContainer(props: Props): JSX.Element {
   // forwarded onto the wrapper div, mirroring recharts' `{...others}` spread.
   // We omit every prop this component consumes itself so they don't leak onto
   // the DOM. (`omit` keeps the rest reactive — no destructuring.)
-  const others = omit(
-    props,
+  const others = splitProps(props, [
     "aspect",
     "width",
     "height",
@@ -198,7 +198,7 @@ function SizeDetectorContainer(props: Props): JSX.Element {
     "onResize",
     "ref",
     "data-testid",
-  );
+  ])[1];
   const initialDimension = (): { width: number; height: number } =>
     props.initialDimension ?? defaultResponsiveContainerProps.initialDimension;
   const width = (): Percent | number | undefined => props.width;
@@ -217,13 +217,14 @@ function SizeDetectorContainer(props: Props): JSX.Element {
     if (untrack(containerWidth) === roundedWidth && untrack(containerHeight) === roundedHeight) {
       return;
     }
-    setContainerWidth(roundedWidth);
-    setContainerHeight(roundedHeight);
+    batch(() => {
+      setContainerWidth(roundedWidth);
+      setContainerHeight(roundedHeight);
+    });
   };
 
   const setContainerSize = (newWidth: number, newHeight: number): void => {
     writeContainerSize(newWidth, newHeight);
-    flush();
   };
 
   let containerEl: HTMLDivElement | undefined;
@@ -240,10 +241,8 @@ function SizeDetectorContainer(props: Props): JSX.Element {
   // i.e. AFTER the committed DOM is laid out. The ref callback runs at element
   // creation (possibly before insertion/layout), where getBoundingClientRect()
   // returns 0x0 and a bogus "width(0) and height(0)" warning fires on every
-  // mount. `onSettled` is the post-layout equivalent. The initial measure must
-  // not flush (onSettled is a leaf scope); the write propagates at the next
-  // flush boundary, matching React's setState-in-effect timing.
-  onSettled(() => {
+  // mount. Measure after insertion in onMount.
+  onMount(() => {
     const el = containerEl;
     if (el == null || typeof ResizeObserver === "undefined") {
       return;
@@ -292,49 +291,53 @@ function SizeDetectorContainer(props: Props): JSX.Element {
     ]);
 
   createEffect(
-    () => props.aspect,
-    (aspect) => {
-      warn(!aspect || aspect > 0, "The aspect(%s) must be greater than zero.", aspect);
-    },
+    on(
+      () => props.aspect,
+      (aspect) => {
+        warn(!aspect || aspect > 0, "The aspect(%s) must be greater than zero.", aspect);
+      },
+    ),
   );
 
   createEffect(
-    () => ({
-      containerWidth: containerWidth(),
-      containerHeight: containerHeight(),
-      calculatedWidth: calculated().calculatedWidth,
-      calculatedHeight: calculated().calculatedHeight,
-      width: width(),
-      height: height(),
-      minWidth: minWidth(),
-      minHeight: props.minHeight,
-      aspect: props.aspect,
-    }),
-    (value) => {
-      warn(
-        value.containerWidth < 0 ||
-          value.containerHeight < 0 ||
-          (value.calculatedWidth != null && value.calculatedWidth > 0) ||
-          (value.calculatedHeight != null && value.calculatedHeight > 0),
-        `The width(%s) and height(%s) of chart should be greater than 0,
+    on(
+      () => ({
+        containerWidth: containerWidth(),
+        containerHeight: containerHeight(),
+        calculatedWidth: calculated().calculatedWidth,
+        calculatedHeight: calculated().calculatedHeight,
+        width: width(),
+        height: height(),
+        minWidth: minWidth(),
+        minHeight: props.minHeight,
+        aspect: props.aspect,
+      }),
+      (value) => {
+        warn(
+          value.containerWidth < 0 ||
+            value.containerHeight < 0 ||
+            (value.calculatedWidth != null && value.calculatedWidth > 0) ||
+            (value.calculatedHeight != null && value.calculatedHeight > 0),
+          `The width(%s) and height(%s) of chart should be greater than 0,
        please check the style of container, or the props width(%s) and height(%s),
        or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the
        height and width.`,
-        value.calculatedWidth,
-        value.calculatedHeight,
-        value.width,
-        value.height,
-        value.minWidth,
-        value.minHeight,
-        value.aspect,
-      );
-    },
+          value.calculatedWidth,
+          value.calculatedHeight,
+          value.width,
+          value.height,
+          value.minWidth,
+          value.minHeight,
+          value.aspect,
+        );
+      },
+    ),
   );
 
   return (
     <div
       id={props.id ? `${props.id}` : undefined}
-      class={["recharts-responsive-container", props.class]}
+      class={["recharts-responsive-container", props.class].filter(Boolean).join(" ")}
       style={wrapperStyle()}
       ref={setRef}
       data-testid={props["data-testid"]}

package/src/component/Text.tsx

@@ -8,8 +8,8 @@
 // SVG passthrough props go through svgPropertiesAndEvents like the shape ports;
 // `React.ReactNode` children → `RenderableText`.
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { createMemo, For, merge, omit, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createMemo, For, Show, mergeProps, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
 import type { Properties as CSSProperties } from "csstype";
 import { isNullish, isNumber, isNumOrStr } from "../util/DataUtils";
 import { Global } from "../util/Global";
@@ -314,7 +314,7 @@ const HANDLED_KEYS = [
 ] as const;
 
 export const Text = (props: Props): JSX.Element => {
-  const merged = merge(textDefaultProps, props);
+  const merged = mergeProps(textDefaultProps, props);
 
   const wordsByLines = createMemo<ReadonlyArray<Words>>(() =>
     getWordsByLines({
@@ -383,7 +383,7 @@ export const Text = (props: Props): JSX.Element => {
 
     // Pass-through SVG props (everything except the handled keys); the computed
     // transform is applied as its own attribute on the <text> below.
-    const rest = omit(merged, ...HANDLED_KEYS);
+    const rest = splitProps(merged, [...HANDLED_KEYS])[1];
 
     const textProps: Record<string, unknown> = {
       ...rest,
@@ -418,7 +418,7 @@ export const Text = (props: Props): JSX.Element => {
           x={g().x}
           y={g().y}
           transform={g().transform}
-          class={["recharts-text", g().class]}
+          class={["recharts-text", g().class].filter(Boolean).join(" ")}
           text-anchor={g().textAnchor}
           fill={g().fill}
         >

package/src/component/Tooltip.tsx

@@ -9,8 +9,9 @@
 // createEffect; React `createPortal` → `<Portal mount>`; selectors are read via
 // useAppSelector accessors; `useElementOffset`'s dependency array is a no-op in
 // the Solid port (the ResizeObserver tracks the node directly).
-import { createEffect, createMemo, merge, Show } from "solid-js";
-import { JSX, Portal } from "@solidjs/web";
+import { createMemo, Show, mergeProps, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
+import { DirectPortal } from "../util/DirectPortal";
 import {
   DefaultTooltipContent,
   Formatter,
@@ -148,7 +149,7 @@ function renderContent(content: ContentType | undefined, props: TooltipContentPr
  * interaction or, before any interaction, from `defaultIndex`.
  */
 export const Tooltip = (props: TooltipProps): JSX.Element => {
-  const merged = merge(defaultTooltipProps, props);
+  const merged = mergeProps(defaultTooltipProps, props);
   const store = useAppStore();
   const viewBox = useViewBox();
   const accessibilityLayer = useAccessibilityLayer();
@@ -158,7 +159,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
   const defaultIndexAsString = (): TooltipIndex | undefined =>
     typeof merged.defaultIndex === "number" ? String(merged.defaultIndex) : merged.defaultIndex;
 
-  // merge() keeps an explicit `trigger={undefined}` as undefined (unlike React's
+  // mergeProps() keeps an explicit `trigger={undefined}` as undefined (unlike React's
   // resolveDefaultProps, which would apply the default). The interaction selectors
   // gate on `trigger === "hover"`, so resolve the default explicitly.
   const resolvedTrigger = (): TooltipTrigger => merged.trigger ?? defaultTooltipProps.trigger;
@@ -166,16 +167,18 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
   // Push the Tooltip's settings into the store so the interaction selectors can
   // read shared/trigger/axisId/active/defaultIndex.
   createEffect(
-    () => ({
-      shared: merged.shared,
-      trigger: resolvedTrigger(),
-      axisId: merged.axisId,
-      active: merged.active,
-      defaultIndex: defaultIndexAsString(),
-    }),
-    (settings) => {
-      store?.actions.tooltip.setTooltipSettingsState(settings);
-    },
+    on(
+      () => ({
+        shared: merged.shared,
+        trigger: resolvedTrigger(),
+        axisId: merged.axisId,
+        active: merged.active,
+        defaultIndex: defaultIndexAsString(),
+      }),
+      (settings) => {
+        store?.actions.tooltip.setTooltipSettingsState(settings);
+      },
+    ),
   );
 
   const tooltipEventType = useAppSelector((state) => selectTooltipEventType(state, merged.shared));
@@ -244,7 +247,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
       </Show>
       <Show when={viewBox() && tooltipEventType() && portal()}>
         {(mount) => {
-          // Built as a plain object (spreading the Solid merge() proxy leaks a
+          // Built as a plain object (spreading the Solid mergeProps() proxy leaks a
           // MERGE_SOURCE symbol into the bag handed to a function-form `content`).
           const contentProps = (): TooltipContentProps => ({
             accessibilityLayer: accessibilityLayer(),
@@ -262,7 +265,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
             formatter: merged.formatter,
             includeHidden: merged.includeHidden,
             isAnimationActive: merged.isAnimationActive,
-            // merge() leaves explicit `undefined`; React defaultProps would still apply defaults.
+            // mergeProps() leaves explicit `undefined`; React defaultProps would still apply defaults.
             itemSorter: props.itemSorter ?? defaultTooltipProps.itemSorter,
             itemStyle: merged.itemStyle,
             label: finalLabel(),
@@ -279,7 +282,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
             wrapperStyle: merged.wrapperStyle,
           });
           return (
-            <Portal mount={mount()}>
+            <DirectPortal mount={mount()}>
               <TooltipBoundingBox
                 allowEscapeViewBox={merged.allowEscapeViewBox}
                 animationDuration={merged.animationDuration}
@@ -300,7 +303,7 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
               >
                 {renderContent(merged.content, contentProps())}
               </TooltipBoundingBox>
-            </Portal>
+            </DirectPortal>
           );
         }}
       </Show>

package/src/component/TooltipBoundingBox.tsx

@@ -1,14 +1,14 @@
 // Ported from recharts 3.8.1 src/component/TooltipBoundingBox.tsx (commit 7a23854).
 //
 // Deviations: React.useState → createSignal; the keydown (Escape-to-dismiss)
-// listener moves from useEffect to onSettled (single listener; the handler reads
+// listener moves from useEffect to onMount (single listener; the handler reads
 // the live props.coordinate at event time); the "reset dismissed when the
 // coordinate moves" inline setState becomes a createEffect; `React.memo` dropped
 // (Solid is fine-grained); `className`→`class`, `tabIndex`→`tabindex`, React
 // CSSProperties → JSX.CSSProperties (kebab keys); the `xmlns` attribute is dropped
 // (the tooltip renders into an HTML portal div, not inside the SVG).
-import { createEffect, createSignal, onSettled } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import { createSignal, onCleanup, onMount, createEffect, on } from "solid-js";
+import type { JSX } from "solid-js";
 import {
   AllowInDimension,
   AnimationDuration,
@@ -77,31 +77,33 @@ export const TooltipBoundingBox = (props: TooltipBoundingBoxProps): JSX.Element
     y: props.coordinate?.y ?? 0,
   });
 
-  onSettled(() => {
+  onMount(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setState({ dismissed: true, dismissedAtCoordinate: coordinate() });
       }
     };
     document.addEventListener("keydown", handleKeyDown);
-    return () => {
+    onCleanup(() => {
       document.removeEventListener("keydown", handleKeyDown);
-    };
+    });
   });
 
   // Re-show after dismissal once the coordinate moves to a new spot. Both the
   // coordinate and the dismiss state are read in the compute (a tracking scope);
   // the apply only writes, so no untracked read fires.
   createEffect(
-    () => ({ coord: coordinate(), st: state() }),
-    ({ coord, st }) => {
-      if (
-        st.dismissed &&
-        (coord.x !== st.dismissedAtCoordinate.x || coord.y !== st.dismissedAtCoordinate.y)
-      ) {
-        setState({ ...st, dismissed: false });
-      }
-    },
+    on(
+      () => ({ coord: coordinate(), st: state() }),
+      ({ coord, st }) => {
+        if (
+          st.dismissed &&
+          (coord.x !== st.dismissedAtCoordinate.x || coord.y !== st.dismissedAtCoordinate.y)
+        ) {
+          setState({ ...st, dismissed: false });
+        }
+      },
+    ),
   );
 
   const translate = (): { cssProperties: JSX.CSSProperties; cssClasses: string } =>
@@ -145,7 +147,7 @@ export const TooltipBoundingBox = (props: TooltipBoundingBoxProps): JSX.Element
   };
 
   return (
-    <div tabindex={-1} class={translate().cssClasses} style={outerStyle()} ref={props.innerRef}>
+    <div tabIndex={-1} class={translate().cssClasses} style={outerStyle()} ref={props.innerRef}>
       {props.children}
     </div>
   );

package/src/component/responsiveContainerUtils.ts

@@ -2,7 +2,7 @@
 // Deviations: `CSSProperties` from csstype (camelCase, matching React's), and the
 // `satisfies Partial<Props>` on the defaults is dropped (the ResponsiveContainer
 // component is deferred) — kept as `as const`.
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { isPercent } from "../util/DataUtils";
 import type { Percent } from "../util/types";
 

package/src/container/ClipPathProvider.tsx

@@ -4,7 +4,7 @@
 // once); `return null` when no plot area → keyed `<Show>`; context-value-is-
 // provider; default `null` (not undefined, which would make `useContext` throw).
 import { createContext, useContext, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { uniqueId } from "../util/DataUtils";
 import { usePlotArea } from "../hooks";
 
@@ -24,14 +24,14 @@ export const ClipPathProvider = (props: { children: JSX.Element }): JSX.Element
   return (
     <Show when={plotArea()}>
       {(area) => (
-        <ClipPathIdContext value={clipPathId}>
+        <ClipPathIdContext.Provider value={clipPathId}>
           <defs>
             <clipPath id={clipPathId}>
               <rect x={area().x} y={area().y} height={area().height} width={area().width} />
             </clipPath>
           </defs>
           {props.children}
-        </ClipPathIdContext>
+        </ClipPathIdContext.Provider>
       )}
     </Show>
   );

package/src/container/Layer.tsx

@@ -1,9 +1,9 @@
+import { splitProps } from "solid-js";
 // Ported from recharts 3.8.1 src/container/Layer.tsx (commit 7a23854).
 // Solid deviations: `className` → `class` (Omit the wide SVG `class`); `clsx` →
-// `class={[...]}`; `forwardRef` → `ref` prop; no destructuring (omit + props).
+// `class={[...].filter(Boolean).join(" ")}`; `forwardRef` → `ref` prop; no destructuring (omit + props).
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
 
 interface LayerOwnProps {
@@ -28,8 +28,8 @@ export type LayerProps = Omit<
 export const Layer = (props: LayerProps): JSX.Element => {
   return (
     <g
-      class={["recharts-layer", props.class]}
-      {...svgPropertiesAndEvents({ ...omit(props, "class", "children", "ref") })}
+      class={["recharts-layer", props.class].filter(Boolean).join(" ")}
+      {...svgPropertiesAndEvents({ ...splitProps(props, ["class", "children", "ref"])[1] })}
       ref={props.ref}
     >
       {props.children}