solid-recharts 0.2.0 → 1.0.0

package/test/component/Tooltip/itemSorter.spec.tsx

@@ -1,2815 +0,0 @@
-/*
- * Ported from recharts 3.8.1 test/component/Tooltip/itemSorter.spec.tsx (commit 7a23854).
- * Solid adaptations: createSelectorTestCase wrapper uses (props) => {props.children};
- * showTooltip + flush via tooltipTestHelpers; selectors from tooltipSelectors.
- */
-import { describe, expect, it, vi } from "vitest";
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  ComposedChart,
-  Line,
-  Pie,
-  PieChart,
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  Radar,
-  RadarChart,
-  RadialBar,
-  RadialBarChart,
-  Scatter,
-  Tooltip,
-  TooltipItemSorter,
-  XAxis,
-  YAxis,
-} from "../../../src";
-import { PageData } from "../../_data";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import type { RechartsRootState } from "../../../src/state/store";
-import { expectTooltipPayload, showTooltip } from "./tooltipTestHelpers";
-import {
-  barChartMouseHoverTooltipSelector,
-  composedChartMouseHoverTooltipSelector,
-  pieChartMouseHoverTooltipSelector,
-  radarChartMouseHoverTooltipSelector,
-  radialBarChartMouseHoverTooltipSelector,
-} from "./tooltipMouseHoverSelectors";
-import {
-  selectTooltipPayload,
-  selectTooltipPayloadConfigurations,
-} from "../../../src/state/selectors/tooltipSelectors";
-import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { noop } from "../../../src/util/DataUtils";
-
-describe("itemSorter in ComposedChart", () => {
-  beforeEach(() => {
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  describe("without name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <ComposedChart width={300} height={300} data={PageData}>
-          <Area dataKey="uv" name="area" id="area-uv" />
-          <Bar dataKey="pv" name="bar" id="bar-pv" />
-          <Line dataKey="amt" name="line" id="line-amt" />
-          {/* name prop on Scatter doesn't do anything, not sure why */}
-          <Scatter dataKey="uv" name="scatter" id="scatter-uv" />
-          <YAxis dataKey="pv" />
-          <XAxis dataKey="name" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </ComposedChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "area : 200",
-          "bar : 9800",
-          "line : 2400",
-          "name : Page D",
-          "pv : 9800",
-        ]);
-      });
-
-      it("should select tooltipPayloadConfigurations", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayloadConfigurations(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            dataDefinedOnItem: undefined,
-            getPosition: noop,
-            settings: {
-              color: "#3182bd",
-              dataKey: "uv",
-              fill: "#3182bd",
-              hide: false,
-              name: "area",
-              nameKey: undefined,
-              stroke: "#3182bd",
-              strokeWidth: 1,
-              type: undefined,
-              unit: undefined,
-              graphicalItemId: "area-uv",
-            },
-          },
-          {
-            dataDefinedOnItem: undefined,
-            getPosition: noop,
-            settings: {
-              color: undefined,
-              dataKey: "pv",
-              fill: undefined,
-              hide: false,
-              name: "bar",
-              nameKey: undefined,
-              stroke: undefined,
-              strokeWidth: undefined,
-              type: undefined,
-              unit: undefined,
-              graphicalItemId: "bar-pv",
-            },
-          },
-          {
-            dataDefinedOnItem: undefined,
-            getPosition: noop,
-            settings: {
-              color: "#3182bd",
-              dataKey: "amt",
-              fill: "#fff",
-              hide: false,
-              name: "line",
-              nameKey: undefined,
-              stroke: "#3182bd",
-              strokeWidth: 1,
-              type: undefined,
-              unit: undefined,
-              graphicalItemId: "line-amt",
-            },
-          },
-          {
-            dataDefinedOnItem: [
-              [
-                {
-                  dataKey: "name",
-                  name: "name",
-                  payload: {
-                    amt: 2400,
-                    name: "Page A",
-                    pv: 2400,
-                    uv: 400,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: "Page A",
-                  graphicalItemId: "scatter-uv",
-                },
-                {
-                  dataKey: "pv",
-                  name: "pv",
-                  payload: {
-                    amt: 2400,
-                    name: "Page A",
-                    pv: 2400,
-                    uv: 400,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: 2400,
-                  graphicalItemId: "scatter-uv",
-                },
-              ],
-              [
-                {
-                  dataKey: "name",
-                  name: "name",
-                  payload: {
-                    amt: 2400,
-                    name: "Page B",
-                    pv: 4567,
-                    uv: 300,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: "Page B",
-                  graphicalItemId: "scatter-uv",
-                },
-                {
-                  dataKey: "pv",
-                  name: "pv",
-                  payload: {
-                    amt: 2400,
-                    name: "Page B",
-                    pv: 4567,
-                    uv: 300,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: 4567,
-                  graphicalItemId: "scatter-uv",
-                },
-              ],
-              [
-                {
-                  dataKey: "name",
-                  name: "name",
-                  payload: {
-                    amt: 2400,
-                    name: "Page C",
-                    pv: 1398,
-                    uv: 300,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: "Page C",
-                  graphicalItemId: "scatter-uv",
-                },
-                {
-                  dataKey: "pv",
-                  name: "pv",
-                  payload: {
-                    amt: 2400,
-                    name: "Page C",
-                    pv: 1398,
-                    uv: 300,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: 1398,
-                  graphicalItemId: "scatter-uv",
-                },
-              ],
-              [
-                {
-                  dataKey: "name",
-                  name: "name",
-                  payload: {
-                    amt: 2400,
-                    name: "Page D",
-                    pv: 9800,
-                    uv: 200,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: "Page D",
-                  graphicalItemId: "scatter-uv",
-                },
-                {
-                  dataKey: "pv",
-                  name: "pv",
-                  payload: {
-                    amt: 2400,
-                    name: "Page D",
-                    pv: 9800,
-                    uv: 200,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: 9800,
-                  graphicalItemId: "scatter-uv",
-                },
-              ],
-              [
-                {
-                  dataKey: "name",
-                  name: "name",
-                  payload: {
-                    amt: 2400,
-                    name: "Page E",
-                    pv: 3908,
-                    uv: 278,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: "Page E",
-                  graphicalItemId: "scatter-uv",
-                },
-                {
-                  dataKey: "pv",
-                  name: "pv",
-                  payload: {
-                    amt: 2400,
-                    name: "Page E",
-                    pv: 3908,
-                    uv: 278,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: 3908,
-                  graphicalItemId: "scatter-uv",
-                },
-              ],
-              [
-                {
-                  dataKey: "name",
-                  name: "name",
-                  payload: {
-                    amt: 2400,
-                    name: "Page F",
-                    pv: 4800,
-                    uv: 189,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: "Page F",
-                  graphicalItemId: "scatter-uv",
-                },
-                {
-                  dataKey: "pv",
-                  name: "pv",
-                  payload: {
-                    amt: 2400,
-                    name: "Page F",
-                    pv: 4800,
-                    uv: 189,
-                  },
-                  type: undefined,
-                  unit: "",
-                  value: 4800,
-                  graphicalItemId: "scatter-uv",
-                },
-              ],
-            ],
-            getPosition: expect.functionReturning([
-              ["0", { x: 84.16666666666667, y: 202.6 }],
-              ["1", { x: 122.50000000000001, y: 146.258 }],
-              ["2", { x: 160.83333333333334, y: 228.65200000000002 }],
-              ["3", { x: 199.16666666666666, y: 10.200000000000005 }],
-              ["4", { x: 237.5, y: 163.392 }],
-              ["5", { x: 275.83333333333337, y: 140.20000000000002 }],
-            ]),
-            settings: {
-              color: undefined,
-              dataKey: "uv",
-              fill: undefined,
-              hide: false,
-              name: "scatter",
-              nameKey: undefined,
-              stroke: undefined,
-              type: undefined,
-              unit: "",
-              graphicalItemId: "scatter-uv",
-            },
-          },
-        ]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: "#3182bd",
-            dataKey: "uv",
-            fill: "#3182bd",
-            hide: false,
-            name: "area",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 400,
-            graphicalItemId: "area-uv",
-          },
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            hide: false,
-            name: "bar",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-            graphicalItemId: "bar-pv",
-          },
-          {
-            color: "#3182bd",
-            dataKey: "amt",
-            fill: "#fff",
-            hide: false,
-            name: "line",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-            graphicalItemId: "line-amt",
-          },
-          {
-            color: undefined,
-            dataKey: "name",
-            fill: undefined,
-            hide: false,
-            name: "name",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            type: undefined,
-            unit: "",
-            value: "Page A",
-            graphicalItemId: "scatter-uv",
-          },
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            hide: false,
-            name: "pv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            type: undefined,
-            unit: "",
-            value: 2400,
-            graphicalItemId: "scatter-uv",
-          },
-        ]);
-        expect(spy).toHaveBeenCalledTimes(3);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "line : 2400",
-          "name : Page D",
-          "bar : 9800",
-          "pv : 9800",
-          "area : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "area : 200",
-          "line : 2400",
-          "bar : 9800",
-          "name : Page D",
-          "pv : 9800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "area : 200",
-          "bar : 9800",
-          "line : 2400",
-          "name : Page D",
-          "pv : 9800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "area : 200",
-          "line : 2400",
-          "bar : 9800",
-          "pv : 9800",
-          "name : Page D",
-        ]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(5);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: "#3182bd",
-          dataKey: "uv",
-          fill: "#3182bd",
-          graphicalItemId: "area-uv",
-          hide: false,
-          name: "area",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "bar-pv",
-          hide: false,
-          name: "bar",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: "#3182bd",
-          dataKey: "amt",
-          fill: "#fff",
-          graphicalItemId: "line-amt",
-          hide: false,
-          name: "line",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 2400,
-        });
-        expect(spy).toHaveBeenNthCalledWith(4, {
-          color: undefined,
-          dataKey: "name",
-          fill: undefined,
-          graphicalItemId: "scatter-uv",
-          hide: false,
-          name: "name",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: "Page D",
-        });
-        expect(spy).toHaveBeenNthCalledWith(5, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "scatter-uv",
-          hide: false,
-          name: "pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 9800,
-        });
-      });
-    });
-  });
-
-  describe("with name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <ComposedChart width={300} height={300} data={PageData}>
-          <Line dataKey="amt" name="Line" id="line-amt" />
-          <Area dataKey="uv" name="Area" id="area-uv" />
-          <Bar dataKey="pv" name="Bar" id="bar-pv" />
-          <Scatter dataKey="uv" name="Scatter" id="scatter-uv" />
-          <YAxis dataKey="pv" name="YAxis" />
-          <XAxis dataKey="name" name="XAxis" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </ComposedChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area : 200",
-          "Bar : 9800",
-          "Line : 2400",
-          "XAxis : Page D",
-          "YAxis : 9800",
-        ]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: "#3182bd",
-            dataKey: "amt",
-            fill: "#fff",
-            graphicalItemId: "line-amt",
-            hide: false,
-            name: "Line",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-          },
-          {
-            color: "#3182bd",
-            dataKey: "uv",
-            fill: "#3182bd",
-            graphicalItemId: "area-uv",
-            hide: false,
-            name: "Area",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 400,
-          },
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            graphicalItemId: "bar-pv",
-            hide: false,
-            name: "Bar",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-          },
-          {
-            color: undefined,
-            dataKey: "name",
-            fill: undefined,
-            graphicalItemId: "scatter-uv",
-            hide: false,
-            name: "XAxis",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            type: undefined,
-            unit: "",
-            value: "Page A",
-          },
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            graphicalItemId: "scatter-uv",
-            hide: false,
-            name: "YAxis",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            type: undefined,
-            unit: "",
-            value: 2400,
-          },
-        ]);
-        expect(spy).toHaveBeenCalledTimes(3);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Line : 2400",
-          "XAxis : Page D",
-          "Bar : 9800",
-          "YAxis : 9800",
-          "Area : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area : 200",
-          "Line : 2400",
-          "Bar : 9800",
-          "XAxis : Page D",
-          "YAxis : 9800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area : 200",
-          "Bar : 9800",
-          "Line : 2400",
-          "XAxis : Page D",
-          "YAxis : 9800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area : 200",
-          "Line : 2400",
-          "Bar : 9800",
-          "YAxis : 9800",
-          "XAxis : Page D",
-        ]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, composedChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(5);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: "#3182bd",
-          dataKey: "amt",
-          fill: "#fff",
-          graphicalItemId: "line-amt",
-          hide: false,
-          name: "Line",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 2400,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: "#3182bd",
-          dataKey: "uv",
-          fill: "#3182bd",
-          graphicalItemId: "area-uv",
-          hide: false,
-          name: "Area",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "bar-pv",
-          hide: false,
-          name: "Bar",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(4, {
-          color: undefined,
-          dataKey: "name",
-          fill: undefined,
-          graphicalItemId: "scatter-uv",
-          hide: false,
-          name: "XAxis",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: "Page D",
-        });
-        expect(spy).toHaveBeenNthCalledWith(5, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "scatter-uv",
-          hide: false,
-          name: "YAxis",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 9800,
-        });
-      });
-    });
-  });
-});
-
-describe("itemSorter in PieChart", () => {
-  beforeEach(() => {
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  function renderTestCase<T>(
-    itemSorter: TooltipItemSorter | undefined,
-    selector?: (state: RechartsRootState) => T,
-  ) {
-    return createSelectorTestCase((props) => (
-      <PieChart width={300} height={300}>
-        <Pie data={PageData} dataKey="uv" isAnimationActive={false} id="pie-uv" />
-        <Tooltip itemSorter={itemSorter} />
-        {props.children}
-      </PieChart>
-    ))(selector);
-  }
-
-  describe("when itemSorter is undefined", () => {
-    it("should render only one item in the Tooltip so there is nothing to sort", () => {
-      const { container } = renderTestCase(undefined);
-      showTooltip(container, pieChartMouseHoverTooltipSelector);
-      expectTooltipPayload(container, "", ["Page A : 400"]);
-    });
-
-    it("should select payload with only one item so there is nothing to sort", () => {
-      const { spy } = renderTestCase(undefined, (state) =>
-        selectTooltipPayload(state, "item", "hover", "0"),
-      );
-      expectLastCalledWith(spy, [
-        {
-          color: "#808080",
-          dataKey: "uv",
-          fill: "#808080",
-          graphicalItemId: "pie-uv",
-          hide: false,
-          name: "Page A",
-          nameKey: "name",
-          payload: {
-            amt: 2400,
-            name: "Page A",
-            pv: 2400,
-            uv: 400,
-          },
-          stroke: "#fff",
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 400,
-        },
-      ]);
-    });
-  });
-});
-
-describe("itemSorter in RadarChart", () => {
-  beforeEach(() => {
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  describe("without name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <RadarChart width={600} height={600} data={PageData}>
-          <Radar dataKey="uv" isAnimationActive={false} id="radar-uv" />
-          <Radar dataKey="pv" isAnimationActive={false} id="radar-pv" />
-          <Radar dataKey="amt" isAnimationActive={false} id="radar-amt" />
-          <PolarAngleAxis dataKey="name" />
-          <PolarRadiusAxis dataKey="uv" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </RadarChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", ["amt : 2400", "pv : 4800", "uv : 189"]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: undefined,
-            dataKey: "uv",
-            fill: undefined,
-            graphicalItemId: "radar-uv",
-            hide: false,
-            name: "uv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: "",
-            value: 400,
-          },
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            graphicalItemId: "radar-pv",
-            hide: false,
-            name: "pv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: "",
-            value: 2400,
-          },
-          {
-            color: undefined,
-            dataKey: "amt",
-            fill: undefined,
-            graphicalItemId: "radar-amt",
-            hide: false,
-            name: "amt",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: "",
-            value: 2400,
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", ["amt : 2400", "pv : 4800", "uv : 189"]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", ["uv : 189", "amt : 2400", "pv : 4800"]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", ["amt : 2400", "pv : 4800", "uv : 189"]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", ["uv : 189", "amt : 2400", "pv : 4800"]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(3);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: undefined,
-          dataKey: "uv",
-          fill: undefined,
-          graphicalItemId: "radar-uv",
-          hide: false,
-          name: "uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page F",
-            pv: 4800,
-            uv: 189,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 189,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "radar-pv",
-          hide: false,
-          name: "pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page F",
-            pv: 4800,
-            uv: 189,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 4800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: undefined,
-          dataKey: "amt",
-          fill: undefined,
-          graphicalItemId: "radar-amt",
-          hide: false,
-          name: "amt",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page F",
-            pv: 4800,
-            uv: 189,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 2400,
-        });
-      });
-    });
-  });
-
-  describe("with name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <RadarChart width={600} height={600} data={PageData}>
-          <Radar dataKey="uv" isAnimationActive={false} name="Radar-uv" id="radar-uv" />
-          <Radar dataKey="pv" isAnimationActive={false} name="Radar-pv" id="radar-pv" />
-          <Radar dataKey="amt" isAnimationActive={false} name="Radar-amt" id="radar-amt" />
-          <PolarAngleAxis dataKey="name" name="PolarAngleAxis" />
-          <PolarRadiusAxis dataKey="uv" name="PolarRadiusAxis" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </RadarChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", [
-          "Radar-amt : 2400",
-          "Radar-pv : 4800",
-          "Radar-uv : 189",
-        ]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: undefined,
-            dataKey: "uv",
-            fill: undefined,
-            graphicalItemId: "radar-uv",
-            hide: false,
-            name: "Radar-uv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: "",
-            value: 400,
-          },
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            graphicalItemId: "radar-pv",
-            hide: false,
-            name: "Radar-pv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            type: undefined,
-            unit: "",
-            value: 2400,
-          },
-          {
-            color: undefined,
-            dataKey: "amt",
-            fill: undefined,
-            graphicalItemId: "radar-amt",
-            hide: false,
-            name: "Radar-amt",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: "",
-            value: 2400,
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", [
-          "Radar-amt : 2400",
-          "Radar-pv : 4800",
-          "Radar-uv : 189",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", [
-          "Radar-uv : 189",
-          "Radar-amt : 2400",
-          "Radar-pv : 4800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, radarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page F", [
-          "Radar-amt : 2400",
-          "Radar-pv : 4800",
-          "Radar-uv : 189",
-        ]);
-      });
-    });
-  });
-});
-
-describe("itemSorter in RadialBarChart", () => {
-  beforeEach(() => {
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  describe("without name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <RadialBarChart width={600} height={600} data={PageData}>
-          <RadialBar dataKey="uv" isAnimationActive={false} id="radialbar-uv" />
-          <RadialBar dataKey="pv" isAnimationActive={false} id="radialbar-pv" />
-          <RadialBar dataKey="amt" isAnimationActive={false} id="radialbar-amt" />
-          <PolarAngleAxis dataKey="uv" />
-          <PolarRadiusAxis dataKey="name" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </RadialBarChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: undefined,
-            fill: undefined,
-            graphicalItemId: "radialbar-uv",
-            dataKey: "uv",
-            name: "uv",
-            hide: false,
-            nameKey: undefined,
-            unit: "",
-            payload: {
-              name: "Page A",
-              uv: 400,
-              pv: 2400,
-              amt: 2400,
-              background: {
-                cx: 300,
-                cy: 300,
-                innerRadius: 3.9333333333333336,
-                outerRadius: 11.933333333333334,
-                startAngle: 0,
-                endAngle: 360,
-              },
-              clockWise: false,
-              payload: {
-                name: "Page A",
-                uv: 400,
-                pv: 2400,
-                amt: 2400,
-              },
-              value: 400,
-              cx: 300,
-              cy: 300,
-              innerRadius: 3.9333333333333336,
-              outerRadius: 11.933333333333334,
-              startAngle: 0,
-              endAngle: 360,
-            },
-            stroke: undefined,
-            type: undefined,
-            value: 400,
-          },
-          {
-            color: undefined,
-            fill: undefined,
-            graphicalItemId: "radialbar-pv",
-            dataKey: "pv",
-            name: "pv",
-            hide: false,
-            nameKey: undefined,
-            unit: "",
-            payload: {
-              name: "Page A",
-              uv: 400,
-              pv: 2400,
-              amt: 2400,
-              background: {
-                cx: 300,
-                cy: 300,
-                innerRadius: 15.933333333333334,
-                outerRadius: 23.933333333333334,
-                startAngle: 0,
-                endAngle: 360,
-              },
-              clockWise: false,
-              payload: {
-                name: "Page A",
-                uv: 400,
-                pv: 2400,
-                amt: 2400,
-              },
-              value: 2400,
-              cx: 300,
-              cy: 300,
-              innerRadius: 15.933333333333334,
-              outerRadius: 23.933333333333334,
-              startAngle: 0,
-              endAngle: 2160,
-            },
-            stroke: undefined,
-            type: undefined,
-            value: 2400,
-          },
-          {
-            color: undefined,
-            fill: undefined,
-            graphicalItemId: "radialbar-amt",
-            dataKey: "amt",
-            name: "amt",
-            hide: false,
-            nameKey: undefined,
-            unit: "",
-            payload: {
-              name: "Page A",
-              uv: 400,
-              pv: 2400,
-              amt: 2400,
-              background: {
-                cx: 300,
-                cy: 300,
-                innerRadius: 27.933333333333334,
-                outerRadius: 35.93333333333334,
-                startAngle: 0,
-                endAngle: 360,
-              },
-              clockWise: false,
-              payload: {
-                name: "Page A",
-                uv: 400,
-                pv: 2400,
-                amt: 2400,
-              },
-              value: 2400,
-              cx: 300,
-              cy: 300,
-              innerRadius: 27.933333333333334,
-              outerRadius: 35.93333333333334,
-              startAngle: 0,
-              endAngle: 2160,
-            },
-            stroke: undefined,
-            type: undefined,
-            value: 2400,
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["uv : 200", "amt : 2400", "pv : 9800"]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["uv : 200", "amt : 2400", "pv : 9800"]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(3);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: undefined,
-          dataKey: "uv",
-          fill: undefined,
-          graphicalItemId: "radialbar-uv",
-          hide: false,
-          name: "uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            background: {
-              cx: 300,
-              cy: 300,
-              endAngle: 360,
-              innerRadius: 121.93333333333334,
-              outerRadius: 129.93333333333334,
-              startAngle: 0,
-            },
-            clockWise: false,
-            cx: 300,
-            cy: 300,
-            endAngle: 180,
-            innerRadius: 121.93333333333334,
-            name: "Page D",
-            outerRadius: 129.93333333333334,
-            payload: {
-              amt: 2400,
-              name: "Page D",
-              pv: 9800,
-              uv: 200,
-            },
-            pv: 9800,
-            startAngle: 0,
-            uv: 200,
-            value: 200,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "radialbar-pv",
-          hide: false,
-          name: "pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            background: {
-              cx: 300,
-              cy: 300,
-              endAngle: 360,
-              innerRadius: 133.93333333333334,
-              outerRadius: 141.93333333333334,
-              startAngle: 0,
-            },
-            clockWise: false,
-            cx: 300,
-            cy: 300,
-            endAngle: 8820,
-            innerRadius: 133.93333333333334,
-            name: "Page D",
-            outerRadius: 141.93333333333334,
-            payload: {
-              amt: 2400,
-              name: "Page D",
-              pv: 9800,
-              uv: 200,
-            },
-            pv: 9800,
-            startAngle: 0,
-            uv: 200,
-            value: 9800,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: undefined,
-          dataKey: "amt",
-          fill: undefined,
-          graphicalItemId: "radialbar-amt",
-          hide: false,
-          name: "amt",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            background: {
-              cx: 300,
-              cy: 300,
-              endAngle: 360,
-              innerRadius: 145.93333333333334,
-              outerRadius: 153.93333333333334,
-              startAngle: 0,
-            },
-            clockWise: false,
-            cx: 300,
-            cy: 300,
-            endAngle: 2160,
-            innerRadius: 145.93333333333334,
-            name: "Page D",
-            outerRadius: 153.93333333333334,
-            payload: {
-              amt: 2400,
-              name: "Page D",
-              pv: 9800,
-              uv: 200,
-            },
-            pv: 9800,
-            startAngle: 0,
-            uv: 200,
-            value: 2400,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 2400,
-        });
-      });
-    });
-  });
-
-  describe("with name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <RadialBarChart width={600} height={600} data={PageData}>
-          <RadialBar dataKey="uv" isAnimationActive={false} name="RadialBar-uv" id="radialbar-uv" />
-          <RadialBar dataKey="pv" isAnimationActive={false} name="RadialBar-pv" id="radialbar-pv" />
-          <RadialBar
-            dataKey="amt"
-            isAnimationActive={false}
-            name="RadialBar-amt"
-            id="radialbar-amt"
-          />
-          <PolarAngleAxis dataKey="uv" name="PolarAngleAxis" />
-          <PolarRadiusAxis dataKey="name" name="PolarRadiusAxis" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </RadialBarChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "RadialBar-amt : 2400",
-          "RadialBar-pv : 9800",
-          "RadialBar-uv : 200",
-        ]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: undefined,
-            fill: undefined,
-            graphicalItemId: "radialbar-uv",
-            dataKey: "uv",
-            name: "RadialBar-uv",
-            hide: false,
-            nameKey: undefined,
-            unit: "",
-            payload: {
-              name: "Page A",
-              uv: 400,
-              pv: 2400,
-              amt: 2400,
-              background: {
-                cx: 300,
-                cy: 300,
-                innerRadius: 3.9333333333333336,
-                outerRadius: 11.933333333333334,
-                startAngle: 0,
-                endAngle: 360,
-              },
-              clockWise: false,
-              payload: {
-                name: "Page A",
-                uv: 400,
-                pv: 2400,
-                amt: 2400,
-              },
-              value: 400,
-              cx: 300,
-              cy: 300,
-              innerRadius: 3.9333333333333336,
-              outerRadius: 11.933333333333334,
-              startAngle: 0,
-              endAngle: 360,
-            },
-            stroke: undefined,
-            type: undefined,
-            value: 400,
-          },
-          {
-            color: undefined,
-            fill: undefined,
-            graphicalItemId: "radialbar-pv",
-            dataKey: "pv",
-            name: "RadialBar-pv",
-            hide: false,
-            nameKey: undefined,
-            unit: "",
-            payload: {
-              name: "Page A",
-              uv: 400,
-              pv: 2400,
-              amt: 2400,
-              background: {
-                cx: 300,
-                cy: 300,
-                innerRadius: 15.933333333333334,
-                outerRadius: 23.933333333333334,
-                startAngle: 0,
-                endAngle: 360,
-              },
-              clockWise: false,
-              payload: {
-                name: "Page A",
-                uv: 400,
-                pv: 2400,
-                amt: 2400,
-              },
-              value: 2400,
-              cx: 300,
-              cy: 300,
-              innerRadius: 15.933333333333334,
-              outerRadius: 23.933333333333334,
-              startAngle: 0,
-              endAngle: 2160,
-            },
-            stroke: undefined,
-            type: undefined,
-            value: 2400,
-          },
-          {
-            color: undefined,
-            fill: undefined,
-            graphicalItemId: "radialbar-amt",
-            dataKey: "amt",
-            name: "RadialBar-amt",
-            hide: false,
-            nameKey: undefined,
-            unit: "",
-            payload: {
-              name: "Page A",
-              uv: 400,
-              pv: 2400,
-              amt: 2400,
-              background: {
-                cx: 300,
-                cy: 300,
-                innerRadius: 27.933333333333334,
-                outerRadius: 35.93333333333334,
-                startAngle: 0,
-                endAngle: 360,
-              },
-              clockWise: false,
-              payload: {
-                name: "Page A",
-                uv: 400,
-                pv: 2400,
-                amt: 2400,
-              },
-              value: 2400,
-              cx: 300,
-              cy: 300,
-              innerRadius: 27.933333333333334,
-              outerRadius: 35.93333333333334,
-              startAngle: 0,
-              endAngle: 2160,
-            },
-            stroke: undefined,
-            type: undefined,
-            value: 2400,
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "RadialBar-amt : 2400",
-          "RadialBar-pv : 9800",
-          "RadialBar-uv : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "RadialBar-uv : 200",
-          "RadialBar-amt : 2400",
-          "RadialBar-pv : 9800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "RadialBar-amt : 2400",
-          "RadialBar-pv : 9800",
-          "RadialBar-uv : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "RadialBar-uv : 200",
-          "RadialBar-amt : 2400",
-          "RadialBar-pv : 9800",
-        ]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(3);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: undefined,
-          dataKey: "uv",
-          fill: undefined,
-          graphicalItemId: "radialbar-uv",
-          hide: false,
-          name: "RadialBar-uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            background: {
-              cx: 300,
-              cy: 300,
-              endAngle: 360,
-              innerRadius: 121.93333333333334,
-              outerRadius: 129.93333333333334,
-              startAngle: 0,
-            },
-            clockWise: false,
-            cx: 300,
-            cy: 300,
-            endAngle: 180,
-            innerRadius: 121.93333333333334,
-            name: "Page D",
-            outerRadius: 129.93333333333334,
-            payload: {
-              amt: 2400,
-              name: "Page D",
-              pv: 9800,
-              uv: 200,
-            },
-            pv: 9800,
-            startAngle: 0,
-            uv: 200,
-            value: 200,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "radialbar-pv",
-          hide: false,
-          name: "RadialBar-pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            background: {
-              cx: 300,
-              cy: 300,
-              endAngle: 360,
-              innerRadius: 133.93333333333334,
-              outerRadius: 141.93333333333334,
-              startAngle: 0,
-            },
-            clockWise: false,
-            cx: 300,
-            cy: 300,
-            endAngle: 8820,
-            innerRadius: 133.93333333333334,
-            name: "Page D",
-            outerRadius: 141.93333333333334,
-            payload: {
-              amt: 2400,
-              name: "Page D",
-              pv: 9800,
-              uv: 200,
-            },
-            pv: 9800,
-            startAngle: 0,
-            uv: 200,
-            value: 9800,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: undefined,
-          dataKey: "amt",
-          fill: undefined,
-          graphicalItemId: "radialbar-amt",
-          hide: false,
-          name: "RadialBar-amt",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            background: {
-              cx: 300,
-              cy: 300,
-              endAngle: 360,
-              innerRadius: 145.93333333333334,
-              outerRadius: 153.93333333333334,
-              startAngle: 0,
-            },
-            clockWise: false,
-            cx: 300,
-            cy: 300,
-            endAngle: 2160,
-            innerRadius: 145.93333333333334,
-            name: "Page D",
-            outerRadius: 153.93333333333334,
-            payload: {
-              amt: 2400,
-              name: "Page D",
-              pv: 9800,
-              uv: 200,
-            },
-            pv: 9800,
-            startAngle: 0,
-            uv: 200,
-            value: 2400,
-          },
-          stroke: undefined,
-          type: undefined,
-          unit: "",
-          value: 2400,
-        });
-      });
-    });
-  });
-});
-
-// Funnel, Treemap, Sankey - always only render one payload item so there is nothing to sort either
-
-describe("itemSorter in stacked BarChart", () => {
-  beforeEach(() => {
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  describe("without name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <BarChart width={300} height={300} data={PageData}>
-          <Bar dataKey="pv" stackId="stack-1" id="bar-pv" />
-          <Bar dataKey="uv" stackId="stack-1" id="bar-uv" />
-          <Bar dataKey="amt" stackId="stack-1" id="bar-amt" />
-          <YAxis />
-          <XAxis dataKey="name" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </BarChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            graphicalItemId: "bar-pv",
-            hide: false,
-            name: "pv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-          },
-          {
-            color: undefined,
-            dataKey: "uv",
-            fill: undefined,
-            graphicalItemId: "bar-uv",
-            hide: false,
-            name: "uv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 400,
-          },
-          {
-            color: undefined,
-            dataKey: "amt",
-            fill: undefined,
-            graphicalItemId: "bar-amt",
-            hide: false,
-            name: "amt",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["uv : 200", "amt : 2400", "pv : 9800"]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["uv : 200", "amt : 2400", "pv : 9800"]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(3);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "bar-pv",
-          hide: false,
-          name: "pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: undefined,
-          dataKey: "uv",
-          fill: undefined,
-          graphicalItemId: "bar-uv",
-          hide: false,
-          name: "uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: undefined,
-          dataKey: "amt",
-          fill: undefined,
-          graphicalItemId: "bar-amt",
-          hide: false,
-          name: "amt",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 2400,
-        });
-      });
-    });
-  });
-
-  describe("with name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <BarChart width={300} height={300} data={PageData}>
-          <Bar dataKey="pv" stackId="stack-1" name="Bar-pv" id="bar-pv" />
-          <Bar dataKey="uv" stackId="stack-1" name="Bar-uv" id="bar-uv" />
-          <Bar dataKey="amt" stackId="stack-1" name="Bar-amt" id="bar-amt" />
-          <YAxis name="YAxis" />
-          <XAxis dataKey="name" name="XAxis" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </BarChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Bar-amt : 2400",
-          "Bar-pv : 9800",
-          "Bar-uv : 200",
-        ]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: undefined,
-            dataKey: "pv",
-            fill: undefined,
-            graphicalItemId: "bar-pv",
-            hide: false,
-            name: "Bar-pv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-          },
-          {
-            color: undefined,
-            dataKey: "uv",
-            fill: undefined,
-            graphicalItemId: "bar-uv",
-            hide: false,
-            name: "Bar-uv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 400,
-          },
-          {
-            color: undefined,
-            dataKey: "amt",
-            fill: undefined,
-            graphicalItemId: "bar-amt",
-            hide: false,
-            name: "Bar-amt",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: undefined,
-            strokeWidth: undefined,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Bar-amt : 2400",
-          "Bar-pv : 9800",
-          "Bar-uv : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Bar-uv : 200",
-          "Bar-amt : 2400",
-          "Bar-pv : 9800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Bar-amt : 2400",
-          "Bar-pv : 9800",
-          "Bar-uv : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Bar-uv : 200",
-          "Bar-amt : 2400",
-          "Bar-pv : 9800",
-        ]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(3);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: "bar-pv",
-          hide: false,
-          name: "Bar-pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: undefined,
-          dataKey: "uv",
-          fill: undefined,
-          graphicalItemId: "bar-uv",
-          hide: false,
-          name: "Bar-uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: undefined,
-          dataKey: "amt",
-          fill: undefined,
-          graphicalItemId: "bar-amt",
-          hide: false,
-          name: "Bar-amt",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: undefined,
-          value: 2400,
-        });
-      });
-    });
-  });
-});
-
-describe("itemSorter in stacked AreaChart", () => {
-  beforeEach(() => {
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  describe("without name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <AreaChart width={300} height={300} data={PageData}>
-          <Area dataKey="pv" stackId="stack-1" id="area-pv" />
-          <Area dataKey="uv" stackId="stack-1" id="area-uv" />
-          <Area dataKey="amt" stackId="stack-1" id="area-amt" />
-          <YAxis />
-          <XAxis dataKey="name" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </AreaChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload sorted by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: "#3182bd",
-            dataKey: "pv",
-            fill: "#3182bd",
-            hide: false,
-            name: "pv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-            graphicalItemId: "area-pv",
-          },
-          {
-            color: "#3182bd",
-            dataKey: "uv",
-            fill: "#3182bd",
-            hide: false,
-            name: "uv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 400,
-            graphicalItemId: "area-uv",
-          },
-          {
-            color: "#3182bd",
-            dataKey: "amt",
-            fill: "#3182bd",
-            hide: false,
-            name: "amt",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-            graphicalItemId: "area-amt",
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["uv : 200", "amt : 2400", "pv : 9800"]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["amt : 2400", "pv : 9800", "uv : 200"]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", ["uv : 200", "amt : 2400", "pv : 9800"]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(3);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: "#3182bd",
-          dataKey: "pv",
-          fill: "#3182bd",
-          graphicalItemId: "area-pv",
-          hide: false,
-          name: "pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: "#3182bd",
-          dataKey: "uv",
-          fill: "#3182bd",
-          graphicalItemId: "area-uv",
-          hide: false,
-          name: "uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: "#3182bd",
-          dataKey: "amt",
-          fill: "#3182bd",
-          graphicalItemId: "area-amt",
-          hide: false,
-          name: "amt",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 2400,
-        });
-      });
-    });
-  });
-
-  describe("with name prop", () => {
-    function renderTestCase<T>(
-      itemSorter: TooltipItemSorter | undefined,
-      selector?: (state: RechartsRootState) => T,
-    ) {
-      return createSelectorTestCase((props) => (
-        <AreaChart width={300} height={300} data={PageData}>
-          <Area dataKey="pv" stackId="stack-1" name="Area-pv" id="area-pv" />
-          <Area dataKey="uv" stackId="stack-1" name="Area-uv" id="area-uv" />
-          <Area dataKey="amt" stackId="stack-1" name="Area-amt" id="area-amt" />
-          <YAxis name="YAxis" />
-          <XAxis dataKey="name" name="XAxis" />
-          <Tooltip itemSorter={itemSorter} />
-          {props.children}
-        </AreaChart>
-      ))(selector);
-    }
-
-    describe("when itemSorter is undefined", () => {
-      it("should render payload by name", () => {
-        const { container } = renderTestCase(undefined);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area-amt : 2400",
-          "Area-pv : 9800",
-          "Area-uv : 200",
-        ]);
-      });
-
-      it("should select payload sorted by name", () => {
-        const { spy } = renderTestCase(undefined, (state) =>
-          selectTooltipPayload(state, "axis", "hover", "0"),
-        );
-        expectLastCalledWith(spy, [
-          {
-            color: "#3182bd",
-            dataKey: "pv",
-            fill: "#3182bd",
-            hide: false,
-            name: "Area-pv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-            graphicalItemId: "area-pv",
-          },
-          {
-            color: "#3182bd",
-            dataKey: "uv",
-            fill: "#3182bd",
-            hide: false,
-            name: "Area-uv",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 400,
-            graphicalItemId: "area-uv",
-          },
-          {
-            color: "#3182bd",
-            dataKey: "amt",
-            fill: "#3182bd",
-            hide: false,
-            name: "Area-amt",
-            nameKey: undefined,
-            payload: {
-              amt: 2400,
-              name: "Page A",
-              pv: 2400,
-              uv: 400,
-            },
-            stroke: "#3182bd",
-            strokeWidth: 1,
-            type: undefined,
-            unit: undefined,
-            value: 2400,
-            graphicalItemId: "area-amt",
-          },
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`dataKey`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("dataKey");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area-amt : 2400",
-          "Area-pv : 9800",
-          "Area-uv : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`value`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("value");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area-uv : 200",
-          "Area-amt : 2400",
-          "Area-pv : 9800",
-        ]);
-      });
-    });
-
-    describe("when itemSorter=`name`", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase("name");
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area-amt : 2400",
-          "Area-pv : 9800",
-          "Area-uv : 200",
-        ]);
-      });
-    });
-
-    describe("when itemSorter is a function", () => {
-      it("should render sorted payload", () => {
-        const { container } = renderTestCase((item) => String(item.value));
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expectTooltipPayload(container, "Page D", [
-          "Area-uv : 200",
-          "Area-amt : 2400",
-          "Area-pv : 9800",
-        ]);
-      });
-
-      it("should call the function once for every payload item, and pass the item as an argument", () => {
-        const spy = vi.fn();
-        const { container } = renderTestCase(spy);
-        expect(spy).toHaveBeenCalledTimes(0);
-        showTooltip(container, barChartMouseHoverTooltipSelector);
-        expect(spy).toHaveBeenCalledTimes(3);
-        expect(spy).toHaveBeenNthCalledWith(1, {
-          color: "#3182bd",
-          dataKey: "pv",
-          fill: "#3182bd",
-          graphicalItemId: "area-pv",
-          hide: false,
-          name: "Area-pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 9800,
-        });
-        expect(spy).toHaveBeenNthCalledWith(2, {
-          color: "#3182bd",
-          dataKey: "uv",
-          fill: "#3182bd",
-          graphicalItemId: "area-uv",
-          hide: false,
-          name: "Area-uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 200,
-        });
-        expect(spy).toHaveBeenNthCalledWith(3, {
-          color: "#3182bd",
-          dataKey: "amt",
-          fill: "#3182bd",
-          graphicalItemId: "area-amt",
-          hide: false,
-          name: "Area-amt",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page D",
-            pv: 9800,
-            uv: 200,
-          },
-          stroke: "#3182bd",
-          strokeWidth: 1,
-          type: undefined,
-          unit: undefined,
-          value: 2400,
-        });
-      });
-    });
-  });
-});