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

package/dist/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../../../utils/testId.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../Tooltip/index.js";
 import { ChipSearchInput } from "./ChipSearchInput.js";
 import { chipVariants, emptyValueHitTarget } from "./classes.js";
@@ -11,7 +12,7 @@ import { PairSeparator } from "./PairSeparator.js";
 import { Segment } from "./Segment.js";
 import { SEGMENT_VARIANT } from "./segmentVariant.js";
 const FilterInputChip = (t0)=>{
-    const $ = c(110);
+    const $ = c(116);
     let attribute;
     let attributeDescription;
     let chipId;
@@ -30,11 +31,12 @@ const FilterInputChip = (t0)=>{
     let t3;
     let t4;
     let t5;
+    let testIdProp;
     let value;
     let valueParts;
     let valueSeparator;
     if ($[0] !== t0) {
-        ({ ref, chipId, attribute, attributeDescription, operator, value, error: t1, valueParts, valueSeparator, errorValueIndices, building: t2, disabled: t3, valueMaxWidth: t4, caretMode: t5, pair, onRemove, onSegmentClick, onPairSegmentClick, className, style, ...props } = t0);
+        ({ ref, chipId, attribute, attributeDescription, operator, value, error: t1, valueParts, valueSeparator, errorValueIndices, building: t2, disabled: t3, valueMaxWidth: t4, caretMode: t5, pair, onRemove, onSegmentClick, onPairSegmentClick, className, style, "data-testid": testIdProp, ...props } = t0);
         $[0] = t0;
         $[1] = attribute;
         $[2] = attributeDescription;
@@ -54,9 +56,10 @@ const FilterInputChip = (t0)=>{
         $[16] = t3;
         $[17] = t4;
         $[18] = t5;
-        $[19] = value;
-        $[20] = valueParts;
-        $[21] = valueSeparator;
+        $[19] = testIdProp;
+        $[20] = value;
+        $[21] = valueParts;
+        $[22] = valueSeparator;
     } else {
         attribute = $[1];
         attributeDescription = $[2];
@@ -76,15 +79,17 @@ const FilterInputChip = (t0)=>{
         t3 = $[16];
         t4 = $[17];
         t5 = $[18];
-        value = $[19];
-        valueParts = $[20];
-        valueSeparator = $[21];
+        testIdProp = $[19];
+        value = $[20];
+        valueParts = $[21];
+        valueSeparator = $[22];
     }
     const error = void 0 === t1 ? false : t1;
     const building = void 0 === t2 ? false : t2;
     const disabled = void 0 === t3 ? false : t3;
     const valueMaxWidth = void 0 === t4 ? 500 : t4;
     const caretMode = void 0 === t5 ? "end" : t5;
+    const testId = useTestId("condition-chip", testIdProp);
     const interactive = !disabled;
     const internalRef = useRef(null);
     const editing = useEditingContext();
@@ -94,7 +99,7 @@ const FilterInputChip = (t0)=>{
     const effectivePairError = isEditingThisChip ? void 0 : pair?.error;
     const hasError = !!effectiveError || !!effectivePairError;
     let t6;
-    if ($[22] !== activeSegment || $[23] !== onSegmentClick) {
+    if ($[23] !== activeSegment || $[24] !== onSegmentClick) {
         t6 = (segment, e)=>{
             if (!onSegmentClick) return;
             if (activeSegment === segment) return;
@@ -103,13 +108,13 @@ const FilterInputChip = (t0)=>{
             if (!anchorEl) return;
             onSegmentClick(segment, anchorEl);
         };
-        $[22] = activeSegment;
-        $[23] = onSegmentClick;
-        $[24] = t6;
-    } else t6 = $[24];
+        $[23] = activeSegment;
+        $[24] = onSegmentClick;
+        $[25] = t6;
+    } else t6 = $[25];
     const handleSegmentClick = t6;
     let t7;
-    if ($[25] !== onPairSegmentClick) {
+    if ($[26] !== onPairSegmentClick) {
         t7 = (segment_0, e_0)=>{
             if (!onPairSegmentClick) return;
             e_0.stopPropagation();
@@ -117,14 +122,14 @@ const FilterInputChip = (t0)=>{
             if (!anchorEl_0) return;
             onPairSegmentClick(segment_0, anchorEl_0);
         };
-        $[25] = onPairSegmentClick;
-        $[26] = t7;
-    } else t7 = $[26];
+        $[26] = onPairSegmentClick;
+        $[27] = t7;
+    } else t7 = $[27];
     const handlePairSegmentClick = t7;
     const handleSegmentMouseDown = _temp;
     const editingSide = editing?.editingSide ?? 0;
     let t8;
-    if ($[27] !== editing || $[28] !== editingSide || $[29] !== isEditingThisChip) {
+    if ($[28] !== editing || $[29] !== editingSide || $[30] !== isEditingThisChip) {
         t8 = (segment_1, t9)=>{
             const side = void 0 === t9 ? 0 : t9;
             return isEditingThisChip && editing.editingSegment === segment_1 && editingSide === side ? {
@@ -135,31 +140,31 @@ const FilterInputChip = (t0)=>{
                 onEditBlur: editing.onSegmentEditBlur
             } : {};
         };
-        $[27] = editing;
-        $[28] = editingSide;
-        $[29] = isEditingThisChip;
-        $[30] = t8;
-    } else t8 = $[30];
+        $[28] = editing;
+        $[29] = editingSide;
+        $[30] = isEditingThisChip;
+        $[31] = t8;
+    } else t8 = $[31];
     const segmentEditProps = t8;
     const baseActiveSegment = 0 === editingSide ? activeSegment : null;
     const pairActiveSegment = 1 === editingSide ? activeSegment : null;
     const t9 = true === effectiveError || effectiveError === SEGMENT_VARIANT.attribute;
     let t10;
-    if ($[31] !== handleSegmentClick || $[32] !== interactive) {
+    if ($[32] !== handleSegmentClick || $[33] !== interactive) {
         t10 = interactive ? (e_2)=>handleSegmentClick(SEGMENT_VARIANT.attribute, e_2) : void 0;
-        $[31] = handleSegmentClick;
-        $[32] = interactive;
-        $[33] = t10;
-    } else t10 = $[33];
+        $[32] = handleSegmentClick;
+        $[33] = interactive;
+        $[34] = t10;
+    } else t10 = $[34];
     const t11 = interactive && building ? handleSegmentMouseDown : void 0;
     let t12;
-    if ($[34] !== segmentEditProps) {
+    if ($[35] !== segmentEditProps) {
         t12 = segmentEditProps(SEGMENT_VARIANT.attribute);
-        $[34] = segmentEditProps;
-        $[35] = t12;
-    } else t12 = $[35];
+        $[35] = segmentEditProps;
+        $[36] = t12;
+    } else t12 = $[36];
     let t13;
-    if ($[36] !== attribute || $[37] !== t10 || $[38] !== t11 || $[39] !== t12 || $[40] !== t9) {
+    if ($[37] !== attribute || $[38] !== t10 || $[39] !== t11 || $[40] !== t12 || $[41] !== t9) {
         t13 = /*#__PURE__*/ jsx(Segment, {
             variant: SEGMENT_VARIANT.attribute,
             className: "min-w-0 max-w-[180px] shrink",
@@ -169,43 +174,43 @@ const FilterInputChip = (t0)=>{
             ...t12,
             children: attribute
         });
-        $[36] = attribute;
-        $[37] = t10;
-        $[38] = t11;
-        $[39] = t12;
-        $[40] = t9;
-        $[41] = t13;
-    } else t13 = $[41];
+        $[37] = attribute;
+        $[38] = t10;
+        $[39] = t11;
+        $[40] = t12;
+        $[41] = t9;
+        $[42] = t13;
+    } else t13 = $[42];
     const attributeSegment = t13;
     let t14;
-    if ($[42] !== ref) {
+    if ($[43] !== ref) {
         t14 = (node)=>{
             internalRef.current = node;
             if ("function" == typeof ref) ref(node);
             else if (ref) ref.current = node;
         };
-        $[42] = ref;
-        $[43] = t14;
-    } else t14 = $[43];
+        $[43] = ref;
+        $[44] = t14;
+    } else t14 = $[44];
     const setRefs = t14;
     let t15;
-    if ($[44] !== building || $[45] !== className || $[46] !== disabled || $[47] !== hasError || $[48] !== interactive || $[49] !== pair) {
+    if ($[45] !== building || $[46] !== className || $[47] !== disabled || $[48] !== hasError || $[49] !== interactive || $[50] !== pair) {
         t15 = cn(chipVariants({
             error: hasError,
             interactive,
             disabled,
             building
         }), pair ? void 0 : "max-w-[320px]", className);
-        $[44] = building;
-        $[45] = className;
-        $[46] = disabled;
-        $[47] = hasError;
-        $[48] = interactive;
-        $[49] = pair;
-        $[50] = t15;
-    } else t15 = $[50];
+        $[45] = building;
+        $[46] = className;
+        $[47] = disabled;
+        $[48] = hasError;
+        $[49] = interactive;
+        $[50] = pair;
+        $[51] = t15;
+    } else t15 = $[51];
     let t16;
-    if ($[51] !== pair || $[52] !== style || $[53] !== valueMaxWidth) {
+    if ($[52] !== pair || $[53] !== style || $[54] !== valueMaxWidth) {
         t16 = pair ? {
             maxWidth: valueMaxWidth,
             ...style
@@ -213,26 +218,27 @@ const FilterInputChip = (t0)=>{
             maxWidth: "none",
             ...style
         };
-        $[51] = pair;
-        $[52] = style;
-        $[53] = valueMaxWidth;
-        $[54] = t16;
-    } else t16 = $[54];
+        $[52] = pair;
+        $[53] = style;
+        $[54] = valueMaxWidth;
+        $[55] = t16;
+    } else t16 = $[55];
     let t17;
-    if ($[55] !== building) {
+    if ($[56] !== building) {
         t17 = building && {
             "data-building": ""
         };
-        $[55] = building;
-        $[56] = t17;
-    } else t17 = $[56];
+        $[56] = building;
+        $[57] = t17;
+    } else t17 = $[57];
     let t18;
-    if ($[57] !== attributeDescription || $[58] !== attributeSegment || $[59] !== baseActiveSegment) {
+    if ($[58] !== attributeDescription || $[59] !== attributeSegment || $[60] !== baseActiveSegment || $[61] !== testId) {
         t18 = attributeDescription ? /*#__PURE__*/ jsxs(Tooltip, {
             disabled: baseActiveSegment === SEGMENT_VARIANT.attribute,
             children: [
                 /*#__PURE__*/ jsx(TooltipTrigger, {
                     asChild: true,
+                    "data-testid": testId && `${testId}--attribute`,
                     children: attributeSegment
                 }),
                 /*#__PURE__*/ jsx(TooltipContent, {
@@ -240,13 +246,14 @@ const FilterInputChip = (t0)=>{
                 })
             ]
         }) : attributeSegment;
-        $[57] = attributeDescription;
-        $[58] = attributeSegment;
-        $[59] = baseActiveSegment;
-        $[60] = t18;
-    } else t18 = $[60];
+        $[58] = attributeDescription;
+        $[59] = attributeSegment;
+        $[60] = baseActiveSegment;
+        $[61] = testId;
+        $[62] = t18;
+    } else t18 = $[62];
     let t19;
-    if ($[61] !== baseActiveSegment || $[62] !== building || $[63] !== handleSegmentClick || $[64] !== interactive || $[65] !== operator || $[66] !== segmentEditProps) {
+    if ($[63] !== baseActiveSegment || $[64] !== building || $[65] !== handleSegmentClick || $[66] !== interactive || $[67] !== operator || $[68] !== segmentEditProps) {
         t19 = (operator || baseActiveSegment === SEGMENT_VARIANT.operator) && /*#__PURE__*/ jsx(Segment, {
             variant: SEGMENT_VARIANT.operator,
             className: "shrink-0",
@@ -255,16 +262,16 @@ const FilterInputChip = (t0)=>{
             ...segmentEditProps(SEGMENT_VARIANT.operator),
             children: operator ?? ""
         });
-        $[61] = baseActiveSegment;
-        $[62] = building;
-        $[63] = handleSegmentClick;
-        $[64] = interactive;
-        $[65] = operator;
-        $[66] = segmentEditProps;
-        $[67] = t19;
-    } else t19 = $[67];
+        $[63] = baseActiveSegment;
+        $[64] = building;
+        $[65] = handleSegmentClick;
+        $[66] = interactive;
+        $[67] = operator;
+        $[68] = segmentEditProps;
+        $[69] = t19;
+    } else t19 = $[69];
     let t20;
-    if ($[68] !== baseActiveSegment || $[69] !== building || $[70] !== caretMode || $[71] !== effectiveError || $[72] !== errorValueIndices || $[73] !== handleSegmentClick || $[74] !== interactive || $[75] !== pair || $[76] !== segmentEditProps || $[77] !== value || $[78] !== valueMaxWidth || $[79] !== valueParts || $[80] !== valueSeparator) {
+    if ($[70] !== baseActiveSegment || $[71] !== building || $[72] !== caretMode || $[73] !== effectiveError || $[74] !== errorValueIndices || $[75] !== handleSegmentClick || $[76] !== interactive || $[77] !== pair || $[78] !== segmentEditProps || $[79] !== value || $[80] !== valueMaxWidth || $[81] !== valueParts || $[82] !== valueSeparator) {
         t20 = (value || baseActiveSegment === SEGMENT_VARIANT.value || !pair && effectiveError === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
             variant: SEGMENT_VARIANT.value,
             className: value || pair ? pair ? "max-w-[90px] shrink" : "shrink-0" : emptyValueHitTarget,
@@ -284,23 +291,23 @@ const FilterInputChip = (t0)=>{
             ...segmentEditProps(SEGMENT_VARIANT.value),
             children: value ?? ""
         });
-        $[68] = baseActiveSegment;
-        $[69] = building;
-        $[70] = caretMode;
-        $[71] = effectiveError;
-        $[72] = errorValueIndices;
-        $[73] = handleSegmentClick;
-        $[74] = interactive;
-        $[75] = pair;
-        $[76] = segmentEditProps;
-        $[77] = value;
-        $[78] = valueMaxWidth;
-        $[79] = valueParts;
-        $[80] = valueSeparator;
-        $[81] = t20;
-    } else t20 = $[81];
+        $[70] = baseActiveSegment;
+        $[71] = building;
+        $[72] = caretMode;
+        $[73] = effectiveError;
+        $[74] = errorValueIndices;
+        $[75] = handleSegmentClick;
+        $[76] = interactive;
+        $[77] = pair;
+        $[78] = segmentEditProps;
+        $[79] = value;
+        $[80] = valueMaxWidth;
+        $[81] = valueParts;
+        $[82] = valueSeparator;
+        $[83] = t20;
+    } else t20 = $[83];
     let t21;
-    if ($[82] !== caretMode || $[83] !== effectivePairError || $[84] !== handlePairSegmentClick || $[85] !== interactive || $[86] !== pair || $[87] !== pairActiveSegment || $[88] !== segmentEditProps || $[89] !== valueMaxWidth) {
+    if ($[84] !== caretMode || $[85] !== effectivePairError || $[86] !== handlePairSegmentClick || $[87] !== interactive || $[88] !== pair || $[89] !== pairActiveSegment || $[90] !== segmentEditProps || $[91] !== valueMaxWidth) {
         t21 = pair && /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(PairSeparator, {}),
@@ -329,43 +336,38 @@ const FilterInputChip = (t0)=>{
                 })
             ]
         });
-        $[82] = caretMode;
-        $[83] = effectivePairError;
-        $[84] = handlePairSegmentClick;
-        $[85] = interactive;
-        $[86] = pair;
-        $[87] = pairActiveSegment;
-        $[88] = segmentEditProps;
-        $[89] = valueMaxWidth;
-        $[90] = t21;
-    } else t21 = $[90];
+        $[84] = caretMode;
+        $[85] = effectivePairError;
+        $[86] = handlePairSegmentClick;
+        $[87] = interactive;
+        $[88] = pair;
+        $[89] = pairActiveSegment;
+        $[90] = segmentEditProps;
+        $[91] = valueMaxWidth;
+        $[92] = t21;
+    } else t21 = $[92];
     let t22;
-    if ($[91] !== building || $[92] !== isEditingThisChip) {
+    if ($[93] !== building || $[94] !== isEditingThisChip) {
         t22 = building && !isEditingThisChip && /*#__PURE__*/ jsx(ChipSearchInput, {});
-        $[91] = building;
-        $[92] = isEditingThisChip;
-        $[93] = t22;
-    } else t22 = $[93];
+        $[93] = building;
+        $[94] = isEditingThisChip;
+        $[95] = t22;
+    } else t22 = $[95];
     let t23;
-    if ($[94] !== disabled || $[95] !== hasError || $[96] !== onRemove) {
+    if ($[96] !== disabled || $[97] !== hasError || $[98] !== onRemove) {
         t23 = onRemove && !disabled && /*#__PURE__*/ jsx(FilterInputRemoveButton, {
             error: hasError,
             onRemove: onRemove
         });
-        $[94] = disabled;
-        $[95] = hasError;
-        $[96] = onRemove;
-        $[97] = t23;
-    } else t23 = $[97];
+        $[96] = disabled;
+        $[97] = hasError;
+        $[98] = onRemove;
+        $[99] = t23;
+    } else t23 = $[99];
     let t24;
-    if ($[98] !== props || $[99] !== setRefs || $[100] !== t15 || $[101] !== t16 || $[102] !== t17 || $[103] !== t18 || $[104] !== t19 || $[105] !== t20 || $[106] !== t21 || $[107] !== t22 || $[108] !== t23) {
-        t24 = /*#__PURE__*/ jsxs("div", {
-            ref: setRefs,
-            className: t15,
-            style: t16,
-            "data-slot": "filter-input-condition-chip",
-            ...t17,
-            ...props,
+    if ($[100] !== t18 || $[101] !== t19 || $[102] !== t20 || $[103] !== t21 || $[104] !== t22 || $[105] !== t23 || $[106] !== testId) {
+        t24 = /*#__PURE__*/ jsxs(TestIdProvider, {
+            value: testId,
             children: [
                 t18,
                 t19,
@@ -375,20 +377,37 @@ const FilterInputChip = (t0)=>{
                 t23
             ]
         });
-        $[98] = props;
-        $[99] = setRefs;
-        $[100] = t15;
-        $[101] = t16;
-        $[102] = t17;
-        $[103] = t18;
-        $[104] = t19;
-        $[105] = t20;
-        $[106] = t21;
-        $[107] = t22;
-        $[108] = t23;
-        $[109] = t24;
-    } else t24 = $[109];
-    return t24;
+        $[100] = t18;
+        $[101] = t19;
+        $[102] = t20;
+        $[103] = t21;
+        $[104] = t22;
+        $[105] = t23;
+        $[106] = testId;
+        $[107] = t24;
+    } else t24 = $[107];
+    let t25;
+    if ($[108] !== props || $[109] !== setRefs || $[110] !== t15 || $[111] !== t16 || $[112] !== t17 || $[113] !== t24 || $[114] !== testId) {
+        t25 = /*#__PURE__*/ jsx("div", {
+            ref: setRefs,
+            className: t15,
+            style: t16,
+            "data-slot": "filter-input-condition-chip",
+            "data-testid": testId,
+            ...t17,
+            ...props,
+            children: t24
+        });
+        $[108] = props;
+        $[109] = setRefs;
+        $[110] = t15;
+        $[111] = t16;
+        $[112] = t17;
+        $[113] = t24;
+        $[114] = testId;
+        $[115] = t25;
+    } else t25 = $[115];
+    return t25;
 };
 FilterInputChip.displayName = "FilterInputChip";
 function _temp(e_1) {

package/dist/components/FilterInput/FilterInputField/FilterInputChip/FilterInputRemoveButton.js

@@ -1,10 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { X } from "../../../../icons/X.js";
+import { useTestId } from "../../../../utils/testId.js";
 import { removeButtonVariants } from "./classes.js";
 const FilterInputRemoveButton = (t0)=>{
-    const $ = c(8);
+    const $ = c(9);
     const { error, onRemove } = t0;
+    const testId = useTestId("remove-button");
     let t1;
     if ($[0] !== onRemove) {
         t1 = (e)=>{
@@ -30,19 +32,21 @@ const FilterInputRemoveButton = (t0)=>{
         $[4] = t3;
     } else t3 = $[4];
     let t4;
-    if ($[5] !== t1 || $[6] !== t2) {
+    if ($[5] !== t1 || $[6] !== t2 || $[7] !== testId) {
         t4 = /*#__PURE__*/ jsx("button", {
             type: "button",
             onClick: t1,
             className: t2,
             "data-slot": "filter-input-chip-delete",
+            "data-testid": testId,
             "aria-label": "Remove filter",
             children: t3
         });
         $[5] = t1;
         $[6] = t2;
-        $[7] = t4;
-    } else t4 = $[7];
+        $[7] = testId;
+        $[8] = t4;
+    } else t4 = $[8];
     return t4;
 };
 FilterInputRemoveButton.displayName = "FilterInputRemoveButton";

package/dist/components/FilterInput/FilterInputField/FilterInputChip/PairSeparator.js

@@ -1,25 +1,34 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { useTestId } from "../../../../utils/testId.js";
 import { segmentContainer, segmentTextVariants } from "./classes.js";
 import { PAIR_SEPARATOR_SLOT } from "./segmentVariant.js";
 const PairSeparator = ()=>{
-    const $ = c(1);
+    const $ = c(3);
+    const testId = useTestId("separator");
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /*#__PURE__*/ jsx("div", {
+        t0 = /*#__PURE__*/ jsx("p", {
+            className: segmentTextVariants({
+                variant: "operator"
+            }),
+            children: ";"
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    let t1;
+    if ($[1] !== testId) {
+        t1 = /*#__PURE__*/ jsx("div", {
             className: `${segmentContainer} shrink-0`,
             "data-slot": PAIR_SEPARATOR_SLOT,
+            "data-testid": testId,
             "aria-hidden": true,
-            children: /*#__PURE__*/ jsx("p", {
-                className: segmentTextVariants({
-                    variant: "operator"
-                }),
-                children: ";"
-            })
+            children: t0
         });
-        $[0] = t0;
-    } else t0 = $[0];
-    return t0;
+        $[1] = testId;
+        $[2] = t1;
+    } else t1 = $[2];
+    return t1;
 };
 PairSeparator.displayName = "PairSeparator";
 export { PairSeparator };

package/dist/components/FilterInput/FilterInputField/FilterInputChip/Segment.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
+import { useTestId } from "../../../../utils/testId.js";
 import { FilterInputContext } from "../../FilterInputContext/FilterInputContext.js";
 import { applyEditCaret } from "./applyEditCaret.js";
 import { editingValueMinWidth, segmentContainer, segmentTextVariants } from "./classes.js";
@@ -9,6 +10,7 @@ import { MultiValueSegment } from "./MultiValueSegment.js";
 import { useSizerWidth } from "./model/useSizerWidth.js";
 import { SEGMENT_VARIANT } from "./segmentVariant.js";
 const Segment = ({ ref, variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, valueParts, valueSeparator = ', ', errorValueIndices, caretMode, valueMaxWidth, ...props })=>{
+    const testId = useTestId(variant);
     const textRef = useRef(null);
     const inputRef = useRef(null);
     const sizerRef = useRef(null);
@@ -59,12 +61,14 @@ const Segment = ({ ref, variant, children, className, error, editing, editText,
         valueSeparator: valueSeparator,
         errorValueIndices: errorValueIndices,
         className: className,
+        "data-testid": testId,
         ...props
     });
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         className: cn(segmentContainer, className),
         "data-slot": `segment-${variant}`,
+        "data-testid": testId,
         ...isInteractive && {
             role: 'button',
             'aria-label': `Edit filter ${variant}`