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

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

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { CirclePlus } from "../../../../icons/CirclePlus.js";
 import { CircleSlash } from "../../../../icons/CircleSlash.js";
 import { cn } from "../../../../utils/cn.js";
+import { useTestId } from "../../../../utils/testId.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText } from "../../../DropdownMenu/index.js";
 import { DropdownMenuTrigger } from "../../../DropdownMenu/DropdownMenuTrigger.js";
 import { Kbd, KbdGroup } from "../../../Kbd/index.js";
@@ -13,8 +14,9 @@ import { VARIANT_LABELS } from "../../lib/constants.js";
 import { chipVariants, segmentContainer } from "../FilterInputChip/classes.js";
 import { connectorTextVariants } from "./classes.js";
 const FilterInputConnectorChip = (t0)=>{
-    const $ = c(40);
+    const $ = c(44);
     const { chipId, variant, onChange, className } = t0;
+    const testId = useTestId("connector-chip");
     const { menuOpen, closeAutocompleteMenu } = useFilterInputContext();
     const [open, setOpen] = useState(false);
     const triggerRef = useRef(null);
@@ -83,16 +85,13 @@ const FilterInputConnectorChip = (t0)=>{
     } else t9 = $[10];
     let t10;
     if ($[11] !== t6 || $[12] !== t7 || $[13] !== t9) {
-        t10 = /*#__PURE__*/ jsx(DropdownMenuTrigger, {
-            asChild: true,
-            children: /*#__PURE__*/ jsx("button", {
-                ref: triggerRef,
-                type: "button",
-                className: t6,
-                "data-slot": "filter-input-connector-chip",
-                "aria-label": t7,
-                children: t9
-            })
+        t10 = /*#__PURE__*/ jsx("button", {
+            ref: triggerRef,
+            type: "button",
+            className: t6,
+            "data-slot": "filter-input-connector-chip",
+            "aria-label": t7,
+            children: t9
         });
         $[11] = t6;
         $[12] = t7;
@@ -100,78 +99,89 @@ const FilterInputConnectorChip = (t0)=>{
         $[14] = t10;
     } else t10 = $[14];
     let t11;
-    if ($[15] !== chipId || $[16] !== onChange) {
-        t11 = ()=>onChange(chipId, "and");
-        $[15] = chipId;
-        $[16] = onChange;
+    if ($[15] !== t10 || $[16] !== testId) {
+        t11 = /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+            asChild: true,
+            "data-testid": testId,
+            children: t10
+        });
+        $[15] = t10;
+        $[16] = testId;
         $[17] = t11;
     } else t11 = $[17];
     let t12;
+    if ($[18] !== chipId || $[19] !== onChange) {
+        t12 = ()=>onChange(chipId, "and");
+        $[18] = chipId;
+        $[19] = onChange;
+        $[20] = t12;
+    } else t12 = $[20];
     let t13;
-    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-        t12 = /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+    let t14;
+    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+        t13 = /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
             children: /*#__PURE__*/ jsx(CirclePlus, {})
         });
-        t13 = /*#__PURE__*/ jsx(DropdownMenuItemText, {
+        t14 = /*#__PURE__*/ jsx(DropdownMenuItemText, {
             children: "AND"
         });
-        $[18] = t12;
-        $[19] = t13;
+        $[21] = t13;
+        $[22] = t14;
     } else {
-        t12 = $[18];
-        t13 = $[19];
+        t13 = $[21];
+        t14 = $[22];
     }
-    let t14;
-    if ($[20] !== t11) {
-        t14 = /*#__PURE__*/ jsxs(DropdownMenuItem, {
+    let t15;
+    if ($[23] !== t12) {
+        t15 = /*#__PURE__*/ jsxs(DropdownMenuItem, {
             value: "and",
-            onSelect: t11,
+            onSelect: t12,
             children: [
-                t12,
-                t13
+                t13,
+                t14
             ]
         });
-        $[20] = t11;
-        $[21] = t14;
-    } else t14 = $[21];
-    let t15;
-    if ($[22] !== chipId || $[23] !== onChange) {
-        t15 = ()=>onChange(chipId, "or");
-        $[22] = chipId;
-        $[23] = onChange;
+        $[23] = t12;
         $[24] = t15;
     } else t15 = $[24];
     let t16;
+    if ($[25] !== chipId || $[26] !== onChange) {
+        t16 = ()=>onChange(chipId, "or");
+        $[25] = chipId;
+        $[26] = onChange;
+        $[27] = t16;
+    } else t16 = $[27];
     let t17;
-    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-        t16 = /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
+    let t18;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+        t17 = /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
             children: /*#__PURE__*/ jsx(CircleSlash, {})
         });
-        t17 = /*#__PURE__*/ jsx(DropdownMenuItemText, {
+        t18 = /*#__PURE__*/ jsx(DropdownMenuItemText, {
             children: "OR"
         });
-        $[25] = t16;
-        $[26] = t17;
+        $[28] = t17;
+        $[29] = t18;
     } else {
-        t16 = $[25];
-        t17 = $[26];
+        t17 = $[28];
+        t18 = $[29];
     }
-    let t18;
-    if ($[27] !== t15) {
-        t18 = /*#__PURE__*/ jsxs(DropdownMenuItem, {
+    let t19;
+    if ($[30] !== t16) {
+        t19 = /*#__PURE__*/ jsxs(DropdownMenuItem, {
             value: "or",
-            onSelect: t15,
+            onSelect: t16,
             children: [
-                t16,
-                t17
+                t17,
+                t18
             ]
         });
-        $[27] = t15;
-        $[28] = t18;
-    } else t18 = $[28];
-    let t19;
-    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-        t19 = /*#__PURE__*/ jsxs("span", {
+        $[30] = t16;
+        $[31] = t19;
+    } else t19 = $[31];
+    let t20;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+        t20 = /*#__PURE__*/ jsxs("span", {
             className: "flex items-center gap-4",
             children: [
                 /*#__PURE__*/ jsxs(KbdGroup, {
@@ -187,14 +197,14 @@ const FilterInputConnectorChip = (t0)=>{
                 "to navigate"
             ]
         });
-        $[29] = t19;
-    } else t19 = $[29];
-    let t20;
-    if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-        t20 = /*#__PURE__*/ jsxs(DropdownMenuFooter, {
+        $[32] = t20;
+    } else t20 = $[32];
+    let t21;
+    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+        t21 = /*#__PURE__*/ jsxs(DropdownMenuFooter, {
             className: "justify-start",
             children: [
-                t19,
+                t20,
                 /*#__PURE__*/ jsxs("span", {
                     className: "flex items-center gap-4",
                     children: [
@@ -208,42 +218,44 @@ const FilterInputConnectorChip = (t0)=>{
                 })
             ]
         });
-        $[30] = t20;
-    } else t20 = $[30];
-    let t21;
-    if ($[31] !== t14 || $[32] !== t18) {
-        t21 = /*#__PURE__*/ jsxs(DropdownMenuContent, {
+        $[33] = t21;
+    } else t21 = $[33];
+    let t22;
+    if ($[34] !== t15 || $[35] !== t19) {
+        t22 = /*#__PURE__*/ jsxs(DropdownMenuContent, {
             className: "w-auto min-w-64",
             "data-filter-input-menu": "true",
             children: [
-                t14,
-                t18,
-                t20
+                t15,
+                t19,
+                t21
             ]
         });
-        $[31] = t14;
-        $[32] = t18;
-        $[33] = t21;
-    } else t21 = $[33];
-    let t22;
-    if ($[34] !== handleOpenChange || $[35] !== positioning || $[36] !== t10 || $[37] !== t21 || $[38] !== t5) {
-        t22 = /*#__PURE__*/ jsxs(DropdownMenu, {
+        $[34] = t15;
+        $[35] = t19;
+        $[36] = t22;
+    } else t22 = $[36];
+    let t23;
+    if ($[37] !== handleOpenChange || $[38] !== positioning || $[39] !== t11 || $[40] !== t22 || $[41] !== t5 || $[42] !== testId) {
+        t23 = /*#__PURE__*/ jsxs(DropdownMenu, {
+            "data-testid": testId,
             positioning: positioning,
             open: t5,
             onOpenChange: handleOpenChange,
             children: [
-                t10,
-                t21
+                t11,
+                t22
             ]
         });
-        $[34] = handleOpenChange;
-        $[35] = positioning;
-        $[36] = t10;
-        $[37] = t21;
-        $[38] = t5;
-        $[39] = t22;
-    } else t22 = $[39];
-    return t22;
+        $[37] = handleOpenChange;
+        $[38] = positioning;
+        $[39] = t11;
+        $[40] = t22;
+        $[41] = t5;
+        $[42] = testId;
+        $[43] = t23;
+    } else t23 = $[43];
+    return t23;
 };
 FilterInputConnectorChip.displayName = "FilterInputConnectorChip";
 export { FilterInputConnectorChip };

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { cn } from "../../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../../utils/testId.js";
 import { inputVariants } from "../../Input/classes.js";
 import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
 import { useFilterInputContext } from "../FilterInputContext/index.js";
@@ -14,7 +15,7 @@ import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
 import { useExpandCollapse } from "./hooks/useExpandCollapse.js";
 import { useSegmentEditKeyboard } from "./hooks/useSegmentEditKeyboard.js";
 const FilterInputField = (t0)=>{
-    const $ = c(86);
+    const $ = c(89);
     let className;
     let props;
     if ($[0] !== t0) {
@@ -27,6 +28,7 @@ const FilterInputField = (t0)=>{
         props = $[2];
     }
     const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onAreaClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, editingSide, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, menuRef } = useFilterInputContext();
+    const testId = useTestId();
     const hasContent = chips.length > 0 || null != buildingChipData;
     const { isExpanded, isOverflowing, innerRef, toggleExpand, multiRow } = useExpandCollapse();
     const { chipsBefore, chipsAfter, hideTrailingGap, hideLeadingGap } = useChipsSplitting(chips, insertIndex, insertAfterConnector);
@@ -200,90 +202,100 @@ const FilterInputField = (t0)=>{
         $[51] = t15;
     } else t15 = $[51];
     let t16;
-    if ($[52] !== innerRef || $[53] !== t10 || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t8) {
-        t16 = /*#__PURE__*/ jsx(ScrollAreaViewport, {
+    if ($[52] !== t12 || $[53] !== t13 || $[54] !== t14 || $[55] !== t15 || $[56] !== testId) {
+        t16 = /*#__PURE__*/ jsxs(TestIdProvider, {
+            value: testId,
+            children: [
+                t12,
+                t13,
+                t14,
+                t15
+            ]
+        });
+        $[52] = t12;
+        $[53] = t13;
+        $[54] = t14;
+        $[55] = t15;
+        $[56] = testId;
+        $[57] = t16;
+    } else t16 = $[57];
+    let t17;
+    if ($[58] !== innerRef || $[59] !== t10 || $[60] !== t11 || $[61] !== t16 || $[62] !== t8) {
+        t17 = /*#__PURE__*/ jsx(ScrollAreaViewport, {
             style: t7,
-            children: /*#__PURE__*/ jsxs("div", {
+            children: /*#__PURE__*/ jsx("div", {
                 ref: innerRef,
                 "data-filter-input-inner": "",
                 className: t8,
                 style: t10,
                 onClick: t11,
-                children: [
-                    t12,
-                    t13,
-                    t14,
-                    t15
-                ]
+                children: t16
             })
         });
-        $[52] = innerRef;
-        $[53] = t10;
-        $[54] = t11;
-        $[55] = t12;
-        $[56] = t13;
-        $[57] = t14;
-        $[58] = t15;
-        $[59] = t8;
-        $[60] = t16;
-    } else t16 = $[60];
-    let t17;
-    if ($[61] !== isExpanded) {
-        t17 = !isExpanded && /*#__PURE__*/ jsx(ScrollAreaScrollbar, {
+        $[58] = innerRef;
+        $[59] = t10;
+        $[60] = t11;
+        $[61] = t16;
+        $[62] = t8;
+        $[63] = t17;
+    } else t17 = $[63];
+    let t18;
+    if ($[64] !== isExpanded) {
+        t18 = !isExpanded && /*#__PURE__*/ jsx(ScrollAreaScrollbar, {
             orientation: "vertical"
         });
-        $[61] = isExpanded;
-        $[62] = t17;
-    } else t17 = $[62];
-    let t18;
-    if ($[63] !== t16 || $[64] !== t17 || $[65] !== t6) {
-        t18 = /*#__PURE__*/ jsxs(ScrollArea, {
+        $[64] = isExpanded;
+        $[65] = t18;
+    } else t18 = $[65];
+    let t19;
+    if ($[66] !== t17 || $[67] !== t18 || $[68] !== t6) {
+        t19 = /*#__PURE__*/ jsxs(ScrollArea, {
             className: "h-auto flex-1 min-w-0",
             style: t6,
             children: [
-                t16,
-                t17
+                t17,
+                t18
             ]
         });
-        $[63] = t16;
-        $[64] = t17;
-        $[65] = t6;
-        $[66] = t18;
-    } else t18 = $[66];
-    let t19;
-    if ($[67] !== isExpanded || $[68] !== isOverflowing || $[69] !== toggleExpand) {
-        t19 = /*#__PURE__*/ jsx(FilterInputFieldActions, {
+        $[66] = t17;
+        $[67] = t18;
+        $[68] = t6;
+        $[69] = t19;
+    } else t19 = $[69];
+    let t20;
+    if ($[70] !== isExpanded || $[71] !== isOverflowing || $[72] !== toggleExpand) {
+        t20 = /*#__PURE__*/ jsx(FilterInputFieldActions, {
             isExpanded: isExpanded,
             isOverflowing: isOverflowing,
             onToggleExpand: toggleExpand
         });
-        $[67] = isExpanded;
-        $[68] = isOverflowing;
-        $[69] = toggleExpand;
-        $[70] = t19;
-    } else t19 = $[70];
-    let t20;
-    if ($[71] !== props || $[72] !== t18 || $[73] !== t19 || $[74] !== t3 || $[75] !== t4) {
-        t20 = /*#__PURE__*/ jsxs("div", {
+        $[70] = isExpanded;
+        $[71] = isOverflowing;
+        $[72] = toggleExpand;
+        $[73] = t20;
+    } else t20 = $[73];
+    let t21;
+    if ($[74] !== props || $[75] !== t19 || $[76] !== t20 || $[77] !== t3 || $[78] !== t4) {
+        t21 = /*#__PURE__*/ jsxs("div", {
             className: t3,
             "data-slot": "filter-input",
             onClick: t4,
             ...props,
             children: [
-                t18,
-                t19
+                t19,
+                t20
             ]
         });
-        $[71] = props;
-        $[72] = t18;
-        $[73] = t19;
-        $[74] = t3;
-        $[75] = t4;
+        $[74] = props;
+        $[75] = t19;
         $[76] = t20;
-    } else t20 = $[76];
-    let t21;
-    if ($[77] !== editingChipId || $[78] !== editingSegment || $[79] !== editingSide || $[80] !== handleSegmentEditBlur || $[81] !== handleSegmentEditKeyDown || $[82] !== onSegmentFilterChange || $[83] !== segmentFilterText || $[84] !== t20) {
-        t21 = /*#__PURE__*/ jsx(EditingProvider, {
+        $[77] = t3;
+        $[78] = t4;
+        $[79] = t21;
+    } else t21 = $[79];
+    let t22;
+    if ($[80] !== editingChipId || $[81] !== editingSegment || $[82] !== editingSide || $[83] !== handleSegmentEditBlur || $[84] !== handleSegmentEditKeyDown || $[85] !== onSegmentFilterChange || $[86] !== segmentFilterText || $[87] !== t21) {
+        t22 = /*#__PURE__*/ jsx(EditingProvider, {
             editingChipId: editingChipId,
             editingSegment: editingSegment,
             editingSide: editingSide,
@@ -291,19 +303,19 @@ const FilterInputField = (t0)=>{
             onSegmentFilterChange: onSegmentFilterChange,
             onSegmentEditKeyDown: handleSegmentEditKeyDown,
             onSegmentEditBlur: handleSegmentEditBlur,
-            children: t20
+            children: t21
         });
-        $[77] = editingChipId;
-        $[78] = editingSegment;
-        $[79] = editingSide;
-        $[80] = handleSegmentEditBlur;
-        $[81] = handleSegmentEditKeyDown;
-        $[82] = onSegmentFilterChange;
-        $[83] = segmentFilterText;
-        $[84] = t20;
-        $[85] = t21;
-    } else t21 = $[85];
-    return t21;
+        $[80] = editingChipId;
+        $[81] = editingSegment;
+        $[82] = editingSide;
+        $[83] = handleSegmentEditBlur;
+        $[84] = handleSegmentEditKeyDown;
+        $[85] = onSegmentFilterChange;
+        $[86] = segmentFilterText;
+        $[87] = t21;
+        $[88] = t22;
+    } else t22 = $[88];
+    return t22;
 };
 FilterInputField.displayName = "FilterInputField";
 export { FilterInputField };

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FilterInputFieldMenu.d.ts

@@ -1,6 +1,7 @@
 import { type FC, type RefObject } from 'react';
+import { type TestableProps } from '../../../../utils/testId.js';
 import type { Condition, FieldGroup, FieldMetadata } from '../../types.js';
-export interface FilterInputFieldMenuProps {
+export interface FilterInputFieldMenuProps extends TestableProps {
     fields: FieldMetadata[];
     /** Text from the input to filter displayed fields */
     filterText?: string;

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FilterInputFieldMenu.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
+import { useTestId } from "../../../../utils/testId.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter } from "../../../DropdownMenu/index.js";
 import { Kbd } from "../../../Kbd/Kbd.js";
 import { KbdGroup } from "../../../Kbd/KbdGroup.js";
@@ -11,7 +12,8 @@ import { useMenuScrollHighlightSync } from "../hooks/useMenuScrollHighlightSync.
 import { MenuEmptyState } from "../MenuEmptyState.js";
 import { FieldMenuPopover } from "./FieldMenuPopover.js";
 import { FieldSections, OperatorsSection, RecentSection, SuggestionsSection } from "./FieldMenuSections.js";
-const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false, onOpenChange, recentConditions = [], suggestedFields = [], fieldGroups, onSelectAnd, onSelectOr, onEscape, positioning, inputRef, menuRef, className })=>{
+const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false, onOpenChange, recentConditions = [], suggestedFields = [], fieldGroups, onSelectAnd, onSelectOr, onEscape, positioning, inputRef, menuRef, className, 'data-testid': testIdProp })=>{
+    const testId = useTestId('field-menu', testIdProp);
     const limitedRecentConditions = useMemo(()=>recentConditions.slice(0, 3), [
         recentConditions
     ]);
@@ -76,6 +78,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(DropdownMenu, {
+                "data-testid": testId,
                 open: open && hasResults,
                 onOpenChange: onOpenChange,
                 onRequestDismiss: keepOpenOnMenuHandoff,
@@ -87,6 +90,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
                     ref: menuRef,
                     className: cn('w-[300px] max-h-[430px]', className),
                     "data-slot": "filter-input-field-menu",
+                    "data-testid": testId,
                     "data-filter-input-menu": "true",
                     children: [
                         !filterText && showRecent && /*#__PURE__*/ jsx(RecentSection, {

package/dist/components/FilterInput/FilterInputMenu/FilterInputOperatorMenu.d.ts

@@ -1,7 +1,8 @@
 import type { RefObject } from 'react';
 import { type FC } from 'react';
+import { type TestableProps } from '../../../utils/testId.js';
 import type { FieldType, FilterOperator } from '../types.js';
-export interface FilterInputOperatorMenuProps {
+export interface FilterInputOperatorMenuProps extends TestableProps {
     /**
      * The field type to determine which operators to show
      */

package/dist/components/FilterInput/FilterInputMenu/FilterInputOperatorMenu.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Fragment } from "react";
 import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemText, DropdownMenuSeparator } from "../../DropdownMenu/index.js";
 import { Kbd } from "../../Kbd/Kbd.js";
 import { KbdGroup } from "../../Kbd/KbdGroup.js";
@@ -22,10 +23,11 @@ const HIDE_SYMBOLS_FOR = new Set([
     "boolean"
 ]);
 const FilterInputOperatorMenu = (t0)=>{
-    const $ = c(45);
-    const { fieldType, operators, onSelect, open: t1, onOpenChange, onEscape, positioning, inputRef, filterText: t2, menuRef, className } = t0;
+    const $ = c(47);
+    const { fieldType, operators, onSelect, open: t1, onOpenChange, onEscape, positioning, inputRef, filterText: t2, menuRef, className, "data-testid": testIdProp } = t0;
     const open = void 0 === t1 ? false : t1;
     const filterText = void 0 === t2 ? "" : t2;
+    const testId = useTestId("operator-menu", testIdProp);
     let t3;
     if ($[0] !== filterText) {
         t3 = filterText.toLowerCase();
@@ -160,11 +162,12 @@ const FilterInputOperatorMenu = (t0)=>{
         $[33] = t12;
     } else t12 = $[33];
     let t13;
-    if ($[34] !== menuRef || $[35] !== t10 || $[36] !== t11) {
+    if ($[34] !== menuRef || $[35] !== t10 || $[36] !== t11 || $[37] !== testId) {
         t13 = /*#__PURE__*/ jsxs(DropdownMenuContent, {
             ref: menuRef,
             className: t10,
             "data-filter-input-menu": "true",
+            "data-testid": testId,
             children: [
                 t11,
                 t12
@@ -173,11 +176,13 @@ const FilterInputOperatorMenu = (t0)=>{
         $[34] = menuRef;
         $[35] = t10;
         $[36] = t11;
-        $[37] = t13;
-    } else t13 = $[37];
+        $[37] = testId;
+        $[38] = t13;
+    } else t13 = $[38];
     let t14;
-    if ($[38] !== highlightedValue || $[39] !== onHighlightChange || $[40] !== onOpenChange || $[41] !== open || $[42] !== positioning || $[43] !== t13) {
+    if ($[39] !== highlightedValue || $[40] !== onHighlightChange || $[41] !== onOpenChange || $[42] !== open || $[43] !== positioning || $[44] !== t13 || $[45] !== testId) {
         t14 = /*#__PURE__*/ jsx(DropdownMenu, {
+            "data-testid": testId,
             open: open,
             onOpenChange: onOpenChange,
             onRequestDismiss: keepOpenOnMenuHandoff,
@@ -187,14 +192,15 @@ const FilterInputOperatorMenu = (t0)=>{
             onHighlightChange: onHighlightChange,
             children: t13
         });
-        $[38] = highlightedValue;
-        $[39] = onHighlightChange;
-        $[40] = onOpenChange;
-        $[41] = open;
-        $[42] = positioning;
-        $[43] = t13;
-        $[44] = t14;
-    } else t14 = $[44];
+        $[39] = highlightedValue;
+        $[40] = onHighlightChange;
+        $[41] = onOpenChange;
+        $[42] = open;
+        $[43] = positioning;
+        $[44] = t13;
+        $[45] = testId;
+        $[46] = t14;
+    } else t14 = $[46];
     return t14;
 };
 FilterInputOperatorMenu.displayName = "FilterInputOperatorMenu";