solid-recharts 0.1.0

package/src/container/RootSurface.tsx

@@ -0,0 +1,124 @@
+// Ported from recharts 3.8.1 src/container/RootSurface.tsx (commit 7a23854).
+//
+// Solid deviations: `forwardRef` → `ref` prop; chart-dimension/accessibility
+// 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 { useChartHeight, useChartWidth } from "../context/chartLayoutContext";
+import { useAccessibilityLayer } from "../context/accessibilityContext";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { Surface } from "./Surface";
+import { useAppSelector } from "../state/hooks";
+import { selectBrushDimensions } from "../state/selectors/brushSelectors";
+import { isPositiveNumber } from "../util/isWellBehavedNumber";
+import { AllZIndexPortals } from "../zIndex/ZIndexPortal";
+
+interface RootSurfaceProps {
+  children: JSX.Element;
+  title: string | undefined;
+  desc: string | undefined;
+  otherAttributes: Record<string, unknown> | null;
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+}
+
+const FULL_WIDTH_AND_HEIGHT = {
+  width: "100%",
+  height: "100%",
+  // display: block avoids the inline-SVG descender gap that otherwise grows a
+  // responsive container indefinitely.
+  display: "block",
+};
+
+const MainChartSurface = (props: RootSurfaceProps): JSX.Element => {
+  const width = useChartWidth();
+  const height = useChartHeight();
+  const hasAccessibilityLayer = useAccessibilityLayer();
+
+  const dims = (): { width: number; height: number } | undefined => {
+    const w = width();
+    const h = height();
+    return isPositiveNumber(w) && isPositiveNumber(h) ? { width: w, height: h } : undefined;
+  };
+
+  const tabIndex = (): number | undefined => {
+    const other = props.otherAttributes;
+    if (other == null) {
+      return undefined;
+    }
+    // The chart-prop record keeps recharts' camelCase keys (KeepCase filter);
+    // Surface renames to DOM attribute names when it renders.
+    const explicit = other.tabIndex;
+    return typeof explicit === "number" ? explicit : hasAccessibilityLayer() ? 0 : undefined;
+  };
+  const role = (): string | undefined => {
+    const other = props.otherAttributes;
+    if (other == null) {
+      return undefined;
+    }
+    return typeof other.role === "string"
+      ? other.role
+      : hasAccessibilityLayer()
+        ? "application"
+        : undefined;
+  };
+
+  // role/tabindex go through the (loosely-typed) spread, not typed props: Solid's
+  // `role` prop is a strict ARIA-literal union that rejects a plain `string`.
+  const attrs = (): Record<string, unknown> => ({
+    ...(props.otherAttributes ?? {}),
+    role: role(),
+    tabIndex: tabIndex(),
+  });
+
+  // Non-keyed Show: mount the Surface once when dimensions are positive; width/
+  // height update reactively. (Keyed would churn the subtree on each size change.)
+  return (
+    <Show when={dims()}>
+      {(d) => (
+        <Surface
+          {...attrs()}
+          title={props.title}
+          desc={props.desc}
+          width={d().width}
+          height={d().height}
+          style={FULL_WIDTH_AND_HEIGHT}
+          ref={props.ref}
+        >
+          {props.children}
+        </Surface>
+      )}
+    </Show>
+  );
+};
+
+const BrushPanoramaSurface = (props: { children: JSX.Element }): JSX.Element => {
+  const brushDimensions = useAppSelector(selectBrushDimensions);
+
+  return (
+    <Show when={brushDimensions()}>
+      {(dims) => (
+        <Surface width={dims().width} height={dims().height} x={dims().x} y={dims().y}>
+          {props.children}
+        </Surface>
+      )}
+    </Show>
+  );
+};
+
+export const RootSurface = (props: RootSurfaceProps): JSX.Element => {
+  const isPanorama = useIsPanorama();
+
+  if (isPanorama) {
+    return (
+      <BrushPanoramaSurface>
+        <AllZIndexPortals isPanorama>{props.children}</AllZIndexPortals>
+      </BrushPanoramaSurface>
+    );
+  }
+  return (
+    <MainChartSurface {...props}>
+      <AllZIndexPortals isPanorama={false}>{props.children}</AllZIndexPortals>
+    </MainChartSurface>
+  );
+};

package/src/container/Surface.tsx

@@ -0,0 +1,70 @@
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+import { omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+
+export interface CartesianViewBox {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+}
+
+interface SurfaceOwnProps {
+  width: number | string;
+  height: number | string;
+  viewBox?: CartesianViewBox;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+  title?: string;
+  desc?: string;
+  ref?: SVGSVGElement | ((el: SVGSVGElement) => void);
+  /** Maps to recharts' `className` (a plain string); the array `class` form below merges it. */
+  class?: string;
+}
+
+// Props parity with recharts SurfaceProps; `class` (vs `className: string`) is the only framework
+// deviation. We Omit the wide SVG `class` so ours stays `string`, matching recharts and keeping the
+// native array `class` form typed.
+export type SurfaceProps = Omit<
+  CamelSvgProps<JSX.SvgSVGAttributes<SVGSVGElement>>,
+  "viewBox" | "style" | "class"
+> &
+  SurfaceOwnProps;
+
+/**
+ * Renders an SVG element. All charts include a Surface; you would not normally use this directly.
+ */
+export const Surface = (props: SurfaceProps) => {
+  const svgView = () => props.viewBox ?? { width: props.width, height: props.height, x: 0, y: 0 };
+  const rest = omit(
+    props,
+    "children",
+    "width",
+    "height",
+    "viewBox",
+    "class",
+    "style",
+    "title",
+    "desc",
+    "ref",
+  );
+
+  // 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]}
+      width={props.width}
+      height={props.height}
+      style={props.style}
+      viewBox={`${svgView().x ?? 0} ${svgView().y ?? 0} ${svgView().width} ${svgView().height}`}
+      ref={props.ref}
+    >
+      <title>{props.title}</title>
+      <desc>{props.desc}</desc>
+      {props.children}
+    </svg>
+  );
+};

package/src/context/ErrorBarContext.tsx

@@ -0,0 +1,85 @@
+// Ported from recharts 3.8.1 src/context/ErrorBarContext.tsx (commit 7a23854).
+//
+// The graphical item provides its data + a point formatter + axis ids via this
+// context; ErrorBar consumes it to draw whiskers, and ReportErrorBarSettings
+// registers the error bar in the store (so axes can extend their domain).
+//
+// Solid deviations: context value carries an `Accessor` (Solid context is fixed
+// at provide-time; the accessor keeps `data` reactive). useEffect add/replace +
+// cleanup remove → createEffect + onCleanup. useGraphicalItemId provides the id.
+import { createContext, createEffect, useContext } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { AxisId } from "../state/cartesianAxisSlice";
+import type { ErrorBarDataPointFormatter } from "../cartesian/ErrorBar";
+import type { ErrorBarsSettings } from "../state/errorBarSlice";
+import { useAppStore } from "../state/hooks";
+import { useGraphicalItemId } from "./RegisterGraphicalItemId";
+import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+
+export interface ErrorBarContextValue {
+  data: ReadonlyArray<unknown> | undefined;
+  xAxisId: AxisId;
+  yAxisId: AxisId;
+  dataPointFormatter: ErrorBarDataPointFormatter;
+  errorBarOffset: number;
+}
+
+const initialContextState: ErrorBarContextValue = {
+  data: [],
+  xAxisId: 0,
+  yAxisId: 0,
+  dataPointFormatter: () => ({ x: 0, y: 0, value: 0 }),
+  errorBarOffset: 0,
+};
+
+const ErrorBarContext = createContext<Accessor<ErrorBarContextValue>>(() => initialContextState);
+
+export function SetErrorBarContext(
+  props: ErrorBarContextValue & { children: JSX.Element },
+): JSX.Element {
+  const value = (): ErrorBarContextValue => ({
+    data: props.data,
+    xAxisId: props.xAxisId,
+    yAxisId: props.yAxisId,
+    dataPointFormatter: props.dataPointFormatter,
+    errorBarOffset: props.errorBarOffset,
+  });
+  return <ErrorBarContext value={value}>{props.children}</ErrorBarContext>;
+}
+
+export const useErrorBarContext = (): Accessor<ErrorBarContextValue> => useContext(ErrorBarContext);
+
+/**
+ * Registers an ErrorBar's settings in the store under its graphical item's id,
+ * so the corresponding axis can extend its domain to fit the error values.
+ */
+export function ReportErrorBarSettings(props: ErrorBarsSettings): JSX.Element {
+  const store = useAppStore();
+  const graphicalItemId = useGraphicalItemId();
+  let prev: ErrorBarsSettings | null = null;
+
+  createEffect(
+    (): ErrorBarsSettings => ({ dataKey: props.dataKey, direction: props.direction }),
+    (settings) => {
+      if (store == null || graphicalItemId == null) {
+        return;
+      }
+      if (prev === null) {
+        store.actions.errorBars.addErrorBar({ itemId: graphicalItemId, errorBar: settings });
+      } else if (prev !== settings) {
+        store.actions.errorBars.replaceErrorBar({ itemId: graphicalItemId, prev, next: settings });
+      }
+      prev = settings;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev != null && store != null && graphicalItemId != null) {
+      store.actions.errorBars.removeErrorBar({ itemId: graphicalItemId, errorBar: prev });
+      prev = null;
+    }
+  });
+
+  return null;
+}

package/src/context/PanoramaContext.tsx

@@ -0,0 +1,13 @@
+// Ported from recharts 3.8.1 src/context/PanoramaContext.tsx (commit 7a23854).
+// 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";
+
+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>
+);

package/src/context/RegisterGraphicalItemId.tsx

@@ -0,0 +1,41 @@
+// Ported from recharts 3.8.1 src/context/RegisterGraphicalItemId.tsx (commit 7a23854).
+//
+// Resolves a graphical item's id (user-provided or generated) once and provides
+// it to descendants via context, exposing it to the item itself through a
+// render-prop child. Solid 2.0: context value is the provider; the `children`
+// function receives the resolved id (same render-prop shape as the reference).
+//
+// 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 { useUniqueId } from "../util/useUniqueId";
+import { GraphicalItemId } from "../state/graphicalItemsSlice";
+
+export interface IdSetter {
+  id?: string;
+  type: string;
+  /**
+   * Children must be a function that receives the resolved id of the graphical
+   * item — either the one provided via `id` or one generated automatically.
+   */
+  children: (id: GraphicalItemId) => JSX.Element;
+}
+
+// Default must be a real value (null), not an explicit `undefined`: Solid 2.0
+// treats an undefined default as "no default" and THROWS from useContext when
+// no provider is above. Consumers (e.g. an <ErrorBar> child evaluated by Bar's
+// collectCells probe outside the provider) rely on getting "no id" back and
+// no-op'ing instead.
+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>
+  );
+};
+
+export function useGraphicalItemId(): GraphicalItemId | undefined {
+  return useContext(GraphicalItemIdContext) ?? undefined;
+}

package/src/context/accessibilityContext.tsx

@@ -0,0 +1,10 @@
+// Ported from recharts 3.8.1 src/context/accessibilityContext.tsx (commit 7a23854).
+// `useAppSelector` returns an Accessor in this Solid port, so `useAccessibilityLayer`
+// returns an `Accessor<boolean>` (recharts returned a bare boolean).
+import { type Accessor } from "solid-js";
+import { useAppSelector } from "../state/hooks";
+
+export const useAccessibilityLayer = (): Accessor<boolean> => {
+  const accessibilityLayer = useAppSelector((state) => state.rootProps.accessibilityLayer);
+  return () => accessibilityLayer() ?? true;
+};

package/src/context/brushUpdateContext.ts

@@ -0,0 +1,14 @@
+// Ported from recharts 3.8.1 src/context/brushUpdateContext.tsx (commit 7a23854).
+// No JSX → `.ts`. Solid 2.0: the context value is the provider; the default
+// (`() => {}`) is a real value so `useContext` returns it without throwing
+// outside a provider (matching recharts' default-callback behavior).
+import { createContext } from "solid-js";
+
+export interface BrushStartEndIndex {
+  startIndex: number;
+  endIndex: number;
+}
+
+export type OnBrushUpdate = (newState: BrushStartEndIndex) => void;
+
+export const BrushUpdateDispatchContext = createContext<OnBrushUpdate>(() => {});

package/src/context/chartDataContext.tsx

@@ -0,0 +1,79 @@
+// Ported from recharts 3.8.1 src/context/chartDataContext.tsx (commit 7a23854).
+//
+// Solid deviations: `useAppDispatch` + action creators → `useAppStore()` + slice
+// actions (`store.actions.chartData.*`); `useEffect` → two-arg `createEffect`
+// (the cleanup is returned from the apply phase); selector hooks return
+// Accessors (since `useAppSelector` does). `SetComputedData` and the BrushStartEndIndex
+// type are kept local; the latter re-homes to brushUpdateContext when ported.
+import { createEffect, type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { ChartData } from "../state/chartDataSlice";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import { unregisterCleanup } from "../state/unregisterOnCleanup";
+import { RechartsRootState } from "../state/store";
+import { useIsPanorama } from "./PanoramaContext";
+
+interface BrushStartEndIndex {
+  startIndex: number;
+  endIndex: number;
+}
+
+export const ChartDataContextProvider = (props: {
+  chartData: ChartData | undefined;
+}): JSX.Element => {
+  const store = useAppStore();
+  const isPanorama = useIsPanorama();
+
+  createEffect(
+    () => props.chartData,
+    (chartData) => {
+      // Panorama mode reuses the main chart's data — don't overwrite it.
+      if (isPanorama) {
+        return undefined;
+      }
+      store?.actions.chartData.setChartData(chartData);
+      return unregisterCleanup(() => {
+        store?.actions.chartData.setChartData(undefined);
+      });
+    },
+  );
+
+  return null;
+};
+
+export const SetComputedData = (props: { computedData: unknown }): JSX.Element => {
+  const store = useAppStore();
+
+  createEffect(
+    () => props.computedData,
+    (computedData) => {
+      store?.actions.chartData.setComputedData(computedData);
+      return unregisterCleanup(() => {
+        store?.actions.chartData.setChartData(undefined);
+      });
+    },
+  );
+
+  return null;
+};
+
+const selectChartData = (state: RechartsRootState): ChartData | undefined =>
+  state.chartData.chartData;
+
+/**
+ * Returns the chart's `data` array (set on the chart root), or `undefined`.
+ * @deprecated use a more specific selector depending on how the graphical item identifies its data.
+ */
+export const useChartData = (): Accessor<ChartData | undefined> => useAppSelector(selectChartData);
+
+const selectDataIndex = (state: RechartsRootState): BrushStartEndIndex => {
+  const { dataStartIndex, dataEndIndex } = state.chartData;
+  return { startIndex: dataStartIndex, endIndex: dataEndIndex };
+};
+
+/**
+ * startIndex and endIndex are data boundaries set through Brush.
+ */
+export const useDataIndex = (): Accessor<BrushStartEndIndex | undefined> => {
+  return useAppSelector(selectDataIndex);
+};

package/src/context/chartLayoutContext.tsx

@@ -0,0 +1,158 @@
+// Ported from recharts 3.8.1 src/context/chartLayoutContext.tsx (commit 7a23854).
+//
+// Solid deviations: selector hooks return Accessors (since `useAppSelector`
+// does); `useAppDispatch` + action creators → `useAppStore().actions` +
+// `createEffect`. Brush/responsive reads go through the current stubs.
+import { createEffect, type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {
+  CartesianLayout,
+  CartesianViewBoxRequired,
+  ChartOffsetInternal,
+  LayoutType,
+  Margin,
+  Percent,
+  PolarLayout,
+  TrapezoidViewBox,
+} from "../util/types";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import { RechartsRootState } from "../state/store";
+import {
+  selectChartOffsetInternal,
+  selectChartViewBox,
+} from "../state/selectors/selectChartOffsetInternal";
+import { selectChartHeight, selectChartWidth } from "../state/selectors/containerSelectors";
+import { useIsPanorama } from "./PanoramaContext";
+import { selectBrushDimensions, selectBrushSettings } from "../state/selectors/brushSelectors";
+import { useResponsiveContainerContext } from "../component/ResponsiveContainer";
+import { isPositiveNumber } from "../util/isWellBehavedNumber";
+
+export function cartesianViewBoxToTrapezoid(box: undefined): undefined;
+export function cartesianViewBoxToTrapezoid(
+  box: CartesianViewBoxRequired | TrapezoidViewBox,
+): TrapezoidViewBox;
+export function cartesianViewBoxToTrapezoid(
+  box: CartesianViewBoxRequired | TrapezoidViewBox | undefined,
+): TrapezoidViewBox | undefined {
+  if (!box) {
+    return undefined;
+  }
+  return {
+    x: box.x,
+    y: box.y,
+    upperWidth: "upperWidth" in box ? box.upperWidth : box.width,
+    lowerWidth: "lowerWidth" in box ? box.lowerWidth : box.width,
+    width: box.width,
+    height: box.height,
+  };
+}
+
+export const useViewBox = (): Accessor<CartesianViewBoxRequired | undefined> => {
+  const panorama = useIsPanorama();
+  const rootViewBox = useAppSelector(selectChartViewBox);
+  const brushDimensions = useAppSelector(selectBrushDimensions);
+  const brushSettings = useAppSelector(selectBrushSettings);
+  return () => {
+    const padding = brushSettings()?.padding;
+    const dims = brushDimensions();
+    if (!panorama || !dims || !padding) {
+      return rootViewBox();
+    }
+    return {
+      width: dims.width - padding.left - padding.right,
+      height: dims.height - padding.top - padding.bottom,
+      x: padding.left,
+      y: padding.top,
+    };
+  };
+};
+
+const manyComponentsThrowErrorsIfOffsetIsUndefined: ChartOffsetInternal = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  width: 0,
+  height: 0,
+  brushBottom: 0,
+};
+
+/** Internal. Returns the chart offset in pixels (or a zeroed default). */
+export const useOffsetInternal = (): Accessor<ChartOffsetInternal> => {
+  const offset = useAppSelector(selectChartOffsetInternal);
+  return () => offset() ?? manyComponentsThrowErrorsIfOffsetIsUndefined;
+};
+
+/** Width of the chart in pixels, or `undefined` outside a chart context. */
+export const useChartWidth = (): Accessor<number | undefined> => useAppSelector(selectChartWidth);
+
+/** Height of the chart in pixels, or `undefined` outside a chart context. */
+export const useChartHeight = (): Accessor<number | undefined> => useAppSelector(selectChartHeight);
+
+/** Margin (empty space around the chart, excluding axes/legend/brushes). */
+export const useMargin = (): Accessor<Margin | undefined> =>
+  useAppSelector((state) => state.layout.margin);
+
+export const selectChartLayout = (state: RechartsRootState): LayoutType => state.layout.layoutType;
+
+export const useChartLayout = (): Accessor<LayoutType | undefined> =>
+  useAppSelector(selectChartLayout);
+
+export const useCartesianChartLayout = (): Accessor<CartesianLayout | undefined> => {
+  const layout = useChartLayout();
+  return () => {
+    const l = layout();
+    return l === "horizontal" || l === "vertical" ? l : undefined;
+  };
+};
+
+export const selectPolarChartLayout = (state: RechartsRootState): PolarLayout | undefined => {
+  const layout = state.layout.layoutType;
+  return layout === "centric" || layout === "radial" ? layout : undefined;
+};
+
+export const usePolarChartLayout = (): Accessor<PolarLayout | undefined> =>
+  useAppSelector(selectPolarChartLayout);
+
+/** True if rendered inside a chart context (all charts provide a layout type). */
+export const useIsInChartContext = (): Accessor<boolean> => {
+  const layout = useChartLayout();
+  return () => layout() !== undefined;
+};
+
+export const ReportChartSize = (props: {
+  width: number | Percent | undefined;
+  height: number | Percent | undefined;
+}): JSX.Element => {
+  const store = useAppStore();
+  const isPanorama = useIsPanorama();
+  const responsive = useResponsiveContainerContext();
+
+  // Prefer ResponsiveContainer-measured dimensions when present (3.x behavior).
+  const width = (): number | Percent | undefined =>
+    responsive && responsive.width > 0 ? responsive.width : props.width;
+  const height = (): number | Percent | undefined =>
+    responsive && responsive.height > 0 ? responsive.height : props.height;
+
+  createEffect(
+    () => ({ width: width(), height: height() }),
+    ({ width: w, height: h }) => {
+      if (!isPanorama && isPositiveNumber(w) && isPositiveNumber(h)) {
+        store?.actions.layout.setChartSize({ width: w, height: h });
+      }
+    },
+  );
+
+  return null;
+};
+
+export const ReportChartMargin = (props: { margin: Partial<Margin> }): JSX.Element => {
+  const store = useAppStore();
+  createEffect(
+    () => props.margin,
+    (margin) => {
+      store?.actions.layout.setMargin(margin);
+    },
+  );
+  return null;
+};

package/src/context/legendPayloadContext.ts

@@ -0,0 +1,11 @@
+// Ported from recharts 3.8.1 src/context/legendPayloadContext.ts (commit 7a23854).
+// Deviation: returns an Accessor (Solid reactive-hook convention).
+import { Accessor } from "solid-js";
+import { LegendPayload } from "../component/DefaultLegendContent";
+import { useAppSelector } from "../state/hooks";
+import { selectLegendPayload } from "../state/selectors/legendSelectors";
+
+/** Reads the current Legend items (for Legend or anywhere reading legend payload). */
+export function useLegendPayload(): Accessor<ReadonlyArray<LegendPayload> | undefined> {
+  return useAppSelector(selectLegendPayload);
+}

package/src/context/legendPortalContext.ts

@@ -0,0 +1,11 @@
+// Ported from recharts 3.8.1 src/context/legendPortalContext.tsx (commit 7a23854).
+//
+// Deviation (same as tooltipPortalContext): the context carries an
+// `Accessor<HTMLElement | null>` so the wrapper can set it reactively from its
+// portal-div ref (Solid context values are fixed at provide time). Default
+// accessor returns null (outside a provider).
+import { Accessor, createContext, useContext } from "solid-js";
+
+export const LegendPortalContext = createContext<Accessor<HTMLElement | null>>(() => null);
+
+export const useLegendPortal = (): Accessor<HTMLElement | null> => useContext(LegendPortalContext);