@wallarm-org/design-system 3.4.1-rc-fix-data-display-category.2 → 4.0.0

package/dist/components/NavRail/NavRailItem.js

@@ -14,7 +14,7 @@ import { navRailItemCompactLabelClassName, navRailItemVariants } from "./classes
 import { useNavRailContext } from "./NavRailContext.js";
 import { useShortcut } from "./useShortcut.js";
 const NavRailItem = (t0)=>{
-    const $ = c(57);
+    const $ = c(58);
     let Icon;
     let avatarSrc;
     let children;
@@ -89,12 +89,13 @@ const NavRailItem = (t0)=>{
         $[19] = t7;
     } else t7 = $[19];
     let t8;
-    if ($[20] !== Icon || $[21] !== avatarSrc || $[22] !== hasPlate) {
+    if ($[20] !== Icon || $[21] !== avatarSrc || $[22] !== hasPlate || $[23] !== testId) {
         t8 = /*#__PURE__*/ jsx("span", {
             className: "flex shrink-0 items-center justify-center",
             children: hasPlate ? /*#__PURE__*/ jsxs(Avatar, {
                 size: "md",
                 "data-slot": "nav-rail-item-avatar",
+                "data-testid": testId && `${testId}--avatar`,
                 className: "-m-4",
                 children: [
                     /*#__PURE__*/ jsx(AvatarImage, {
@@ -111,39 +112,40 @@ const NavRailItem = (t0)=>{
         $[20] = Icon;
         $[21] = avatarSrc;
         $[22] = hasPlate;
-        $[23] = t8;
-    } else t8 = $[23];
+        $[23] = testId;
+        $[24] = t8;
+    } else t8 = $[24];
     let t9;
-    if ($[24] !== label || $[25] !== mode) {
+    if ($[25] !== label || $[26] !== mode) {
         t9 = "expanded" === mode && /*#__PURE__*/ jsx("span", {
             className: cn("truncate whitespace-nowrap transition-[opacity,width] duration-200 pl-8"),
             children: label
         });
-        $[24] = label;
-        $[25] = mode;
-        $[26] = t9;
-    } else t9 = $[26];
+        $[25] = label;
+        $[26] = mode;
+        $[27] = t9;
+    } else t9 = $[27];
     let t10;
-    if ($[27] !== label || $[28] !== mode || $[29] !== showsLabel) {
+    if ($[28] !== label || $[29] !== mode || $[30] !== showsLabel) {
         t10 = showsLabel && "compact" === mode && /*#__PURE__*/ jsx("span", {
             className: navRailItemCompactLabelClassName,
             children: label
         });
-        $[27] = label;
-        $[28] = mode;
-        $[29] = showsLabel;
-        $[30] = t10;
-    } else t10 = $[30];
+        $[28] = label;
+        $[29] = mode;
+        $[30] = showsLabel;
+        $[31] = t10;
+    } else t10 = $[31];
     let t11;
-    if ($[31] !== children) {
+    if ($[32] !== children) {
         t11 = /*#__PURE__*/ jsx(Slottable, {
             children: children
         });
-        $[31] = children;
-        $[32] = t11;
-    } else t11 = $[32];
+        $[32] = children;
+        $[33] = t11;
+    } else t11 = $[33];
     let t12;
-    if ($[33] !== Comp || $[34] !== props || $[35] !== t10 || $[36] !== t11 || $[37] !== t4 || $[38] !== t5 || $[39] !== t6 || $[40] !== t7 || $[41] !== t8 || $[42] !== t9 || $[43] !== testId) {
+    if ($[34] !== Comp || $[35] !== props || $[36] !== t10 || $[37] !== t11 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9 || $[44] !== testId) {
         t12 = /*#__PURE__*/ jsxs(Comp, {
             ...props,
             ref: t4,
@@ -159,29 +161,29 @@ const NavRailItem = (t0)=>{
                 t11
             ]
         });
-        $[33] = Comp;
-        $[34] = props;
-        $[35] = t10;
-        $[36] = t11;
-        $[37] = t4;
-        $[38] = t5;
-        $[39] = t6;
-        $[40] = t7;
-        $[41] = t8;
-        $[42] = t9;
-        $[43] = testId;
-        $[44] = t12;
-    } else t12 = $[44];
+        $[34] = Comp;
+        $[35] = props;
+        $[36] = t10;
+        $[37] = t11;
+        $[38] = t4;
+        $[39] = t5;
+        $[40] = t6;
+        $[41] = t7;
+        $[42] = t8;
+        $[43] = t9;
+        $[44] = testId;
+        $[45] = t12;
+    } else t12 = $[45];
     const element = t12;
     let t13;
-    if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
         t13 = {
             placement: "right"
         };
-        $[45] = t13;
-    } else t13 = $[45];
+        $[46] = t13;
+    } else t13 = $[46];
     let t14;
-    if ($[46] !== element || $[47] !== props) {
+    if ($[47] !== element || $[48] !== props) {
         t14 = /*#__PURE__*/ jsx(TooltipTrigger, {
             asChild: true,
             children: props["aria-haspopup"] ? /*#__PURE__*/ jsx("span", {
@@ -189,18 +191,18 @@ const NavRailItem = (t0)=>{
                 children: element
             }) : element
         });
-        $[46] = element;
-        $[47] = props;
-        $[48] = t14;
-    } else t14 = $[48];
+        $[47] = element;
+        $[48] = props;
+        $[49] = t14;
+    } else t14 = $[49];
     let t15;
-    if ($[49] !== shortcut) {
+    if ($[50] !== shortcut) {
         t15 = shortcut && shortcut.length > 0 && shortcut.map(_temp);
-        $[49] = shortcut;
-        $[50] = t15;
-    } else t15 = $[50];
+        $[50] = shortcut;
+        $[51] = t15;
+    } else t15 = $[51];
     let t16;
-    if ($[51] !== label || $[52] !== t15) {
+    if ($[52] !== label || $[53] !== t15) {
         t16 = /*#__PURE__*/ jsxs(TooltipContent, {
             children: [
                 label,
@@ -208,12 +210,12 @@ const NavRailItem = (t0)=>{
                 t15
             ]
         });
-        $[51] = label;
-        $[52] = t15;
-        $[53] = t16;
-    } else t16 = $[53];
+        $[52] = label;
+        $[53] = t15;
+        $[54] = t16;
+    } else t16 = $[54];
     let t17;
-    if ($[54] !== t14 || $[55] !== t16) {
+    if ($[55] !== t14 || $[56] !== t16) {
         t17 = /*#__PURE__*/ jsxs(Tooltip, {
             positioning: t13,
             children: [
@@ -221,10 +223,10 @@ const NavRailItem = (t0)=>{
                 t16
             ]
         });
-        $[54] = t14;
-        $[55] = t16;
-        $[56] = t17;
-    } else t17 = $[56];
+        $[55] = t14;
+        $[56] = t16;
+        $[57] = t17;
+    } else t17 = $[57];
     return t17;
 };
 NavRailItem.displayName = "NavRailItem";

package/dist/components/Select/SelectInput/SelectInputItemRenderer.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useSelectContext } from "@ark-ui/react/select";
+import { useTestId } from "../../../utils/testId.js";
 import { Tag, TagClose } from "../../Tag/index.js";
 const TAG_SIZE_BY_SELECT_SIZE = {
     small: "medium",
@@ -9,10 +10,12 @@ const TAG_SIZE_BY_SELECT_SIZE = {
     "inline-edit": "large"
 };
 const SelectInputItemRenderer = (t0)=>{
-    const $ = c(13);
+    const $ = c(15);
     const { item, size: t1 } = t0;
     const size = void 0 === t1 ? "default" : t1;
     const { value, setValue } = useSelectContext();
+    const testId = useTestId("tag");
+    const closeTestId = useTestId("close");
     let t2;
     if ($[0] !== item.value || $[1] !== setValue || $[2] !== value) {
         t2 = ()=>{
@@ -34,29 +37,33 @@ const SelectInputItemRenderer = (t0)=>{
         $[5] = t4;
     } else t4 = $[5];
     let t5;
-    if ($[6] !== handleRemove) {
+    if ($[6] !== closeTestId || $[7] !== handleRemove) {
         t5 = /*#__PURE__*/ jsx(TagClose, {
-            onClick: handleRemove
+            onClick: handleRemove,
+            "data-testid": closeTestId
         });
-        $[6] = handleRemove;
-        $[7] = t5;
-    } else t5 = $[7];
+        $[6] = closeTestId;
+        $[7] = handleRemove;
+        $[8] = t5;
+    } else t5 = $[8];
     let t6;
-    if ($[8] !== item.label || $[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+    if ($[9] !== item.label || $[10] !== t3 || $[11] !== t4 || $[12] !== t5 || $[13] !== testId) {
         t6 = /*#__PURE__*/ jsxs(Tag, {
             size: t3,
+            "data-testid": testId,
             children: [
                 t4,
                 item.label,
                 t5
             ]
         });
-        $[8] = item.label;
-        $[9] = t3;
-        $[10] = t4;
-        $[11] = t5;
-        $[12] = t6;
-    } else t6 = $[12];
+        $[9] = item.label;
+        $[10] = t3;
+        $[11] = t4;
+        $[12] = t5;
+        $[13] = testId;
+        $[14] = t6;
+    } else t6 = $[14];
     return t6;
 };
 export { SelectInputItemRenderer, TAG_SIZE_BY_SELECT_SIZE };

package/dist/components/Selection/SelectionItem.js

@@ -2,11 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";
 import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
 import { Checkbox, CheckboxIndicator } from "../Checkbox/index.js";
 import { selectionItemVariants } from "./classes.js";
 import { useSelectionContext } from "./useSelectionContext.js";
 const SelectionItem = (t0)=>{
-    const $ = c(28);
+    const $ = c(29);
     const { itemId, disabled: t1, className, children } = t0;
     const disabled = void 0 === t1 ? false : t1;
     const { isSelected, toggleItem, registerDisabled } = useSelectionContext();
@@ -18,6 +19,7 @@ const SelectionItem = (t0)=>{
         $[2] = t2;
     } else t2 = $[2];
     const selected = t2;
+    const testId = useTestId("item");
     let t3;
     let t4;
     if ($[3] !== disabled || $[4] !== itemId || $[5] !== registerDisabled) {
@@ -87,9 +89,10 @@ const SelectionItem = (t0)=>{
         $[21] = t10;
     } else t10 = $[21];
     let t11;
-    if ($[22] !== children || $[23] !== handleClickCapture || $[24] !== t10 || $[25] !== t6 || $[26] !== t7) {
+    if ($[22] !== children || $[23] !== handleClickCapture || $[24] !== t10 || $[25] !== t6 || $[26] !== t7 || $[27] !== testId) {
         t11 = /*#__PURE__*/ jsxs("div", {
             "data-slot": "selection-item",
+            "data-testid": testId,
             "data-selected": t6,
             className: t7,
             onClickCapture: handleClickCapture,
@@ -103,8 +106,9 @@ const SelectionItem = (t0)=>{
         $[24] = t10;
         $[25] = t6;
         $[26] = t7;
-        $[27] = t11;
-    } else t11 = $[27];
+        $[27] = testId;
+        $[28] = t11;
+    } else t11 = $[28];
     return t11;
 };
 SelectionItem.displayName = "SelectionItem";

package/dist/components/SimpleCharts/AreaChart/AreaChartArea.js

@@ -2,12 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect } from "react";
 import { Area } from "recharts";
+import { useTestId } from "../../../utils/testId.js";
 import { LineChartActiveContext, LineChartDataContext } from "../LineChart/LineChartContext.js";
 import { warnLineChartLine } from "../LineChart/lib/warn.js";
 import { AreaChartVariantContext } from "./AreaChartContext.js";
 import { AREA_FILL_OPACITY, AREA_INACTIVE_OPACITY, AREA_STROKE_FILL, AREA_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
 const AreaChartArea = (t0)=>{
-    const $ = c(11);
+    const $ = c(12);
     const { seriesKey, curve: t1, disableAnimation: t2, connectNulls: t3, strokeWidth: t4 } = t0;
     const curve = void 0 === t1 ? "monotone" : t1;
     const connectNulls = void 0 === t3 ? false : t3;
@@ -15,6 +16,7 @@ const AreaChartArea = (t0)=>{
     const dataCtx = useContext(LineChartDataContext);
     const { activeKey } = useContext(LineChartActiveContext);
     const variant = useContext(AreaChartVariantContext);
+    const testId = useTestId("area");
     const series = dataCtx?.seriesByKey.get(seriesKey);
     const isHidden = dataCtx?.hiddenSet.has(seriesKey) ?? false;
     useEffect(()=>{
@@ -34,7 +36,7 @@ const AreaChartArea = (t0)=>{
     const t5 = "stacked" === variant ? "area-stack" : void 0;
     const t6 = isActive ? "true" : void 0;
     let t7;
-    if ($[0] !== connectNulls || $[1] !== curve || $[2] !== fill || $[3] !== opacity || $[4] !== series.label || $[5] !== seriesKey || $[6] !== stroke || $[7] !== strokeWidth || $[8] !== t5 || $[9] !== t6) {
+    if ($[0] !== connectNulls || $[1] !== curve || $[2] !== fill || $[3] !== opacity || $[4] !== series.label || $[5] !== seriesKey || $[6] !== stroke || $[7] !== strokeWidth || $[8] !== t5 || $[9] !== t6 || $[10] !== testId) {
         t7 = /*#__PURE__*/ jsx(Area, {
             dataKey: seriesKey,
             name: series.label,
@@ -52,6 +54,7 @@ const AreaChartArea = (t0)=>{
             stackId: t5,
             isAnimationActive: false,
             "data-slot": "area-chart-area",
+            "data-testid": testId,
             "data-key": seriesKey,
             "data-active": t6
         });
@@ -65,8 +68,9 @@ const AreaChartArea = (t0)=>{
         $[7] = strokeWidth;
         $[8] = t5;
         $[9] = t6;
-        $[10] = t7;
-    } else t7 = $[10];
+        $[10] = testId;
+        $[11] = t7;
+    } else t7 = $[11];
     return t7;
 };
 AreaChartArea.displayName = "AreaChartArea";

package/dist/components/SimpleCharts/BarList/BarListPercent.js

@@ -6,7 +6,7 @@ import { useTestId } from "../../../utils/testId.js";
 import { BarListItemContext } from "./BarListContext.js";
 import { barListPercentSymbolVariants, barListPercentVariants } from "./classes.js";
 const BarListPercent = (t0)=>{
-    const $ = c(21);
+    const $ = c(22);
     let children;
     let className;
     let props;
@@ -33,6 +33,7 @@ const BarListPercent = (t0)=>{
     const digits = void 0 === t1 ? 0 : t1;
     const variant = void 0 === t2 ? "split" : t2;
     const testId = useTestId("percent");
+    const symbolTestId = useTestId("percent-symbol");
     const itemCtx = useContext(BarListItemContext);
     const percent = (itemCtx?.ratio ?? 0) * 100;
     let t3;
@@ -45,12 +46,13 @@ const BarListPercent = (t0)=>{
         $[9] = t3;
     } else t3 = $[9];
     let t4;
-    if ($[10] !== children || $[11] !== digits || $[12] !== percent || $[13] !== variant) {
+    if ($[10] !== children || $[11] !== digits || $[12] !== percent || $[13] !== symbolTestId || $[14] !== variant) {
         t4 = children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 percent.toFixed(digits),
                 /*#__PURE__*/ jsx("span", {
                     "data-slot": "bar-list-percent-symbol",
+                    "data-testid": symbolTestId,
                     className: barListPercentSymbolVariants({
                         variant
                     }),
@@ -61,11 +63,12 @@ const BarListPercent = (t0)=>{
         $[10] = children;
         $[11] = digits;
         $[12] = percent;
-        $[13] = variant;
-        $[14] = t4;
-    } else t4 = $[14];
+        $[13] = symbolTestId;
+        $[14] = variant;
+        $[15] = t4;
+    } else t4 = $[15];
     let t5;
-    if ($[15] !== props || $[16] !== ref || $[17] !== t3 || $[18] !== t4 || $[19] !== testId) {
+    if ($[16] !== props || $[17] !== ref || $[18] !== t3 || $[19] !== t4 || $[20] !== testId) {
         t5 = /*#__PURE__*/ jsx("span", {
             ...props,
             ref: ref,
@@ -74,13 +77,13 @@ const BarListPercent = (t0)=>{
             className: t3,
             children: t4
         });
-        $[15] = props;
-        $[16] = ref;
-        $[17] = t3;
-        $[18] = t4;
-        $[19] = testId;
-        $[20] = t5;
-    } else t5 = $[20];
+        $[16] = props;
+        $[17] = ref;
+        $[18] = t3;
+        $[19] = t4;
+        $[20] = testId;
+        $[21] = t5;
+    } else t5 = $[21];
     return t5;
 };
 BarListPercent.displayName = "BarListPercent";

package/dist/components/SimpleCharts/LineChart/LineChartHoverPopover.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { useTestId } from "../../../utils/testId.js";
 import { ChartHoverCard } from "../internal/ChartHoverCard.js";
 const LineChartHoverPopover = (t0)=>{
-    const $ = c(6);
+    const $ = c(7);
     let props;
     let ref;
     if ($[0] !== t0) {
@@ -14,18 +15,21 @@ const LineChartHoverPopover = (t0)=>{
         props = $[1];
         ref = $[2];
     }
+    const testId = useTestId("hover-popover");
     let t1;
-    if ($[3] !== props || $[4] !== ref) {
+    if ($[3] !== props || $[4] !== ref || $[5] !== testId) {
         t1 = /*#__PURE__*/ jsx(ChartHoverCard, {
             ref: ref,
             role: "tooltip",
             "aria-live": "polite",
+            "data-testid": testId,
             ...props
         });
         $[3] = props;
         $[4] = ref;
-        $[5] = t1;
-    } else t1 = $[5];
+        $[5] = testId;
+        $[6] = t1;
+    } else t1 = $[6];
     return t1;
 };
 LineChartHoverPopover.displayName = "LineChartHoverPopover";

package/dist/components/SimpleCharts/LineChart/LineChartLine.js

@@ -2,18 +2,20 @@ import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect } from "react";
 import { Line } from "recharts";
+import { useTestId } from "../../../utils/testId.js";
 import { LINE_DASH_DASHARRAY, LINE_INACTIVE_OPACITY, LINE_STROKE_FILL, LINE_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
 import { LineChartActiveContext, LineChartDataContext } from "./LineChartContext.js";
 import { warnLineChartLine } from "./lib/warn.js";
 const wrap = (cb)=>cb ? (_props, event)=>cb(event) : void 0;
 const LineChartLine = (t0)=>{
-    const $ = c(19);
+    const $ = c(20);
     const { seriesKey, curve: t1, disableAnimation: t2, connectNulls: t3, strokeWidth: t4, onClick, onMouseEnter, onMouseLeave } = t0;
     const curve = void 0 === t1 ? "monotone" : t1;
     const connectNulls = void 0 === t3 ? false : t3;
     const strokeWidth = void 0 === t4 ? LINE_STROKE_WIDTH : t4;
     const dataCtx = useContext(LineChartDataContext);
     const { activeKey } = useContext(LineChartActiveContext);
+    const testId = useTestId("line");
     const series = dataCtx?.seriesByKey.get(seriesKey);
     const isHidden = dataCtx?.hiddenSet.has(seriesKey) ?? false;
     useEffect(()=>{
@@ -51,7 +53,7 @@ const LineChartLine = (t0)=>{
     } else t8 = $[5];
     const t9 = isActive ? "true" : void 0;
     let t10;
-    if ($[6] !== connectNulls || $[7] !== curve || $[8] !== opacity || $[9] !== series.label || $[10] !== seriesKey || $[11] !== stroke || $[12] !== strokeDasharray || $[13] !== strokeWidth || $[14] !== t6 || $[15] !== t7 || $[16] !== t8 || $[17] !== t9) {
+    if ($[6] !== connectNulls || $[7] !== curve || $[8] !== opacity || $[9] !== series.label || $[10] !== seriesKey || $[11] !== stroke || $[12] !== strokeDasharray || $[13] !== strokeWidth || $[14] !== t6 || $[15] !== t7 || $[16] !== t8 || $[17] !== t9 || $[18] !== testId) {
         t10 = /*#__PURE__*/ jsx(Line, {
             dataKey: seriesKey,
             name: t5,
@@ -70,6 +72,7 @@ const LineChartLine = (t0)=>{
             onMouseEnter: t7,
             onMouseLeave: t8,
             "data-slot": "line-chart-line",
+            "data-testid": testId,
             "data-key": seriesKey,
             "data-active": t9
         });
@@ -85,8 +88,9 @@ const LineChartLine = (t0)=>{
         $[15] = t7;
         $[16] = t8;
         $[17] = t9;
-        $[18] = t10;
-    } else t10 = $[18];
+        $[18] = testId;
+        $[19] = t10;
+    } else t10 = $[19];
     return t10;
 };
 LineChartLine.displayName = "LineChartLine";

package/dist/components/SimpleCharts/LineChart/LineChartZoomBrush.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ReferenceArea, usePlotArea } from "recharts";
+import { useTestId } from "../../../utils/testId.js";
 import { formatChartDateTime } from "../lib/timeFormatters.js";
 import { lineChartZoomCursorPopoverClasses } from "./classes.js";
 import { useZoomPendingListeners } from "./hooks/useZoomPendingListeners.js";
@@ -17,6 +18,7 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
     const dataCtx = useContext(LineChartDataContext);
     const zoomCtx = useContext(LineChartZoomContext);
     const popoverRef = useRef(null);
+    const testId = useTestId('zoom-popover');
     const plotArea = usePlotArea();
     const rootRef = zoomCtx?.rootRef;
     const drag = zoomCtx?.drag ?? null;
@@ -130,6 +132,7 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
     const popoverContent = range && popoverPosition ? /*#__PURE__*/ jsx("div", {
         ref: popoverRef,
         "data-slot": "line-chart-zoom-cursor-popover",
+        "data-testid": testId,
         "data-zoom-state": isPending ? 'pending' : 'dragging',
         className: lineChartZoomCursorPopoverClasses,
         style: {

package/dist/components/SimpleCharts/PieChart/PieChartDonut.js

@@ -14,7 +14,7 @@ const PLACEHOLDER_DATA = [
     }
 ];
 const PieChartDonut = (t0)=>{
-    const $ = c(34);
+    const $ = c(35);
     let children;
     let className;
     let props;
@@ -41,6 +41,7 @@ const PieChartDonut = (t0)=>{
     const inactiveOpacity = void 0 === t1 ? 0.3 : t1;
     const disableAnimation = void 0 === t2 ? false : t2;
     const testId = useTestId("donut");
+    const sliceTestId = useTestId("slice");
     const dataCtx = useContext(PieChartDataContext);
     const { activeName } = useContext(PieChartActiveContext);
     const { selectedSet } = useContext(PieChartSelectionContext);
@@ -68,7 +69,7 @@ const PieChartDonut = (t0)=>{
     const isValidTotal = !!dataCtx?.isValidTotal;
     const isMultiSlice = isValidTotal && dataCtx.data.length > 1;
     let t5;
-    if ($[11] !== activeName || $[12] !== inactiveOpacity || $[13] !== isValidTotal || $[14] !== selectedSet) {
+    if ($[11] !== activeName || $[12] !== inactiveOpacity || $[13] !== isValidTotal || $[14] !== selectedSet || $[15] !== sliceTestId) {
         t5 = (sectorProps)=>{
             const { isActive: _isActive, index: _index_0, payload, ...sectorRest } = sectorProps;
             if (!isValidTotal) return /*#__PURE__*/ jsx(Sector, {
@@ -92,6 +93,7 @@ const PieChartDonut = (t0)=>{
                 stroke: "none",
                 className: cn("outline-none transition-opacity duration-150 ease-out", datum_0?.className),
                 "data-slot": "pie-chart-slice",
+                "data-testid": sliceTestId,
                 "data-name": name,
                 "data-active": isActive ? "true" : void 0
             });
@@ -100,31 +102,32 @@ const PieChartDonut = (t0)=>{
         $[12] = inactiveOpacity;
         $[13] = isValidTotal;
         $[14] = selectedSet;
-        $[15] = t5;
-    } else t5 = $[15];
+        $[15] = sliceTestId;
+        $[16] = t5;
+    } else t5 = $[16];
     const renderSlice = t5;
     const pieData = isValidTotal ? dataCtx.data : PLACEHOLDER_DATA;
     let t6;
-    if ($[16] !== className) {
+    if ($[17] !== className) {
         t6 = cn(pieChartDonutClasses, className);
-        $[16] = className;
-        $[17] = t6;
-    } else t6 = $[17];
+        $[17] = className;
+        $[18] = t6;
+    } else t6 = $[18];
     let t7;
-    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
         t7 = {
             top: 0,
             right: 0,
             bottom: 0,
             left: 0
         };
-        $[18] = t7;
-    } else t7 = $[18];
+        $[19] = t7;
+    } else t7 = $[19];
     const t8 = isMultiSlice ? PIE_DONUT_CORNER_RADIUS : 0;
     const t9 = isMultiSlice ? PIE_DONUT_PADDING_ANGLE : 0;
     const t10 = disableAnimation ? false : "auto";
     let t11;
-    if ($[19] !== handleEnter || $[20] !== handleLeave || $[21] !== pieData || $[22] !== renderSlice || $[23] !== t10 || $[24] !== t8 || $[25] !== t9) {
+    if ($[20] !== handleEnter || $[21] !== handleLeave || $[22] !== pieData || $[23] !== renderSlice || $[24] !== t10 || $[25] !== t8 || $[26] !== t9) {
         t11 = /*#__PURE__*/ jsx(PieChart, {
             width: PIE_DONUT_SIZE,
             height: PIE_DONUT_SIZE,
@@ -152,17 +155,17 @@ const PieChartDonut = (t0)=>{
                 shape: renderSlice
             })
         });
-        $[19] = handleEnter;
-        $[20] = handleLeave;
-        $[21] = pieData;
-        $[22] = renderSlice;
-        $[23] = t10;
-        $[24] = t8;
-        $[25] = t9;
-        $[26] = t11;
-    } else t11 = $[26];
+        $[20] = handleEnter;
+        $[21] = handleLeave;
+        $[22] = pieData;
+        $[23] = renderSlice;
+        $[24] = t10;
+        $[25] = t8;
+        $[26] = t9;
+        $[27] = t11;
+    } else t11 = $[27];
     let t12;
-    if ($[27] !== children || $[28] !== props || $[29] !== ref || $[30] !== t11 || $[31] !== t6 || $[32] !== testId) {
+    if ($[28] !== children || $[29] !== props || $[30] !== ref || $[31] !== t11 || $[32] !== t6 || $[33] !== testId) {
         t12 = /*#__PURE__*/ jsxs("div", {
             ...props,
             ref: ref,
@@ -175,14 +178,14 @@ const PieChartDonut = (t0)=>{
                 children
             ]
         });
-        $[27] = children;
-        $[28] = props;
-        $[29] = ref;
-        $[30] = t11;
-        $[31] = t6;
-        $[32] = testId;
-        $[33] = t12;
-    } else t12 = $[33];
+        $[28] = children;
+        $[29] = props;
+        $[30] = ref;
+        $[31] = t11;
+        $[32] = t6;
+        $[33] = testId;
+        $[34] = t12;
+    } else t12 = $[34];
     return t12;
 };
 PieChartDonut.displayName = "PieChartDonut";