solid-recharts 0.1.0

package/src/component/Tooltip.tsx

@@ -0,0 +1,309 @@
+// Ported from recharts 3.8.1 src/component/Tooltip.tsx (commit 7a23854).
+//
+// FIRST-LIGHT PORT — renders the floating tooltip box from the active payload.
+// Deferred (documented): the <Cursor> highlight (task #19), cross-chart sync
+// (useTooltipChartSynchronisation), per-entry custom `content` ELEMENT cloning
+// (React.cloneElement has no Solid equivalent — a function `content` is supported,
+// an element `content` is rendered as-is without prop injection). Solid
+// deviations: `resolveDefaultProps`→`merge`; the settings-dispatch useEffect →
+// 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 {
+  DefaultTooltipContent,
+  Formatter,
+  NameType,
+  Payload,
+  Props as DefaultTooltipContentProps,
+  TooltipItemSorter,
+  ValueType,
+} from "./DefaultTooltipContent";
+import { TooltipBoundingBox } from "./TooltipBoundingBox";
+import { Cursor, CursorDefinition } from "./Cursor";
+import { getUniqPayload, UniqueOption } from "../util/payload/getUniqPayload";
+import { AllowInDimension, AnimationDuration, Coordinate, EasingInput } from "../util/types";
+import { useViewBox } from "../context/chartLayoutContext";
+import { useAccessibilityLayer } from "../context/accessibilityContext";
+import { useElementOffset } from "../util/useElementOffset";
+import { useTooltipPortal } from "../context/tooltipPortalContext";
+import { TooltipTrigger } from "../chart/types";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import { TooltipIndex, TooltipPayload, TooltipPayloadEntry } from "../state/tooltipSlice";
+import { AxisId } from "../state/cartesianAxisSlice";
+import { selectTooltipEventType } from "../state/selectors/selectTooltipEventType";
+import {
+  selectActiveCoordinate,
+  selectActiveLabel,
+  selectIsTooltipActive,
+  selectTooltipPayload,
+} from "../state/selectors/tooltipSelectors";
+import { useTooltipChartSynchronisation } from "../synchronisation/useChartSynchronisation";
+
+export type TooltipContentProps = TooltipProps & {
+  label?: string | number;
+  payload: TooltipPayload;
+  coordinate: Coordinate | undefined;
+  active: boolean;
+  accessibilityLayer: boolean;
+  activeIndex: TooltipIndex | undefined;
+};
+
+export type ContentType = JSX.Element | ((props: TooltipContentProps) => JSX.Element);
+
+function defaultUniqBy(
+  entry: Payload<ValueType, NameType>,
+): Payload<ValueType, NameType>["dataKey"] {
+  return entry.dataKey;
+}
+
+type PropertiesReadFromContext =
+  | "active"
+  | "payload"
+  | "coordinate"
+  | "label"
+  | "accessibilityLayer";
+
+export type TooltipProps = Omit<DefaultTooltipContentProps, PropertiesReadFromContext> & {
+  active?: boolean;
+  allowEscapeViewBox?: AllowInDimension;
+  animationDuration?: AnimationDuration;
+  animationEasing?: EasingInput;
+  axisId?: AxisId;
+  content?: ContentType;
+  cursor?: CursorDefinition;
+  defaultIndex?: number | TooltipIndex;
+  filterNull?: boolean;
+  formatter?: Formatter;
+  includeHidden?: boolean;
+  isAnimationActive?: boolean | "auto";
+  itemSorter?: TooltipItemSorter;
+  offset?: number | Coordinate;
+  payloadUniqBy?: UniqueOption<TooltipPayloadEntry>;
+  portal?: HTMLElement | null;
+  position?: Partial<Coordinate>;
+  reverseDirection?: AllowInDimension;
+  separator?: string;
+  shared?: boolean;
+  trigger?: TooltipTrigger;
+  useTranslate3d?: boolean;
+  wrapperStyle?: JSX.CSSProperties;
+};
+
+const emptyPayload: TooltipPayload = [];
+
+export const defaultTooltipProps = {
+  allowEscapeViewBox: { x: false, y: false },
+  animationDuration: 400,
+  animationEasing: "ease",
+  axisId: 0,
+  contentStyle: {},
+  cursor: true,
+  filterNull: true,
+  includeHidden: false,
+  isAnimationActive: "auto",
+  itemSorter: "name",
+  itemStyle: {},
+  labelStyle: {},
+  offset: 10,
+  reverseDirection: { x: false, y: false },
+  separator: " : ",
+  trigger: "hover",
+  useTranslate3d: false,
+  wrapperStyle: {},
+} as const satisfies Partial<TooltipProps>;
+
+function renderContent(content: ContentType | undefined, props: TooltipContentProps): JSX.Element {
+  if (typeof content === "function") {
+    return content(props);
+  }
+  if (content != null) {
+    // Deviation: React clones the element and injects props; Solid has no
+    // cloneElement, so a provided element renders as-is (prop injection is N/A
+    // by design — use the function form for injected props).
+    return content;
+  }
+  return (
+    <DefaultTooltipContent
+      separator={props.separator}
+      contentStyle={props.contentStyle}
+      itemStyle={props.itemStyle}
+      labelStyle={props.labelStyle}
+      wrapperClass={props.wrapperClass}
+      labelClass={props.labelClass}
+      formatter={props.formatter}
+      labelFormatter={props.labelFormatter}
+      label={props.label}
+      payload={props.payload}
+      itemSorter={props.itemSorter}
+      accessibilityLayer={props.accessibilityLayer}
+    />
+  );
+}
+
+/**
+ * Displays a floating box with the active data values. For cartesian charts it
+ * attaches to the categorical axis; the active point comes from mouse/keyboard
+ * interaction or, before any interaction, from `defaultIndex`.
+ */
+export const Tooltip = (props: TooltipProps): JSX.Element => {
+  const merged = merge(defaultTooltipProps, props);
+  const store = useAppStore();
+  const viewBox = useViewBox();
+  const accessibilityLayer = useAccessibilityLayer();
+  const tooltipPortalFromContext = useTooltipPortal();
+  const [lastBoundingBox, updateBoundingBox] = useElementOffset();
+
+  const defaultIndexAsString = (): TooltipIndex | undefined =>
+    typeof merged.defaultIndex === "number" ? String(merged.defaultIndex) : merged.defaultIndex;
+
+  // merge() 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;
+
+  // 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);
+    },
+  );
+
+  const tooltipEventType = useAppSelector((state) => selectTooltipEventType(state, merged.shared));
+  const activeState = useAppSelector((state) =>
+    selectIsTooltipActive(state, tooltipEventType(), resolvedTrigger(), defaultIndexAsString()),
+  );
+  const payloadFromState = useAppSelector((state) =>
+    selectTooltipPayload(state, tooltipEventType(), resolvedTrigger(), defaultIndexAsString()),
+  );
+  const labelFromState = useAppSelector((state) =>
+    selectActiveLabel(state, tooltipEventType(), resolvedTrigger(), defaultIndexAsString()),
+  );
+  const coordinate = useAppSelector((state) =>
+    selectActiveCoordinate(state, tooltipEventType(), resolvedTrigger(), defaultIndexAsString()),
+  );
+
+  const finalIsActive = (): boolean => merged.active ?? activeState()?.isActive ?? false;
+  const finalLabel = (): string | number | undefined =>
+    tooltipEventType() === "axis" ? labelFromState() : undefined;
+
+  // Emit cross-chart tooltip sync events when this chart's active tooltip
+  // changes (no-op unless a syncId is set). Mirrors recharts' Tooltip call.
+  useTooltipChartSynchronisation(
+    tooltipEventType,
+    resolvedTrigger,
+    coordinate,
+    finalLabel,
+    () => activeState()?.activeIndex ?? undefined,
+    finalIsActive,
+  );
+
+  const finalPayload = createMemo<TooltipPayload>(() => {
+    if (!finalIsActive()) {
+      return emptyPayload;
+    }
+    const payload = payloadFromState() ?? emptyPayload;
+    const filterNull = props.filterNull ?? defaultTooltipProps.filterNull;
+    if (filterNull && payload.length) {
+      return getUniqPayload(
+        payload.filter(
+          (entry) => entry.value != null && (entry.hide !== true || merged.includeHidden),
+        ),
+        merged.payloadUniqBy,
+        defaultUniqBy,
+      );
+    }
+    return payload;
+  });
+
+  const portal = (): HTMLElement | null => props.portal ?? tooltipPortalFromContext();
+
+  return (
+    <>
+      {/* The cursor is an SVG highlight (renders inline, NOT in the HTML portal),
+          shown alongside the box while the tooltip is active. */}
+      <Show when={finalIsActive() ? tooltipEventType() : undefined}>
+        {(eventType) => (
+          <Cursor
+            cursor={merged.cursor}
+            tooltipEventType={eventType()}
+            coordinate={coordinate()}
+            payload={finalPayload()}
+            index={activeState()?.activeIndex ?? undefined}
+          />
+        )}
+      </Show>
+      <Show when={viewBox() && tooltipEventType() && portal()}>
+        {(mount) => {
+          // Built as a plain object (spreading the Solid merge() proxy leaks a
+          // MERGE_SOURCE symbol into the bag handed to a function-form `content`).
+          const contentProps = (): TooltipContentProps => ({
+            accessibilityLayer: accessibilityLayer(),
+            active: finalIsActive(),
+            activeIndex: activeState()?.activeIndex ?? undefined,
+            allowEscapeViewBox: merged.allowEscapeViewBox,
+            animationDuration: merged.animationDuration,
+            animationEasing: merged.animationEasing,
+            axisId: merged.axisId,
+            content: merged.content,
+            contentStyle: merged.contentStyle,
+            coordinate: coordinate(),
+            cursor: merged.cursor,
+            filterNull: merged.filterNull,
+            formatter: merged.formatter,
+            includeHidden: merged.includeHidden,
+            isAnimationActive: merged.isAnimationActive,
+            // merge() leaves explicit `undefined`; React defaultProps would still apply defaults.
+            itemSorter: props.itemSorter ?? defaultTooltipProps.itemSorter,
+            itemStyle: merged.itemStyle,
+            label: finalLabel(),
+            labelStyle: merged.labelStyle,
+            labelFormatter: merged.labelFormatter,
+            offset: merged.offset,
+            payload: finalPayload(),
+            payloadUniqBy: merged.payloadUniqBy,
+            position: merged.position,
+            reverseDirection: merged.reverseDirection,
+            separator: merged.separator,
+            trigger: merged.trigger,
+            useTranslate3d: merged.useTranslate3d,
+            wrapperStyle: merged.wrapperStyle,
+          });
+          return (
+            <Portal mount={mount()}>
+              <TooltipBoundingBox
+                allowEscapeViewBox={merged.allowEscapeViewBox}
+                animationDuration={merged.animationDuration}
+                animationEasing={merged.animationEasing}
+                isAnimationActive={merged.isAnimationActive}
+                active={finalIsActive()}
+                coordinate={coordinate()}
+                hasPayload={finalPayload().length > 0}
+                offset={merged.offset}
+                position={merged.position}
+                reverseDirection={merged.reverseDirection}
+                useTranslate3d={merged.useTranslate3d}
+                viewBox={viewBox() ?? { x: 0, y: 0, width: 0, height: 0 }}
+                wrapperStyle={merged.wrapperStyle}
+                lastBoundingBox={lastBoundingBox()}
+                innerRef={updateBoundingBox}
+                hasPortalFromProps={Boolean(props.portal)}
+              >
+                {renderContent(merged.content, contentProps())}
+              </TooltipBoundingBox>
+            </Portal>
+          );
+        }}
+      </Show>
+    </>
+  );
+};

package/src/component/TooltipBoundingBox.tsx

@@ -0,0 +1,152 @@
+// 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
+// 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 {
+  AllowInDimension,
+  AnimationDuration,
+  CartesianViewBox,
+  Coordinate,
+  EasingInput,
+  PolarCoordinate,
+} from "../util/types";
+import { ElementOffset, SetElementOffset } from "../util/useElementOffset";
+import { getTooltipTranslate } from "../util/tooltip/translate";
+import { usePrefersReducedMotion } from "../util/usePrefersReducedMotion";
+
+export type TooltipBoundingBoxProps = {
+  active: boolean;
+  allowEscapeViewBox: AllowInDimension;
+  animationDuration: AnimationDuration;
+  animationEasing: EasingInput;
+  children: JSX.Element;
+  coordinate: Coordinate | PolarCoordinate | undefined;
+  hasPayload: boolean;
+  isAnimationActive: boolean | "auto";
+  offset: number | Coordinate;
+  position: Partial<Coordinate> | undefined;
+  reverseDirection: AllowInDimension;
+  useTranslate3d: boolean;
+  viewBox: CartesianViewBox;
+  wrapperStyle: JSX.CSSProperties;
+  lastBoundingBox: ElementOffset;
+  innerRef: SetElementOffset;
+  hasPortalFromProps: boolean;
+};
+
+function resolveTransitionProperty(args: {
+  prefersReducedMotion: boolean;
+  isAnimationActive: boolean | "auto";
+  active: boolean;
+  animationDuration: number;
+  animationEasing: EasingInput;
+}): `transform ${number}ms ${string}` | undefined {
+  if (args.prefersReducedMotion && args.isAnimationActive === "auto") {
+    return undefined;
+  }
+  if (args.isAnimationActive && args.active) {
+    const easing = typeof args.animationEasing === "string" ? args.animationEasing : "ease";
+    return `transform ${args.animationDuration}ms ${easing}`;
+  }
+  return undefined;
+}
+
+type DismissState = {
+  dismissed: boolean;
+  dismissedAtCoordinate: { x: number; y: number };
+};
+
+export const TooltipBoundingBox = (props: TooltipBoundingBoxProps): JSX.Element => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [state, setState] = createSignal<DismissState>({
+    dismissed: false,
+    dismissedAtCoordinate: { x: 0, y: 0 },
+  });
+
+  // Track the live coordinate so the keydown handler (which fires outside any
+  // tracking scope) reads it without a STRICT_READ_UNTRACKED.
+  const coordinate = (): { x: number; y: number } => ({
+    x: props.coordinate?.x ?? 0,
+    y: props.coordinate?.y ?? 0,
+  });
+
+  onSettled(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setState({ dismissed: true, dismissedAtCoordinate: coordinate() });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      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 });
+      }
+    },
+  );
+
+  const translate = (): { cssProperties: JSX.CSSProperties; cssClasses: string } =>
+    getTooltipTranslate({
+      allowEscapeViewBox: props.allowEscapeViewBox,
+      coordinate: props.coordinate,
+      offsetLeft: typeof props.offset === "number" ? props.offset : props.offset.x,
+      offsetTop: typeof props.offset === "number" ? props.offset : props.offset.y,
+      position: props.position,
+      reverseDirection: props.reverseDirection,
+      tooltipBox: {
+        height: props.lastBoundingBox.height,
+        width: props.lastBoundingBox.width,
+      },
+      useTranslate3d: props.useTranslate3d,
+      viewBox: props.viewBox,
+    });
+
+  const outerStyle = (): JSX.CSSProperties => {
+    const positionStyle: JSX.CSSProperties = props.hasPortalFromProps
+      ? {}
+      : {
+          transition: resolveTransitionProperty({
+            prefersReducedMotion: prefersReducedMotion(),
+            isAnimationActive: props.isAnimationActive,
+            active: props.active,
+            animationDuration: props.animationDuration,
+            animationEasing: props.animationEasing,
+          }),
+          ...translate().cssProperties,
+          "pointer-events": "none",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        };
+    return {
+      ...positionStyle,
+      visibility: !state().dismissed && props.active && props.hasPayload ? "visible" : "hidden",
+      ...props.wrapperStyle,
+    };
+  };
+
+  return (
+    <div tabindex={-1} class={translate().cssClasses} style={outerStyle()} ref={props.innerRef}>
+      {props.children}
+    </div>
+  );
+};

package/src/component/responsiveContainerUtils.ts

@@ -0,0 +1,128 @@
+// Ported from recharts 3.8.1 src/component/responsiveContainerUtils.ts (commit 7a23854).
+// 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 { isPercent } from "../util/DataUtils";
+import type { Percent } from "../util/types";
+
+export const defaultResponsiveContainerProps = {
+  width: "100%",
+  height: "100%",
+  debounce: 0,
+  minWidth: 0,
+  initialDimension: {
+    width: -1,
+    height: -1,
+  },
+} as const;
+
+export const calculateChartDimensions = (
+  containerWidth: number | undefined,
+  containerHeight: number | undefined,
+  props: {
+    width: Percent | number | undefined;
+    height: Percent | number | undefined;
+    aspect: number | undefined;
+    maxHeight: number | undefined;
+  },
+): { calculatedWidth: number | undefined; calculatedHeight: number | undefined } => {
+  const {
+    width = defaultResponsiveContainerProps.width,
+    height = defaultResponsiveContainerProps.height,
+    aspect,
+    maxHeight,
+  } = props;
+
+  // containerWidth/Height are already percentage-based (set as that percentage in
+  // CSS), so no percentage math is needed here.
+  let calculatedWidth: number | undefined = isPercent(width) ? containerWidth : Number(width);
+  let calculatedHeight: number | undefined = isPercent(height) ? containerHeight : Number(height);
+
+  if (aspect && aspect > 0) {
+    // Preserve the desired aspect ratio (default to width).
+    if (calculatedWidth) {
+      calculatedHeight = calculatedWidth / aspect;
+    } else if (calculatedHeight) {
+      calculatedWidth = calculatedHeight * aspect;
+    }
+
+    if (maxHeight && calculatedHeight != null && calculatedHeight > maxHeight) {
+      calculatedHeight = maxHeight;
+    }
+  }
+
+  return { calculatedWidth, calculatedHeight };
+};
+
+type ResponsiveInnerDivStyle = JSX.CSSProperties & {
+  overflowX?: "visible";
+  overflowY?: "visible";
+};
+
+const bothOverflow: ResponsiveInnerDivStyle = {
+  width: 0,
+  height: 0,
+  overflow: "visible",
+};
+const overflowX: ResponsiveInnerDivStyle = {
+  width: 0,
+  overflowX: "visible",
+};
+const overflowY: ResponsiveInnerDivStyle = {
+  height: 0,
+  overflowY: "visible",
+};
+const noStyle: ResponsiveInnerDivStyle = {};
+
+/**
+ * The zero-size, overflow-visible style lets the chart shrink. Without it the
+ * chart fills the ResponsiveContainer and the container always keeps the chart's
+ * size, so the ResizeObserver never fires. With a zero-size element the chart
+ * never fills the container — it's only visible because it overflows. (Trick from
+ * react-virtualized-auto-sizer.) Not needed when a dimension is a fixed number or
+ * undefined (the chart can't shrink in that dimension anyway).
+ */
+export const getInnerDivStyle = (props: {
+  width?: Percent | number;
+  height?: Percent | number;
+}): ResponsiveInnerDivStyle => {
+  const { width, height } = props;
+  const isWidthPercent = isPercent(width);
+  const isHeightPercent = isPercent(height);
+
+  if (isWidthPercent && isHeightPercent) {
+    return bothOverflow;
+  }
+  if (isWidthPercent) {
+    return overflowX;
+  }
+  if (isHeightPercent) {
+    return overflowY;
+  }
+  return noStyle;
+};
+
+export function getDefaultWidthAndHeight({
+  width,
+  height,
+  aspect,
+}: {
+  width: Percent | number | undefined;
+  height: Percent | number | undefined;
+  aspect: number | undefined;
+}): { width: Percent | number | undefined; height: Percent | number | undefined } {
+  let calculatedWidth = width;
+  let calculatedHeight = height;
+
+  if (calculatedWidth === undefined && calculatedHeight === undefined) {
+    calculatedWidth = defaultResponsiveContainerProps.width;
+    calculatedHeight = defaultResponsiveContainerProps.height;
+  } else if (calculatedWidth === undefined) {
+    calculatedWidth = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.width;
+  } else if (calculatedHeight === undefined) {
+    calculatedHeight = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.height;
+  }
+
+  return { width: calculatedWidth, height: calculatedHeight };
+}

package/src/container/ClipPathProvider.tsx

@@ -0,0 +1,40 @@
+// Ported from recharts 3.8.1 src/container/ClipPathProvider.tsx (commit 7a23854).
+//
+// Solid deviations: `useState(id)` → a once-computed `const` (Solid runs the body
+// 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 { uniqueId } from "../util/DataUtils";
+import { usePlotArea } from "../hooks";
+
+const ClipPathIdContext = createContext<string | null>(null);
+
+/**
+ * Generates a unique clip path ID, renders the clip rect over the plot area, and
+ * provides the ID via context (read with `useClipPathId`).
+ */
+export const ClipPathProvider = (props: { children: JSX.Element }): JSX.Element => {
+  const clipPathId = `${uniqueId("recharts")}-clip`;
+  const plotArea = usePlotArea();
+
+  // Non-keyed Show: the children mount once (when a plot area exists); the rect
+  // updates reactively. A keyed Show would re-key on every plot-area object
+  // change (selectors return fresh objects), churning the subtree.
+  return (
+    <Show when={plotArea()}>
+      {(area) => (
+        <ClipPathIdContext value={clipPathId}>
+          <defs>
+            <clipPath id={clipPathId}>
+              <rect x={area().x} y={area().y} height={area().height} width={area().width} />
+            </clipPath>
+          </defs>
+          {props.children}
+        </ClipPathIdContext>
+      )}
+    </Show>
+  );
+};
+
+export const useClipPathId = (): string | undefined => useContext(ClipPathIdContext) ?? undefined;

package/src/container/Layer.tsx

@@ -0,0 +1,38 @@
+// 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).
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+
+interface LayerOwnProps {
+  class?: string;
+  children?: JSX.Element;
+  ref?: SVGGElement | ((el: SVGGElement) => void);
+}
+
+// Omit class/children/ref from the SVG attrs so LayerOwnProps owns them cleanly
+// (avoids a `children`/`ref` intersection that breaks `{...spread}` forwarding).
+export type LayerProps = Omit<
+  CamelSvgProps<JSX.GSVGAttributes<SVGGElement>>,
+  "class" | "children" | "ref"
+> &
+  LayerOwnProps;
+
+/**
+ * Creates an SVG group element to group other SVG elements.
+ *
+ * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/g
+ */
+export const Layer = (props: LayerProps): JSX.Element => {
+  return (
+    <g
+      class={["recharts-layer", props.class]}
+      {...svgPropertiesAndEvents({ ...omit(props, "class", "children", "ref") })}
+      ref={props.ref}
+    >
+      {props.children}
+    </g>
+  );
+};