@wallarm-org/design-system 0.29.1 → 0.29.2-rc-feature-AS-882.2

package/dist/components/FilterInput/FilterInput.js

@@ -19,7 +19,7 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
     const fields = useMemo(()=>applyKnownFieldHelpers(rawFields), [
         rawFields
     ]);
-    const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({
+    const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, replaceExpression, setConnectorValue } = useFilterInputExpression({
         fields,
         value,
         onChange,
@@ -48,7 +48,8 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
         clearAll,
         setInputText: autocomplete.setInputText,
         closeMenu: autocomplete.closeAutocompleteMenu,
-        onChange
+        replaceExpression,
+        resetAutocompleteState: autocomplete.handleMenuDiscard
     });
     const contextValue = useFilterInputContextValue({
         chips,
@@ -84,6 +85,7 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
     return /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
         className: cn('group/filter-input relative flex w-full flex-col gap-4', className),
+        tabIndex: -1,
         onFocus: autocomplete.handleFocus,
         onBlur: autocomplete.handleBlur,
         onClick: allSelected ? clearSelection : void 0,

package/dist/components/FilterInput/FilterInputContext/types.d.ts

@@ -39,4 +39,10 @@ export interface FilterInputContextValue {
     closeAutocompleteMenu: () => void;
     /** Register/unregister a chip DOM element for selection tracking */
     registerChipRef: (id: string, el: HTMLElement | null) => void;
+    /** Direct ref to the attribute segment <input> — attached by Segment when editing. */
+    segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
+    /** Direct ref to the operator segment <input> — attached by Segment when editing. */
+    segmentOperatorInputRef: RefObject<HTMLInputElement | null>;
+    /** Direct ref to the value segment <input> — attached by Segment when editing. */
+    segmentValueInputRef: RefObject<HTMLInputElement | null>;
 }

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.d.ts

@@ -25,6 +25,9 @@ interface AutocompleteForContext {
     handleCustomAttributeCommit: (customText: string) => void;
     menuRef: RefObject<HTMLDivElement | null>;
     closeAutocompleteMenu: () => void;
+    segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
+    segmentOperatorInputRef: RefObject<HTMLInputElement | null>;
+    segmentValueInputRef: RefObject<HTMLInputElement | null>;
 }
 interface UseFilterInputContextValueOptions {
     chips: FilterInputChipData[];

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.js

@@ -28,7 +28,10 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onCustomAttributeCommit: autocomplete.handleCustomAttributeCommit,
             menuRef: autocomplete.menuRef,
             closeAutocompleteMenu: autocomplete.closeAutocompleteMenu,
-            registerChipRef
+            registerChipRef,
+            segmentAttributeInputRef: autocomplete.segmentAttributeInputRef,
+            segmentOperatorInputRef: autocomplete.segmentOperatorInputRef,
+            segmentValueInputRef: autocomplete.segmentValueInputRef
         }), [
         chips,
         autocomplete.buildingChipData,
@@ -53,6 +56,9 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleCustomAttributeCommit,
         autocomplete.menuRef,
         autocomplete.closeAutocompleteMenu,
+        autocomplete.segmentAttributeInputRef,
+        autocomplete.segmentOperatorInputRef,
+        autocomplete.segmentValueInputRef,
         registerChipRef,
         buildingChipRef,
         inputRef,

package/dist/components/FilterInput/FilterInputErrors/FilterInputErrors.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Alert } from "../../Alert/Alert.js";
 import { AlertContent } from "../../Alert/AlertContent.js";
-import { AlertDescription } from "../../Alert/AlertDescription.js";
 import { AlertIcon } from "../../Alert/AlertIcon.js";
 import { AlertTitle } from "../../Alert/AlertTitle.js";
 const FilterInputErrors = ({ errors })=>{
@@ -16,14 +15,11 @@ const FilterInputErrors = ({ errors })=>{
                     /*#__PURE__*/ jsx(AlertTitle, {
                         children: title
                     }),
-                    /*#__PURE__*/ jsx(AlertDescription, {
-                        lineClamp: 0,
-                        children: /*#__PURE__*/ jsx("ul", {
-                            className: "list-disc ms-[21px]",
-                            children: errors.map((err, idx)=>/*#__PURE__*/ jsx("li", {
-                                    children: err
-                                }, idx))
-                        })
+                    /*#__PURE__*/ jsx("ul", {
+                        className: "list-disc ms-[21px] text-sm text-text-secondary",
+                        children: errors.map((err, idx)=>/*#__PURE__*/ jsx("li", {
+                                children: err
+                            }, idx))
                     })
                 ]
             })

package/dist/components/FilterInput/FilterInputErrors/parseFilterInputErrors.js

@@ -1,3 +1,4 @@
+import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
 import { isValidFieldValue } from "../hooks/useFilterInputAutocomplete/valueCommitHelpers.js";
 import { getFieldValues, hasStaticAllowlist } from "../lib/index.js";
 const parseFilterInputErrors = (conditions, fields)=>{
@@ -7,10 +8,10 @@ const parseFilterInputErrors = (conditions, fields)=>{
         const field = fields.find((f)=>f.name === condition.field);
         const label = field?.label || condition.field;
         switch(condition.error){
-            case 'attribute':
+            case SEGMENT_VARIANT.attribute:
                 errors.push(`Unknown field ${condition.field}`);
                 break;
-            case 'value':
+            case SEGMENT_VARIANT.value:
                 if (field?.validate) {
                     const values = Array.isArray(condition.value) ? condition.value : [
                         condition.value

package/dist/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.d.ts

@@ -1,6 +1,7 @@
 import type { FC, HTMLAttributes, Ref } from 'react';
 import type { ChipErrorSegment } from '../../types';
-export type ChipSegment = 'attribute' | 'operator' | 'value';
+import { type SegmentVariant } from './segmentVariant';
+export type ChipSegment = SegmentVariant;
 export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     ref?: Ref<HTMLDivElement>;
     chipId?: string;

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

@@ -6,6 +6,7 @@ import { chipVariants } from "./classes.js";
 import { useEditingContext } from "./context/EditingContext.js";
 import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
 import { Segment } from "./Segment.js";
+import { SEGMENT_VARIANT } from "./segmentVariant.js";
 const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, disabled = false, onRemove, onSegmentClick, className, ...props })=>{
     const interactive = !building && !disabled;
     const hasError = !!error;
@@ -17,7 +18,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
         if (!onSegmentClick) return;
         if (activeSegment === segment) return;
         e.stopPropagation();
-        const anchorEl = 'attribute' === segment ? internalRef.current : e.currentTarget;
+        const anchorEl = segment === SEGMENT_VARIANT.attribute ? internalRef.current : e.currentTarget;
         if (!anchorEl) return;
         onSegmentClick(segment, anchorEl.getBoundingClientRect());
     }, [
@@ -49,29 +50,29 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
         ...props,
         children: [
             /*#__PURE__*/ jsx(Segment, {
-                variant: "attribute",
+                variant: SEGMENT_VARIANT.attribute,
                 className: "shrink-0",
-                error: true === error || 'attribute' === error,
-                onClick: interactive ? (e)=>handleSegmentClick('attribute', e) : void 0,
-                ...segmentEditProps('attribute'),
+                error: true === error || error === SEGMENT_VARIANT.attribute,
+                onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.attribute, e) : void 0,
+                ...segmentEditProps(SEGMENT_VARIANT.attribute),
                 children: attribute
             }),
-            (operator || 'operator' === activeSegment) && /*#__PURE__*/ jsx(Segment, {
-                variant: "operator",
+            (operator || activeSegment === SEGMENT_VARIANT.operator) && /*#__PURE__*/ jsx(Segment, {
+                variant: SEGMENT_VARIANT.operator,
                 className: "shrink-0",
-                onClick: interactive ? (e)=>handleSegmentClick('operator', e) : void 0,
-                ...segmentEditProps('operator'),
+                onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.operator, e) : void 0,
+                ...segmentEditProps(SEGMENT_VARIANT.operator),
                 children: operator ?? ''
             }),
-            (value || 'value' === activeSegment) && /*#__PURE__*/ jsx(Segment, {
-                variant: "value",
+            (value || activeSegment === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
+                variant: SEGMENT_VARIANT.value,
                 className: "min-w-0",
-                error: 'value' !== activeSegment && (true === error || 'value' === error),
+                error: activeSegment !== SEGMENT_VARIANT.value && (true === error || error === SEGMENT_VARIANT.value),
                 valueParts: valueParts,
                 valueSeparator: valueSeparator,
                 errorValueIndices: errorValueIndices,
-                onClick: interactive ? (e)=>handleSegmentClick('value', e) : void 0,
-                ...segmentEditProps('value'),
+                onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.value, e) : void 0,
+                ...segmentEditProps(SEGMENT_VARIANT.value),
                 children: value ?? ''
             }),
             building && /*#__PURE__*/ jsx(ChipSearchInput, {}),

package/dist/components/FilterInput/FilterInputField/FilterInputChip/Segment.d.ts

@@ -1,5 +1,5 @@
 import type { FC, FocusEvent, HTMLAttributes, KeyboardEvent } from 'react';
-type SegmentVariant = 'attribute' | 'operator' | 'value';
+import { type SegmentVariant } from './segmentVariant';
 export type SegmentProps = HTMLAttributes<HTMLDivElement> & {
     variant: SegmentVariant;
     children: string;
@@ -17,4 +17,3 @@ export type SegmentProps = HTMLAttributes<HTMLDivElement> & {
     errorValueIndices?: number[];
 };
 export declare const Segment: FC<SegmentProps>;
-export {};

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

@@ -1,14 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
+import { FilterInputContext } from "../../FilterInputContext/FilterInputContext.js";
 import { segmentContainer, segmentTextVariants } from "./classes.js";
 import { CHAR_WIDTH_PX } from "./constants.js";
 import { MultiValueSegment } from "./MultiValueSegment.js";
 import { useSizerWidth } from "./model/useSizerWidth.js";
+import { SEGMENT_VARIANT } from "./segmentVariant.js";
 const Segment = ({ variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, valueParts, valueSeparator = ', ', errorValueIndices, ...props })=>{
     const textRef = useRef(null);
     const inputRef = useRef(null);
     const sizerRef = useRef(null);
+    const filterInputContext = useContext(FilterInputContext);
+    const segmentInputRef = variant === SEGMENT_VARIANT.attribute ? filterInputContext?.segmentAttributeInputRef : variant === SEGMENT_VARIANT.operator ? filterInputContext?.segmentOperatorInputRef : variant === SEGMENT_VARIANT.value ? filterInputContext?.segmentValueInputRef : null;
     const lastTextWidthRef = useRef(0);
     useEffect(()=>{
         if (editing) return;
@@ -20,17 +24,16 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
     ]);
     useEffect(()=>{
         if (!editing) return;
-        let outer = 0;
-        let inner = 0;
-        outer = requestAnimationFrame(()=>{
-            inner = requestAnimationFrame(()=>{
+        let innerFrame = 0;
+        const outerFrame = requestAnimationFrame(()=>{
+            innerFrame = requestAnimationFrame(()=>{
                 inputRef.current?.focus();
                 inputRef.current?.select();
             });
         });
         return ()=>{
-            cancelAnimationFrame(outer);
-            cancelAnimationFrame(inner);
+            cancelAnimationFrame(outerFrame);
+            cancelAnimationFrame(innerFrame);
         };
     }, [
         editing
@@ -39,8 +42,14 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
         sizerRef,
         text: editText ?? ''
     });
+    const setInputRef = useCallback((node)=>{
+        inputRef.current = node;
+        if (segmentInputRef) segmentInputRef.current = node;
+    }, [
+        segmentInputRef
+    ]);
     const isInteractive = !!props.onClick;
-    const hasMultiValueErrors = 'value' === variant && !!valueParts && !!errorValueIndices && errorValueIndices.length > 0 && !editing;
+    const hasMultiValueErrors = variant === SEGMENT_VARIANT.value && !!valueParts && !!errorValueIndices && errorValueIndices.length > 0 && !editing;
     if (hasMultiValueErrors) return /*#__PURE__*/ jsx(MultiValueSegment, {
         valueParts: valueParts,
         valueSeparator: valueSeparator,
@@ -59,7 +68,7 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
         children: editing ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx("input", {
-                    ref: inputRef,
+                    ref: setInputRef,
                     size: 1,
                     value: editText ?? '',
                     onChange: (e)=>onEditChange?.(e.target.value),

package/dist/components/FilterInput/FilterInputField/FilterInputChip/index.d.ts

@@ -3,3 +3,4 @@ export { type EditingContextValue, EditingProvider, useEditingContext, } from '.
 export { type ChipSegment, FilterInputChip, type FilterInputChipProps } from './FilterInputChip';
 export { FilterInputRemoveButton } from './FilterInputRemoveButton';
 export { Segment, type SegmentProps } from './Segment';
+export { SEGMENT_VARIANT, type SegmentVariant } from './segmentVariant';

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

@@ -3,4 +3,5 @@ import { EditingProvider, useEditingContext } from "./context/EditingContext.js"
 import { FilterInputChip } from "./FilterInputChip.js";
 import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
 import { Segment } from "./Segment.js";
-export { EditingProvider, FilterInputChip, FilterInputConnectorChip, FilterInputRemoveButton, Segment, useEditingContext };
+import { SEGMENT_VARIANT } from "./segmentVariant.js";
+export { EditingProvider, FilterInputChip, FilterInputConnectorChip, FilterInputRemoveButton, SEGMENT_VARIANT, Segment, useEditingContext };

package/dist/components/FilterInput/FilterInputField/FilterInputChip/segmentVariant.d.ts

@@ -0,0 +1,6 @@
+export declare const SEGMENT_VARIANT: {
+    readonly attribute: "attribute";
+    readonly operator: "operator";
+    readonly value: "value";
+};
+export type SegmentVariant = (typeof SEGMENT_VARIANT)[keyof typeof SEGMENT_VARIANT];

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

@@ -0,0 +1,6 @@
+const SEGMENT_VARIANT = {
+    attribute: 'attribute',
+    operator: 'operator',
+    value: 'value'
+};
+export { SEGMENT_VARIANT };

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

@@ -56,6 +56,7 @@ const FilterInputConnectorChip = ({ chipId, variant, onChange, className })=>{
             }),
             /*#__PURE__*/ jsxs(DropdownMenuContent, {
                 className: "w-auto min-w-64",
+                "data-filter-input-menu": "true",
                 children: [
                     /*#__PURE__*/ jsxs(DropdownMenuItem, {
                         value: "and",

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

@@ -9,6 +9,7 @@ import { ChipsWithGaps, TrailingGap } from "./ChipsWithGaps.js";
 import { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, filterInputContainerVariants, filterInputInnerVariants } from "./classes.js";
 import { EditingProvider } from "./FilterInputChip/context/EditingContext.js";
 import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
+import { SEGMENT_VARIANT } from "./FilterInputChip/segmentVariant.js";
 import { FilterInputFieldActions } from "./FilterInputFieldActions.js";
 import { FilterInputSearch } from "./FilterInputSearch.js";
 import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
@@ -31,12 +32,12 @@ const FilterInputField = ({ className, ...props })=>{
             return;
         }
         if ('Enter' === e.key && !e.defaultPrevented) {
-            if ('value' === editingSegment) {
+            if (editingSegment === SEGMENT_VARIANT.value) {
                 e.preventDefault();
                 onCustomValueCommit(segmentFilterText);
                 return;
             }
-            if ('attribute' === editingSegment) {
+            if (editingSegment === SEGMENT_VARIANT.attribute) {
                 e.preventDefault();
                 onCustomAttributeCommit(segmentFilterText);
                 return;

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

@@ -51,6 +51,7 @@ const FilterInputDateValueMenu = ({ open, onSelect, onRangeSelect, onOpenChange,
         children: /*#__PURE__*/ jsx(DropdownMenuContent, {
             ref: menuRef,
             className: cn('w-fit', className),
+            "data-filter-input-menu": "true",
             onKeyDown: (e)=>{
                 if ('Escape' === e.key) {
                     e.preventDefault();

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

@@ -4,16 +4,19 @@ interface RecentSectionProps {
     conditions: Condition[];
     fields: FieldMetadata[];
     onSelect: (field: FieldMetadata) => void;
+    registerItem: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const RecentSection: FC<RecentSectionProps>;
 interface SuggestionsSectionProps {
     fields: FieldMetadata[];
     onSelect: (field: FieldMetadata) => void;
+    registerItem: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const SuggestionsSection: FC<SuggestionsSectionProps>;
 interface OperatorsSectionProps {
     onSelectAnd?: () => void;
     onSelectOr?: () => void;
+    registerItem: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const OperatorsSection: FC<OperatorsSectionProps>;
 export {};

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

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CirclePlus } from "../../../../icons/CirclePlus.js";
 import { CircleSlash } from "../../../../icons/CircleSlash.js";
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator } from "../../../DropdownMenu/index.js";
-const RecentSection = ({ conditions, fields, onSelect })=>/*#__PURE__*/ jsxs(Fragment, {
+const RecentSection = ({ conditions, fields, onSelect, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(DropdownMenuLabel, {
                 children: "Recent"
@@ -15,6 +15,7 @@ const RecentSection = ({ conditions, fields, onSelect })=>/*#__PURE__*/ jsxs(Fra
                     const value = String(condition.value);
                     return /*#__PURE__*/ jsx(DropdownMenuItem, {
                         value: `recent-${index}`,
+                        ref: registerItem(`recent-${index}`),
                         onSelect: ()=>{
                             if (fieldMeta) onSelect(fieldMeta);
                         },
@@ -42,7 +43,7 @@ const RecentSection = ({ conditions, fields, onSelect })=>/*#__PURE__*/ jsxs(Fra
         ]
     });
 RecentSection.displayName = 'RecentSection';
-const SuggestionsSection = ({ fields, onSelect })=>/*#__PURE__*/ jsxs(Fragment, {
+const SuggestionsSection = ({ fields, onSelect, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(DropdownMenuLabel, {
                 children: "Suggestions"
@@ -50,6 +51,7 @@ const SuggestionsSection = ({ fields, onSelect })=>/*#__PURE__*/ jsxs(Fragment,
             /*#__PURE__*/ jsx(DropdownMenuGroup, {
                 children: fields.map((field, index)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
                         value: `suggested-${index}`,
+                        ref: registerItem(`suggested-${index}`),
                         onSelect: ()=>onSelect(field),
                         children: /*#__PURE__*/ jsxs("span", {
                             className: "flex gap-2 items-center text-sm",
@@ -74,11 +76,12 @@ const SuggestionsSection = ({ fields, onSelect })=>/*#__PURE__*/ jsxs(Fragment,
         ]
     });
 SuggestionsSection.displayName = 'SuggestionsSection';
-const OperatorsSection = ({ onSelectAnd, onSelectOr })=>/*#__PURE__*/ jsxs(Fragment, {
+const OperatorsSection = ({ onSelectAnd, onSelectOr, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
             onSelectAnd && /*#__PURE__*/ jsxs(DropdownMenuItem, {
                 value: "and",
+                ref: registerItem('and'),
                 onSelect: ()=>onSelectAnd(),
                 children: [
                     /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
@@ -91,6 +94,7 @@ const OperatorsSection = ({ onSelectAnd, onSelectOr })=>/*#__PURE__*/ jsxs(Fragm
             }),
             onSelectOr && /*#__PURE__*/ jsxs(DropdownMenuItem, {
                 value: "or",
+                ref: registerItem('or'),
                 onSelect: ()=>onSelectOr(),
                 children: [
                     /*#__PURE__*/ jsx(DropdownMenuItemIcon, {

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

@@ -87,7 +87,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
         } else if ('and' === data.type) onSelectAnd?.();
         else if ('or' === data.type) onSelectOr?.();
     };
-    const { highlightedValue, onHighlightChange } = useKeyboardNav({
+    const { highlightedValue, onHighlightChange, registerItem } = useKeyboardNav({
         items: flatItems,
         open,
         onSelect: handleItemSelect,
@@ -109,19 +109,23 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
             ref: menuRef,
             className: cn('w-[300px] max-h-[430px]', className),
             "data-slot": "filter-input-field-menu",
+            "data-filter-input-menu": "true",
             children: [
                 !filterText && showRecent && /*#__PURE__*/ jsx(RecentSection, {
                     conditions: limitedRecentConditions,
                     fields: fields,
-                    onSelect: onSelect
+                    onSelect: onSelect,
+                    registerItem: registerItem
                 }),
                 !filterText && showSuggestions && !showRecent && /*#__PURE__*/ jsx(SuggestionsSection, {
                     fields: suggestedFields,
-                    onSelect: onSelect
+                    onSelect: onSelect,
+                    registerItem: registerItem
                 }),
                 filteredFields.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
                     children: filteredFields.map((field)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
                             value: `field-${field.name}`,
+                            ref: registerItem(`field-${field.name}`),
                             onSelect: ()=>onSelect(field),
                             children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
                                 children: field.label
@@ -130,7 +134,8 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
                 }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
                 !filterText && (onSelectAnd || onSelectOr) && /*#__PURE__*/ jsx(OperatorsSection, {
                     onSelectAnd: onSelectAnd,
-                    onSelectOr: onSelectOr
+                    onSelectOr: onSelectOr,
+                    registerItem: registerItem
                 }),
                 /*#__PURE__*/ jsxs(DropdownMenuFooter, {
                     children: [

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

@@ -1,5 +1,5 @@
 import { type FC, type RefObject } from 'react';
-import type { ChipSegment } from '../FilterInputField/FilterInputChip';
+import { type ChipSegment } from '../FilterInputField/FilterInputChip';
 import type { FieldMetadata, FilterOperator, MenuState } from '../types';
 export interface FilterInputAutocompleteState {
     inputText: string;

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

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
 import { getCurrentValueTokenText, getFieldValues, getValueFilterText, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
 import { FilterInputDateValueMenu } from "./FilterInputDateValueMenu/index.js";
 import { FilterInputFieldMenu } from "./FilterInputFieldMenu/index.js";
@@ -7,8 +8,8 @@ import { FilterInputOperatorMenu } from "./FilterInputOperatorMenu.js";
 import { FilterInputValueMenu } from "./FilterInputValueMenu/index.js";
 const FilterInputMenu = ({ fields, autocomplete })=>{
     const { inputText, menuState, selectedField, selectedOperator, menuPositioning, editingMultiValues, editingSingleValue, editingDateRange, inputRef, menuRef, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleRangeSelect, handleMenuClose, handleMenuDiscard, handleBuildingValueChange, handleMultiSelectToggle, segmentMenuFilterText, editingSegment, blurCommitRef } = autocomplete;
-    const fieldFilterText = 'attribute' === editingSegment ? segmentMenuFilterText : inputText;
-    const operatorFilterText = 'operator' === editingSegment ? segmentMenuFilterText : inputText;
+    const fieldFilterText = editingSegment === SEGMENT_VARIANT.attribute ? segmentMenuFilterText : inputText;
+    const operatorFilterText = editingSegment === SEGMENT_VARIANT.operator ? segmentMenuFilterText : inputText;
     const currentTokenText = getCurrentValueTokenText(editingSegment, inputText, segmentMenuFilterText, selectedOperator);
     const selectedContext = useMemo(()=>({
             selectedValues: [

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

@@ -36,7 +36,7 @@ const FilterInputOperatorMenu = ({ fieldType, operators, onSelect, open = false,
         filteredGroups,
         fieldType
     ]);
-    const { highlightedValue, onHighlightChange } = useKeyboardNav({
+    const { highlightedValue, onHighlightChange, registerItem } = useKeyboardNav({
         items: flatItems,
         open,
         onSelect: (item)=>onSelect(item.value),
@@ -56,12 +56,14 @@ const FilterInputOperatorMenu = ({ fieldType, operators, onSelect, open = false,
         children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
             ref: menuRef,
             className: cn('w-256 max-h-[430px]', className),
+            "data-filter-input-menu": "true",
             children: [
                 filteredGroups.length > 0 ? filteredGroups.map((group, groupIdx)=>/*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx(DropdownMenuGroup, {
                                 children: group.map((operator)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
                                         value: operator,
+                                        ref: registerItem(operator),
                                         onSelect: ()=>onSelect(operator),
                                         children: [
                                             /*#__PURE__*/ jsx(DropdownMenuItemText, {

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

@@ -16,7 +16,7 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
         values,
         filterText
     ]);
-    const { selectedValues, checkedValues, highlightedValue, onHighlightChange, pendingIds, handleItemSelect } = useValueMenuState({
+    const { selectedValues, checkedValues, highlightedValue, onHighlightChange, pendingIds, registerItem, handleItemSelect } = useValueMenuState({
         values: filteredValues,
         open,
         multiSelect,
@@ -54,13 +54,15 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
             ref: menuRef,
             className: cn(widthClass, 'max-h-[430px]', className),
             style: widthStyle,
+            "data-filter-input-menu": "true",
             children: [
                 displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
                     children: displayValues.map((option)=>/*#__PURE__*/ jsx(ValueMenuItem, {
                             option: option,
-                            isChecked: selectedValues.includes(option.value),
+                            isChecked: selectedValues.some((v)=>String(v) === String(option.value)),
                             isPending: pendingIds.has(String(option.value)),
                             multiSelect: multiSelect,
+                            registerItem: registerItem,
                             onSelect: ()=>handleItemSelect({
                                     id: String(option.value),
                                     label: option.label,

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuItem.d.ts

@@ -6,6 +6,7 @@ interface ValueMenuItemProps {
     isPending: boolean;
     multiSelect: boolean;
     onSelect: () => void;
+    registerItem?: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const ValueMenuItem: FC<ValueMenuItemProps>;
 export {};

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuItem.js

@@ -4,8 +4,9 @@ import { Badge } from "../../../Badge/index.js";
 import { Checkmark } from "../../../Checkmark/index.js";
 import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
 import { Text } from "../../../Text/index.js";
-const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect, registerItem })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
         value: String(option.value),
+        ref: registerItem?.(String(option.value)),
         onSelect: onSelect,
         className: isPending ? 'bg-states-primary-hover' : void 0,
         children: [

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useValueMenuState.d.ts

@@ -31,6 +31,7 @@ export declare const useValueMenuState: ({ values, open, multiSelect, initialVal
         highlightedValue: string | null;
     }) => void;
     pendingIds: Set<string>;
+    registerItem: (id: string) => (el: HTMLElement | null) => void;
     commitChecked: () => boolean;
     handleItemSelect: (item: FilterInputDropdownItem) => void;
 };

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useValueMenuState.js

@@ -24,10 +24,14 @@ const useValueMenuState = ({ values, open, multiSelect, initialValues, highlight
         open
     ]);
     const toggleValue = (val)=>{
-        setCheckedValues((prev)=>prev.includes(val) ? prev.filter((v)=>v !== val) : [
+        setCheckedValues((prev)=>{
+            const key = String(val);
+            const exists = prev.some((v)=>String(v) === key);
+            return exists ? prev.filter((v)=>String(v) !== key) : [
                 ...prev,
                 val
-            ]);
+            ];
+        });
     };
     const onCommitRef = useRef(onCommit);
     onCommitRef.current = onCommit;
@@ -68,7 +72,7 @@ const useValueMenuState = ({ values, open, multiSelect, initialValues, highlight
         if (multiSelect) commitChecked();
         onOpenChange?.(false);
     };
-    const { highlightedValue, onHighlightChange, pendingIds } = useKeyboardNav({
+    const { highlightedValue, onHighlightChange, pendingIds, registerItem } = useKeyboardNav({
         items: flatItems,
         open,
         onSelect: handleItemSelect,
@@ -94,6 +98,7 @@ const useValueMenuState = ({ values, open, multiSelect, initialValues, highlight
         highlightedValue,
         onHighlightChange,
         pendingIds,
+        registerItem,
         commitChecked,
         handleItemSelect
     };

package/dist/components/FilterInput/FilterInputMenu/hooks/useKeyboardNav.d.ts

@@ -32,5 +32,6 @@ export declare const useKeyboardNav: ({ items, open, onSelect, onClose, onArrowR
         highlightedValue: string | null;
     }) => void;
     pendingIds: Set<string>;
+    registerItem: (id: string) => (el: HTMLElement | null) => void;
 };
 export {};