solid-recharts 0.2.1 → 1.0.0

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}

package/src/container/RootSurface.tsx

@@ -4,7 +4,7 @@
 // hooks return Accessors → call them; `return null` → keyed `<Show>` (which also
 // narrows width/height to numbers without a non-null `!`).
 import { Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useChartHeight, useChartWidth } from "../context/chartLayoutContext";
 import { useAccessibilityLayer } from "../context/accessibilityContext";
 import { useIsPanorama } from "../context/PanoramaContext";

package/src/container/Surface.tsx

@@ -1,7 +1,7 @@
+import { splitProps } from "solid-js";
 import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
 import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
-import { omit } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 
 export interface CartesianViewBox {
   x?: number;
@@ -37,8 +37,7 @@ export type SurfaceProps = Omit<
  */
 export const Surface = (props: SurfaceProps) => {
   const svgView = () => props.viewBox ?? { width: props.width, height: props.height, x: 0, y: 0 };
-  const rest = omit(
-    props,
+  const rest = splitProps(props, [
     "children",
     "width",
     "height",
@@ -48,14 +47,14 @@ export const Surface = (props: SurfaceProps) => {
     "title",
     "desc",
     "ref",
-  );
+  ])[1];
 
   // Parity with recharts Surface: the passthrough props go through the SVG
   // filter (camelCase props → DOM attribute names), not a verbatim spread.
   return (
     <svg
       {...svgPropertiesAndEvents({ ...rest })}
-      class={["recharts-surface", props.class]}
+      class={["recharts-surface", props.class].filter(Boolean).join(" ")}
       width={props.width}
       height={props.height}
       style={props.style}

package/src/context/ErrorBarContext.tsx

@@ -9,7 +9,7 @@
 // cleanup remove → createEffect + onCleanup. useGraphicalItemId provides the id.
 import { createContext, useContext } from "solid-js";
 import type { Accessor } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { AxisId } from "../state/cartesianAxisSlice";
 import type { ErrorBarDataPointFormatter } from "../cartesian/ErrorBar";
 import type { ErrorBarsSettings } from "../state/errorBarSlice";
@@ -45,7 +45,7 @@ export function SetErrorBarContext(
     dataPointFormatter: props.dataPointFormatter,
     errorBarOffset: props.errorBarOffset,
   });
-  return <ErrorBarContext value={value}>{props.children}</ErrorBarContext>;
+  return <ErrorBarContext.Provider value={value}>{props.children}</ErrorBarContext.Provider>;
 }
 
 export const useErrorBarContext = (): Accessor<ErrorBarContextValue> => useContext(ErrorBarContext);

package/src/context/PanoramaContext.tsx

@@ -2,12 +2,12 @@
 // Context-value-is-provider in Solid 2.0; default `null` (a real value) so
 // `useContext` returns it without throwing outside a provider.
 import { createContext, useContext } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 
 const PanoramaContext = createContext<boolean | null>(null);
 
 export const useIsPanorama = (): boolean => useContext(PanoramaContext) != null;
 
 export const PanoramaContextProvider = (props: { children: JSX.Element }): JSX.Element => (
-  <PanoramaContext value={true}>{props.children}</PanoramaContext>
+  <PanoramaContext.Provider value={true}>{props.children}</PanoramaContext.Provider>
 );

package/src/context/RegisterGraphicalItemId.tsx

@@ -8,7 +8,7 @@
 // Not yet adopted by <Line> (which currently generates its own id inline); this
 // is the shared primitive for graphical items (Line/Bar/Area/Scatter) to use.
 import { createContext, useContext } from "solid-js";
-import type { JSX } from "@solidjs/web";
+import type { JSX } from "solid-js";
 import { useUniqueId } from "../util/useUniqueId";
 import { GraphicalItemId } from "../state/graphicalItemsSlice";
 
@@ -32,7 +32,9 @@ const GraphicalItemIdContext = createContext<GraphicalItemId | null>(null);
 export const RegisterGraphicalItemId = (props: IdSetter): JSX.Element => {
   const resolvedId = useUniqueId(`recharts-${props.type}`, props.id);
   return (
-    <GraphicalItemIdContext value={resolvedId}>{props.children(resolvedId)}</GraphicalItemIdContext>
+    <GraphicalItemIdContext.Provider value={resolvedId}>
+      {props.children(resolvedId)}
+    </GraphicalItemIdContext.Provider>
   );
 };