solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,2815 @@
+/*
+ * 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,
+        });
+      });
+    });
+  });
+});