solid-recharts 0.2.0 → 1.0.0

package/src/state/selectors/barSelectors.ts

@@ -37,6 +37,10 @@ import {
   selectYAxisIdFromGraphicalItemId,
 } from "./graphicalItemSelectors";
 import { combineBarPosition } from "./combiners/combineBarPosition";
+import {
+  selectAxisWithScaleForGraphicalItem,
+  selectTicksForGraphicalItem,
+} from "./selectAxisForGraphicalItem";
 
 const selectSynchronisedBarSettings = (
   state: RechartsRootState,
@@ -187,38 +191,6 @@ export const selectBarPosition = (
     selectSynchronisedBarSettings(state, id),
   );
 
-const selectXAxisWithScale = (
-  state: RechartsRootState,
-  id: GraphicalItemId,
-  isPanorama: boolean,
-) => {
-  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
-  return xAxisId == null ? undefined : selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
-};
-
-const selectYAxisWithScale = (
-  state: RechartsRootState,
-  id: GraphicalItemId,
-  isPanorama: boolean,
-) => {
-  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
-  return yAxisId == null ? undefined : selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
-};
-
-const selectXAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
-  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
-  return xAxisId == null
-    ? undefined
-    : selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
-};
-
-const selectYAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
-  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
-  return yAxisId == null
-    ? undefined
-    : selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
-};
-
 const selectBarStackGroups = (
   state: RechartsRootState,
   id: GraphicalItemId,
@@ -253,10 +225,10 @@ export const selectBarRectangles = (
 ): ReadonlyArray<BarRectangleItem> | undefined => {
   const axisViewBox = selectAxisViewBox(state);
   const offset = selectChartOffsetInternal(state);
-  const xAxis = selectXAxisWithScale(state, id, isPanorama);
-  const yAxis = selectYAxisWithScale(state, id, isPanorama);
-  const xAxisTicks = selectXAxisTicks(state, id, isPanorama);
-  const yAxisTicks = selectYAxisTicks(state, id, isPanorama);
+  const xAxis = selectAxisWithScaleForGraphicalItem(state, "xAxis", id, isPanorama);
+  const yAxis = selectAxisWithScaleForGraphicalItem(state, "yAxis", id, isPanorama);
+  const xAxisTicks = selectTicksForGraphicalItem(state, "xAxis", id, isPanorama);
+  const yAxisTicks = selectTicksForGraphicalItem(state, "yAxis", id, isPanorama);
   const pos = selectBarPosition(state, id, isPanorama);
   const layout: LayoutType = selectChartLayout(state);
   const { chartData, dataStartIndex, dataEndIndex } =

package/src/state/selectors/combiners/combineConfiguredScale.ts

@@ -7,7 +7,7 @@
 // we spread the namespace into a plain record and narrow each candidate to a
 // scale factory through a user-defined type guard before calling it. Behavior is
 // identical (unknown names / non-function exports → `undefined`).
-import * as d3Scales from "victory-vendor/d3-scale";
+import * as d3Scales from "d3-scale";
 import {
   CategoricalDomain,
   CategoricalDomainItem,

package/src/state/selectors/combiners/combineRealScaleType.ts

@@ -1,6 +1,6 @@
 // Ported from recharts 3.8.1 src/state/selectors/combiners/combineRealScaleType.ts
 // (commit 7a23854).
-import * as d3Scales from "victory-vendor/d3-scale";
+import * as d3Scales from "d3-scale";
 import { RechartsScaleType } from "../../../util/types";
 import { BaseCartesianAxis } from "../../cartesianAxisSlice";
 import { upperFirst } from "../../../util/DataUtils";

package/src/state/selectors/dataSelectors.ts

@@ -1,12 +1,26 @@
 // Ported from recharts 3.8.1 src/state/selectors/dataSelectors.ts (commit 7a23854).
 //
-// Solid-native: plain selector functions, no reselect. recharts wraps several of
-// these in `createSelector` purely for memoization (to swallow spurious Immer
-// reference churn); in the Solid store, memoization comes from `useAppSelector`'s
-// `createMemo` at the consumer, so these stay plain functions. Behavior is
-// identical.
+// The chartData-projecting selectors below are wrapped in the Solid-native
+// `createSelector` (ADR-0002) so they present a stable reference when the data
+// is unchanged — the leaf-input fix the memoized selector graph depends on. The
+// remaining `slice`-returning helpers stay plain (they intentionally produce a
+// fresh window each call and their wrapped consumers absorb the churn).
 import { RechartsRootState } from "../store";
 import { ChartData, ChartDataState } from "../chartDataSlice";
+import { createSelector } from "../createSelector";
+
+// LEAF-INPUT rule (ADR-0002 "Known constraint"): these read the individual
+// leaves of the chartData slice — never the slice root `state.chartData`, whose
+// proxy reference is permanently stable in Solid and so can never invalidate a
+// reference-keyed cache. Reading the leaves (the `chartData` array is replaced
+// wholesale by `setChartData`; the indexes are primitives) lets `createSelector`
+// return a stable projected object when nothing changed and a fresh one when it
+// did — the reselect semantics the downstream selector graph relies on.
+const pickChartData = (state: RechartsRootState): ChartData | undefined =>
+  state.chartData.chartData;
+const pickComputedData = (state: RechartsRootState): unknown => state.chartData.computedData;
+const pickDataStartIndex = (state: RechartsRootState): number => state.chartData.dataStartIndex;
+const pickDataEndIndex = (state: RechartsRootState): number => state.chartData.dataEndIndex;
 
 /**
  * Always returns the data with the indexes set by a Brush. That might or might
@@ -15,23 +29,28 @@ import { ChartData, ChartDataState } from "../chartDataSlice";
  * {@link selectChartDataAndAlwaysIgnoreIndexes} or
  * {@link selectChartDataWithIndexesIfNotInPanoramaPosition4} when that matters.
  */
-export const selectChartDataWithIndexes = (state: RechartsRootState): ChartDataState =>
-  state.chartData;
+export const selectChartDataWithIndexes: (state: RechartsRootState) => ChartDataState =
+  createSelector(
+    [pickChartData, pickComputedData, pickDataStartIndex, pickDataEndIndex],
+    (chartData, computedData, dataStartIndex, dataEndIndex) => ({
+      chartData,
+      computedData,
+      dataStartIndex,
+      dataEndIndex,
+    }),
+  );
 
 /**
  * Always returns the full range of data, ignoring Brush indexes. Useful for the
  * Brush panorama, Legend, and Tooltip.
  */
-export const selectChartDataAndAlwaysIgnoreIndexes = (state: RechartsRootState): ChartDataState => {
-  const dataState = selectChartDataWithIndexes(state);
-  const dataEndIndex = dataState.chartData != null ? dataState.chartData.length - 1 : 0;
-  return {
-    chartData: dataState.chartData,
-    computedData: dataState.computedData,
-    dataEndIndex,
+export const selectChartDataAndAlwaysIgnoreIndexes: (state: RechartsRootState) => ChartDataState =
+  createSelector([pickChartData, pickComputedData], (chartData, computedData) => ({
+    chartData,
+    computedData,
+    dataEndIndex: chartData != null ? chartData.length - 1 : 0,
     dataStartIndex: 0,
-  };
-};
+  }));
 
 export const selectChartDataWithIndexesIfNotInPanoramaPosition4 = (
   state: RechartsRootState,

package/src/state/selectors/numberDomainEqualityCheck.ts

@@ -1,8 +1,16 @@
-// SKIPPED — intentionally NOT ported to the SolidJS port.
-//
-// Reason: reselect resultEqualityCheck — Solid memoizes via createMemo, not needed
-//
-// TODO: do not port this file as-is. The Solid-native port replaces it (see the
-// reason above). If a consumer needs this path, wire it to the Solid equivalent
-// instead.
-export {};
+// Ported from recharts 3.9.2 src/state/selectors/numberDomainEqualityCheck.ts.
+// See arrayEqualityCheck.ts for why this is now ported (ADR-0002).
+import type { NumberDomain } from "../../util/types";
+
+export const numberDomainEqualityCheck = (
+  a: NumberDomain | undefined,
+  b: NumberDomain | undefined,
+): boolean => {
+  if (a === b) {
+    return true;
+  }
+  if (a == null || b == null) {
+    return false;
+  }
+  return a[0] === b[0] && a[1] === b[1];
+};

package/src/state/selectors/selectAxisForGraphicalItem.ts

@@ -0,0 +1,52 @@
+// Resolves the scaled axis / ticks a cartesian graphical item is bound to, from
+// the item's id. Area and Bar each declared these four wrappers privately (and
+// Bar carried a dead `axisId == null` guard — selectX/YAxisIdFromGraphicalItemId
+// never returns null, it falls back to defaultAxisId). Concentrated here so the
+// "which axis does this item read" resolution lives once.
+//
+// A leaf module (like areaSelectors/barSelectors): it imports from both
+// axisSelectors and graphicalItemSelectors, so it introduces no import cycle.
+import { RechartsRootState } from "../store";
+import { GraphicalItemId } from "../graphicalItemsSlice";
+import {
+  selectAxisWithScale,
+  selectTicksOfGraphicalItem,
+  type BaseAxisWithScale,
+} from "./axisSelectors";
+import {
+  selectXAxisIdFromGraphicalItemId,
+  selectYAxisIdFromGraphicalItemId,
+} from "./graphicalItemSelectors";
+import type { TickItem } from "../../util/types";
+
+type CartesianAxisType = "xAxis" | "yAxis";
+
+const axisIdForGraphicalItem = (
+  state: RechartsRootState,
+  axisType: CartesianAxisType,
+  id: GraphicalItemId,
+) =>
+  axisType === "xAxis"
+    ? selectXAxisIdFromGraphicalItemId(state, id)
+    : selectYAxisIdFromGraphicalItemId(state, id);
+
+export const selectAxisWithScaleForGraphicalItem = (
+  state: RechartsRootState,
+  axisType: CartesianAxisType,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): BaseAxisWithScale | undefined =>
+  selectAxisWithScale(state, axisType, axisIdForGraphicalItem(state, axisType, id), isPanorama);
+
+export const selectTicksForGraphicalItem = (
+  state: RechartsRootState,
+  axisType: CartesianAxisType,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): TickItem[] | undefined =>
+  selectTicksOfGraphicalItem(
+    state,
+    axisType,
+    axisIdForGraphicalItem(state, axisType, id),
+    isPanorama,
+  );

package/src/state/tooltipSlice.ts

@@ -6,7 +6,9 @@
 // `settings.graphicalItemId` instead — the same proxy-safe strategy as
 // graphicalItemsSlice (SetTooltipEntrySettings is the sole caller and each
 // graphical item registers exactly one entry, so the id is unique).
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+import { createCollectionActions } from "./createCollectionActions";
+import { patched } from "./patched";
 import { TooltipTrigger } from "../chart/types";
 import type { NameType, Payload, ValueType } from "../component/DefaultTooltipContent";
 import { CartesianViewBoxRequired, Coordinate, DataKey, PolarCoordinate } from "../util/types";
@@ -179,109 +181,156 @@ export function createTooltipSlice(initialState: TooltipState = initialTooltipSt
     settings: { ...initialState.settings },
   });
 
+  // Deviation: recharts matches `prev` by reference (`indexOf`), but a Solid store
+  // proxies stored objects so the raw `prev` never `===` the proxied element. The
+  // collection matches by `settings.graphicalItemId` instead — the same proxy-safe
+  // identity strategy as graphicalItemsSlice. Each graphical item registers exactly
+  // one entry, so the id is unique.
+  const entries = createCollectionActions<TooltipPayloadConfiguration>(
+    (updater) =>
+      setState(
+        produce((s) => {
+          const next = updater(s.tooltipItemPayloads);
+          if (next !== s.tooltipItemPayloads) {
+            s.tooltipItemPayloads = next;
+          }
+        }),
+      ),
+    (p) => p.settings.graphicalItemId,
+  );
+
   const actions: TooltipActions = {
-    addTooltipEntrySettings(payload) {
-      setState((s) => {
-        s.tooltipItemPayloads = [...s.tooltipItemPayloads, payload];
-      });
-    },
-    replaceTooltipEntrySettings({ prev, next }) {
-      setState((s) => {
-        // Deviation: recharts matches `prev` by reference (`indexOf`), but a
-        // Solid store proxies stored objects so the raw `prev` never `===` the
-        // proxied element. Match by `settings.graphicalItemId` instead — the
-        // same proxy-safe identity strategy as graphicalItemsSlice. Each
-        // graphical item registers exactly one entry, so the id is unique.
-        const index = s.tooltipItemPayloads.findIndex(
-          (p) => p.settings.graphicalItemId === prev.settings.graphicalItemId,
-        );
-        if (index > -1) {
-          const nextItems = s.tooltipItemPayloads.slice();
-          nextItems[index] = next;
-          s.tooltipItemPayloads = nextItems;
-        }
-      });
-    },
-    removeTooltipEntrySettings(payload) {
-      setState((s) => {
-        s.tooltipItemPayloads = s.tooltipItemPayloads.filter(
-          (p) => p.settings.graphicalItemId !== payload.settings.graphicalItemId,
-        );
-      });
-    },
+    addTooltipEntrySettings: entries.add,
+    replaceTooltipEntrySettings: entries.replace,
+    removeTooltipEntrySettings: entries.remove,
     setTooltipSettingsState(payload) {
-      setState((s) => {
-        s.settings = payload;
-      });
+      setState(
+        produce((s) => {
+          s.settings = payload;
+        }),
+      );
     },
     setActiveMouseOverItemIndex(payload) {
-      setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.keyboardInteraction.active = false;
-        s.itemInteraction.hover.active = true;
-        s.itemInteraction.hover.index = payload.activeIndex;
-        s.itemInteraction.hover.dataKey = payload.activeDataKey;
-        s.itemInteraction.hover.graphicalItemId = payload.activeGraphicalItemId;
-        s.itemInteraction.hover.coordinate = payload.activeCoordinate;
-      });
+      // Slice immutability contract (ADR-0002): replace each written interaction
+      // node so `state.tooltip.<node>` yields a new reference and the selector
+      // graph invalidates by input-reference comparison. In-place leaf writes
+      // keep the node reference stable, so reference-keyed selectors would never
+      // recompute — see the store-proxy-reference-identity memory.
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.itemInteraction = patched(s.itemInteraction, {
+            hover: {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              graphicalItemId: payload.activeGraphicalItemId,
+              coordinate: payload.activeCoordinate,
+            },
+          });
+        }),
+      );
     },
     mouseLeaveChart() {
-      setState((s) => {
-        s.itemInteraction.hover.active = false;
-        s.axisInteraction.hover.active = false;
-      });
+      setState(
+        produce((s) => {
+          s.itemInteraction = patched(s.itemInteraction, {
+            hover: patched(s.itemInteraction.hover, { active: false }),
+          });
+          s.axisInteraction = patched(s.axisInteraction, {
+            hover: patched(s.axisInteraction.hover, { active: false }),
+          });
+        }),
+      );
     },
     mouseLeaveItem() {
-      setState((s) => {
-        s.itemInteraction.hover.active = false;
-      });
+      setState(
+        produce((s) => {
+          s.itemInteraction = patched(s.itemInteraction, {
+            hover: patched(s.itemInteraction.hover, { active: false }),
+          });
+        }),
+      );
     },
     setActiveClickItemIndex(payload) {
-      setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.itemInteraction.click.active = true;
-        s.keyboardInteraction.active = false;
-        s.itemInteraction.click.index = payload.activeIndex;
-        s.itemInteraction.click.dataKey = payload.activeDataKey;
-        s.itemInteraction.click.graphicalItemId = payload.activeGraphicalItemId;
-        s.itemInteraction.click.coordinate = payload.activeCoordinate;
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.itemInteraction = patched(s.itemInteraction, {
+            click: {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              graphicalItemId: payload.activeGraphicalItemId,
+              coordinate: payload.activeCoordinate,
+            },
+          });
+        }),
+      );
     },
     setMouseOverAxisIndex(payload) {
-      setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.axisInteraction.hover.active = true;
-        s.keyboardInteraction.active = false;
-        s.axisInteraction.hover.index = payload.activeIndex;
-        s.axisInteraction.hover.dataKey = payload.activeDataKey;
-        s.axisInteraction.hover.coordinate = payload.activeCoordinate;
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.axisInteraction = patched(s.axisInteraction, {
+            hover: patched(s.axisInteraction.hover, {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              coordinate: payload.activeCoordinate,
+            }),
+          });
+        }),
+      );
     },
     setMouseClickAxisIndex(payload) {
-      setState((s) => {
-        s.syncInteraction.active = false;
-        s.syncInteraction.sourceViewBox = undefined;
-        s.keyboardInteraction.active = false;
-        s.axisInteraction.click.active = true;
-        s.axisInteraction.click.index = payload.activeIndex;
-        s.axisInteraction.click.dataKey = payload.activeDataKey;
-        s.axisInteraction.click.coordinate = payload.activeCoordinate;
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = patched(s.syncInteraction, {
+            active: false,
+            sourceViewBox: undefined,
+          });
+          s.keyboardInteraction = patched(s.keyboardInteraction, { active: false });
+          s.axisInteraction = patched(s.axisInteraction, {
+            click: patched(s.axisInteraction.click, {
+              active: true,
+              index: payload.activeIndex,
+              dataKey: payload.activeDataKey,
+              coordinate: payload.activeCoordinate,
+            }),
+          });
+        }),
+      );
     },
     setSyncInteraction(payload) {
-      setState((s) => {
-        s.syncInteraction = payload;
-      });
+      setState(
+        produce((s) => {
+          s.syncInteraction = payload;
+        }),
+      );
     },
     setKeyboardInteraction(payload) {
-      setState((s) => {
-        s.keyboardInteraction.active = payload.active;
-        s.keyboardInteraction.index = payload.activeIndex;
-        s.keyboardInteraction.coordinate = payload.activeCoordinate;
-      });
+      setState(
+        produce((s) => {
+          s.keyboardInteraction = patched(s.keyboardInteraction, {
+            active: payload.active,
+            index: payload.activeIndex,
+            coordinate: payload.activeCoordinate,
+          });
+        }),
+      );
     },
   };
 

package/src/state/unregisterOnCleanup.ts

@@ -1,26 +1,11 @@
-// The register-while-mounted idiom: a component adds its settings to the chart
-// store in an effect and removes them again when it unmounts. The removal is
-// the one lifecycle moment where a store write is otherwise illegal: when the
-// router (or a <Show>) disposes a subtree, `onCleanup` callbacks run inside the
-// disposing computation's context, and Solid 2.0 throws
-// SIGNAL_WRITE_IN_OWNED_SCOPE for any signal/store write made there.
-//
-// An unregistration is not derived state — it is an external transition on a
-// store that outlives the component — so it must not execute under the dying
-// scope. `runWithOwner(null, …)` runs the callback owner- and context-free,
-// which is the documented way to "move the write outside" without deferring it
-// (synchronous removal keeps selector state consistent within the same flush).
-import { onCleanup, runWithOwner } from "solid-js";
+import { onCleanup } from "solid-js";
 
-/** `onCleanup` for store unregistrations: runs `fn` outside the disposing scope. */
+/** Register a synchronous store unregistration on owner cleanup. */
 export function unregisterOnCleanup(fn: () => void): void {
-  onCleanup(() => runWithOwner(null, fn));
+  onCleanup(fn);
 }
 
-/**
- * Same escape for cleanups *returned* from an effect apply phase or `onSettled`
- * (those also run inside the disposing computation's context on unmount).
- */
+/** Adapt a store unregistration for APIs that accept a cleanup callback. */
 export function unregisterCleanup(fn: () => void): () => void {
-  return () => runWithOwner(null, fn);
+  return fn;
 }

package/src/state/zIndexSlice.ts

@@ -2,7 +2,7 @@
 // FULL SOLID-NATIVE REWRITE (no Redux/immer). Registry of z-index -> element refs
 // used to portal components at each z-index. Z-index layering is wired into the
 // store so chart items can render through ZIndexLayer.
-import { createStore } from "solid-js";
+import { createStore, produce } from "solid-js/store";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 
 type ZIndexEntry = {
@@ -70,57 +70,65 @@ export function createZIndexSlice(initialState: ZIndexState = initialZIndexState
 
   const actions: ZIndexActions = {
     registerZIndexPortal({ zIndex }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          entry.consumers += 1;
-        } else {
-          s.zIndexMap[zIndex] = { consumers: 1, element: undefined, panoramaElement: undefined };
-        }
-      });
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            entry.consumers += 1;
+          } else {
+            s.zIndexMap[zIndex] = { consumers: 1, element: undefined, panoramaElement: undefined };
+          }
+        }),
+      );
     },
     unregisterZIndexPortal({ zIndex }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          entry.consumers -= 1;
-          // Garbage-collect unused entries, except default z-indexes (always
-          // rendered, so their portal provider stays mounted and won't re-register).
-          if (entry.consumers <= 0 && !isDefaultZIndex(zIndex)) {
-            delete s.zIndexMap[zIndex];
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            entry.consumers -= 1;
+            // Garbage-collect unused entries, except default z-indexes (always
+            // rendered, so their portal provider stays mounted and won't re-register).
+            if (entry.consumers <= 0 && !isDefaultZIndex(zIndex)) {
+              delete s.zIndexMap[zIndex];
+            }
           }
-        }
-      });
+        }),
+      );
     },
     registerZIndexPortalElement({ zIndex, element, isPanorama }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          if (isPanorama) {
-            entry.panoramaElement = element;
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            if (isPanorama) {
+              entry.panoramaElement = element;
+            } else {
+              entry.element = element;
+            }
           } else {
-            entry.element = element;
+            s.zIndexMap[zIndex] = {
+              consumers: 0,
+              element: isPanorama ? undefined : element,
+              panoramaElement: isPanorama ? element : undefined,
+            };
           }
-        } else {
-          s.zIndexMap[zIndex] = {
-            consumers: 0,
-            element: isPanorama ? undefined : element,
-            panoramaElement: isPanorama ? element : undefined,
-          };
-        }
-      });
+        }),
+      );
     },
     unregisterZIndexPortalElement({ zIndex, isPanorama }) {
-      setState((s) => {
-        const entry = s.zIndexMap[zIndex];
-        if (entry) {
-          if (isPanorama) {
-            entry.panoramaElement = undefined;
-          } else {
-            entry.element = undefined;
+      setState(
+        produce((s) => {
+          const entry = s.zIndexMap[zIndex];
+          if (entry) {
+            if (isPanorama) {
+              entry.panoramaElement = undefined;
+            } else {
+              entry.element = undefined;
+            }
           }
-        }
-      });
+        }),
+      );
     },
   };