@wallarm-org/design-system 0.9.0 → 0.10.0-rc-feature-filter-attacks-components-oks.2

package/dist/components/QueryBar/QueryBarContext/types.d.ts

@@ -35,4 +35,6 @@ export interface QueryBarContextValue {
     onCustomAttributeCommit: (customText: string) => void;
     /** Ref to the currently open menu content element */
     menuRef: RefObject<HTMLDivElement | null>;
+    /** Close autocomplete menu (used by connector chip to enforce single-dropdown constraint) */
+    closeAutocompleteMenu: () => void;
 }

package/dist/components/QueryBar/QueryBarContext/useQueryBarContextValue.d.ts

@@ -24,6 +24,7 @@ interface AutocompleteForContext {
     handleCustomValueCommit: (customText: string) => void;
     handleCustomAttributeCommit: (customText: string) => void;
     menuRef: RefObject<HTMLDivElement | null>;
+    closeAutocompleteMenu: () => void;
 }
 interface UseQueryBarContextValueOptions {
     chips: QueryBarChipData[];

package/dist/components/QueryBar/QueryBarContext/useQueryBarContextValue.js

@@ -26,7 +26,8 @@ const useQueryBarContextValue = ({ chips, autocomplete, buildingChipRef, inputRe
             onCancelSegmentEdit: autocomplete.cancelSegmentEdit,
             onCustomValueCommit: autocomplete.handleCustomValueCommit,
             onCustomAttributeCommit: autocomplete.handleCustomAttributeCommit,
-            menuRef: autocomplete.menuRef
+            menuRef: autocomplete.menuRef,
+            closeAutocompleteMenu: autocomplete.closeAutocompleteMenu
         }), [
         chips,
         autocomplete.buildingChipData,
@@ -50,6 +51,7 @@ const useQueryBarContextValue = ({ chips, autocomplete, buildingChipRef, inputRe
         autocomplete.handleCustomValueCommit,
         autocomplete.handleCustomAttributeCommit,
         autocomplete.menuRef,
+        autocomplete.closeAutocompleteMenu,
         buildingChipRef,
         inputRef,
         placeholder,

package/dist/components/QueryBar/QueryBarInput/QueryBarConnectorChip/QueryBarConnectorChip.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 export type ConnectorVariant = 'and' | 'or';
 export interface QueryBarConnectorChipProps {
     chipId: string;

package/dist/components/QueryBar/QueryBarInput/QueryBarConnectorChip/QueryBarConnectorChip.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
 import { CirclePlus } from "../../../../icons/CirclePlus.js";
 import { CircleSlash } from "../../../../icons/CircleSlash.js";
 import { cn } from "../../../../utils/cn.js";
@@ -6,15 +7,26 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuItem
 import { DropdownMenuTrigger } from "../../../DropdownMenu/DropdownMenuTrigger.js";
 import { Kbd, KbdGroup } from "../../../Kbd/index.js";
 import { VARIANT_LABELS } from "../../lib/constants.js";
+import { useQueryBarContext } from "../../QueryBarContext/index.js";
 import { chipVariants, segmentContainer } from "../QueryBarChip/classes.js";
 import { connectorTextVariants } from "./classes.js";
 const QueryBarConnectorChip = ({ chipId, variant, onChange, className })=>{
+    const { menuOpen, closeAutocompleteMenu } = useQueryBarContext();
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = useCallback((nextOpen)=>{
+        if (nextOpen) closeAutocompleteMenu();
+        setOpen(nextOpen);
+    }, [
+        closeAutocompleteMenu
+    ]);
     const label = VARIANT_LABELS[variant];
     return /*#__PURE__*/ jsxs(DropdownMenu, {
         positioning: {
             placement: 'bottom',
             gutter: 4
         },
+        open: open && !menuOpen,
+        onOpenChange: handleOpenChange,
         children: [
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                 asChild: true,

package/dist/components/QueryBar/QueryBarInput/QueryBarFilterInput.d.ts

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 interface QueryBarFilterInputProps {
     hasContent: boolean;
+    minWidth?: number;
 }
 export declare const QueryBarFilterInput: FC<QueryBarFilterInputProps>;
 export {};

package/dist/components/QueryBar/QueryBarInput/QueryBarFilterInput.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useQueryBarContext } from "../QueryBarContext/index.js";
 import { queryBarInputVariants } from "./classes.js";
-const QueryBarFilterInput = ({ hasContent })=>{
+const CHAR_WIDTH_PX = 8;
+const QueryBarFilterInput = ({ hasContent, minWidth = 4 })=>{
     const { inputText, inputRef, placeholder, error, menuOpen, onInputChange, onInputKeyDown, onInputClick } = useQueryBarContext();
     return /*#__PURE__*/ jsx("input", {
         ref: inputRef,
@@ -17,7 +18,7 @@ const QueryBarFilterInput = ({ hasContent })=>{
         onClick: onInputClick,
         placeholder: hasContent ? void 0 : placeholder,
         style: hasContent ? {
-            width: `${Math.max(4, 8 * inputText.length)}px`
+            width: `${Math.max(minWidth, inputText.length * CHAR_WIDTH_PX)}px`
         } : void 0,
         className: queryBarInputVariants({
             hasContent

package/dist/components/QueryBar/QueryBarInput/QueryBarInput.js

@@ -5,7 +5,7 @@ import { inputVariants } from "../../Input/classes.js";
 import { findChipSplitIndex, isMenuRelated } from "../lib/index.js";
 import { useQueryBarContext } from "../QueryBarContext/index.js";
 import { ChipsWithGaps, TrailingGap } from "./ChipsWithGaps.js";
-import { queryBarContainerVariants, queryBarInnerVariants } from "./classes.js";
+import { buildingChipWrapperClass, queryBarContainerVariants, queryBarInnerVariants } from "./classes.js";
 import { EditingProvider } from "./QueryBarChip/EditingContext.js";
 import { QueryBarChip } from "./QueryBarChip/QueryBarChip.js";
 import { QueryBarFilterInput } from "./QueryBarFilterInput.js";
@@ -100,17 +100,22 @@ const QueryBarInput = ({ className, ...props })=>{
                             hideTrailingGap: hideTrailingGap,
                             ...chipsGapProps
                         }),
-                        buildingChipData && /*#__PURE__*/ jsx("div", {
+                        buildingChipData ? /*#__PURE__*/ jsxs("div", {
                             ref: buildingChipRef,
-                            className: cn('min-w-0', hasContent && 'ml-8'),
-                            children: /*#__PURE__*/ jsx(QueryBarChip, {
-                                building: true,
-                                attribute: buildingChipData.attribute ?? '',
-                                operator: buildingChipData.operator,
-                                value: buildingChipData.value
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(QueryBarFilterInput, {
+                            className: cn(buildingChipWrapperClass, hasContent && 'ml-8'),
+                            children: [
+                                /*#__PURE__*/ jsx(QueryBarChip, {
+                                    building: true,
+                                    attribute: buildingChipData.attribute ?? '',
+                                    operator: buildingChipData.operator,
+                                    value: buildingChipData.value,
+                                    className: "border-none"
+                                }),
+                                /*#__PURE__*/ jsx(QueryBarFilterInput, {
+                                    hasContent: true
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsx(QueryBarFilterInput, {
                             hasContent: hasContent
                         }),
                         /*#__PURE__*/ jsx(ChipsWithGaps, {

package/dist/components/QueryBar/QueryBarInput/classes.d.ts

@@ -6,6 +6,8 @@ export declare const queryBarContainerVariants: (props?: ({
 export declare const queryBarInnerVariants: (props?: ({
     hasContent?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Wrapper that visually groups the building chip and the input as one unit */
+export declare const buildingChipWrapperClass = "flex items-center gap-2 min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg";
 /** Native input element inside the query bar */
 export declare const queryBarInputVariants: (props?: ({
     hasContent?: boolean | null | undefined;

package/dist/components/QueryBar/QueryBarInput/classes.js

@@ -21,6 +21,7 @@ const queryBarInnerVariants = cva('flex min-h-full flex-1 cursor-text flex-wrap
         hasContent: false
     }
 });
+const buildingChipWrapperClass = 'flex items-center gap-2 min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg';
 const queryBarInputVariants = cva('h-auto border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0', {
     variants: {
         hasContent: {
@@ -32,4 +33,4 @@ const queryBarInputVariants = cva('h-auto border-none bg-transparent p-0 text-sm
         hasContent: false
     }
 });
-export { queryBarContainerVariants, queryBarInnerVariants, queryBarInputVariants };
+export { buildingChipWrapperClass, queryBarContainerVariants, queryBarInnerVariants, queryBarInputVariants };

package/dist/components/QueryBar/QueryBarMenu/QueryBarMenu.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
+import { getFieldValues, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
 import { QueryBarDateValueMenu } from "./QueryBarDateValueMenu/index.js";
 import { QueryBarFieldMenu } from "./QueryBarFieldMenu/index.js";
 import { QueryBarOperatorMenu } from "./QueryBarOperatorMenu.js";
@@ -7,15 +7,15 @@ import { QueryBarValueMenu } from "./QueryBarValueMenu/index.js";
 const QueryBarMenu = ({ fields, autocomplete })=>{
     const { inputText, menuState, selectedField, selectedOperator, menuPositioning, editingMultiValues, editingSingleValue, editingDateIsAbsolute, inputRef, menuRef, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleRangeSelect, handleMenuClose, handleMenuDiscard, handleBuildingValueChange, segmentFilterText, editingSegment } = autocomplete;
     const fieldFilterText = 'attribute' === editingSegment ? segmentFilterText : inputText;
-    const operatorFilterText = '';
+    const operatorFilterText = editingSegment ? '' : inputText;
+    const selectedFieldValues = selectedField ? getFieldValues(selectedField) : [];
     const valueFilterText = (()=>{
         if ('value' !== editingSegment) return inputText;
         if (!isMultiSelectOperator(selectedOperator)) return segmentFilterText;
         const lastToken = segmentFilterText.split(',').pop()?.trim() ?? '';
         if (!lastToken) return '';
-        const fieldValues = selectedField?.values;
-        if (fieldValues) {
-            const isKnownValue = fieldValues.some((v)=>v.label.toLowerCase() === lastToken.toLowerCase() || String(v.value).toLowerCase() === lastToken.toLowerCase());
+        if (selectedFieldValues.length > 0) {
+            const isKnownValue = selectedFieldValues.some((v)=>v.label.toLowerCase() === lastToken.toLowerCase() || String(v.value).toLowerCase() === lastToken.toLowerCase());
             if (isKnownValue) return '';
         }
         return lastToken;
@@ -35,6 +35,7 @@ const QueryBarMenu = ({ fields, autocomplete })=>{
             }),
             selectedField && /*#__PURE__*/ jsx(QueryBarOperatorMenu, {
                 fieldType: selectedField.type,
+                operators: selectedField.operators,
                 open: 'operator' === menuState,
                 onSelect: handleOperatorSelect,
                 onOpenChange: ()=>handleMenuClose(),
@@ -58,8 +59,8 @@ const QueryBarMenu = ({ fields, autocomplete })=>{
                 menuRef: menuRef,
                 filterText: valueFilterText,
                 initialValue: null != editingSingleValue ? String(editingSingleValue) : void 0
-            }) : /*#__PURE__*/ jsx(QueryBarValueMenu, {
-                values: selectedField.values || [],
+            }) : selectedFieldValues.length > 0 && /*#__PURE__*/ jsx(QueryBarValueMenu, {
+                values: selectedFieldValues,
                 open: 'value' === menuState,
                 onSelect: handleValueSelect,
                 onCommit: handleMultiCommit,

package/dist/components/QueryBar/QueryBarMenu/QueryBarOperatorMenu.d.ts

@@ -6,6 +6,12 @@ export interface QueryBarOperatorMenuProps {
      * The field type to determine which operators to show
      */
     fieldType: FieldType;
+    /**
+     * Optional list of operators from field config.
+     * When provided, only these operators are shown (preserving type-based grouping).
+     * Falls back to OPERATORS_BY_TYPE[fieldType] when not set.
+     */
+    operators?: FilterOperator[];
     /**
      * Callback when an operator is selected
      */

package/dist/components/QueryBar/QueryBarMenu/QueryBarOperatorMenu.js

@@ -4,13 +4,26 @@ import { cn } from "../../../utils/cn.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";
-import { OPERATORS_BY_TYPE, getOperatorLabel } from "../lib/index.js";
+import { OPERATORS_BY_TYPE, OPERATOR_SYMBOLS, getOperatorLabel } from "../lib/index.js";
 import { MenuEmptyState } from "./MenuEmptyState.js";
 import { useKeyboardNav } from "./useKeyboardNav.js";
-const QueryBarOperatorMenu = ({ fieldType, onSelect, open = false, onOpenChange, onEscape, positioning, inputRef, filterText = '', menuRef, className })=>{
-    const operatorGroups = OPERATORS_BY_TYPE[fieldType] || [];
+function filterOperatorGroups(groups, operators) {
+    const allowed = new Set(operators);
+    return groups.map((group)=>group.filter((op)=>allowed.has(op))).filter((group)=>group.length > 0);
+}
+const HIDE_SYMBOLS_FOR = new Set([
+    'boolean'
+]);
+const QueryBarOperatorMenu = ({ fieldType, operators, onSelect, open = false, onOpenChange, onEscape, positioning, inputRef, filterText = '', menuRef, className })=>{
     const query = filterText.toLowerCase();
-    const filteredGroups = useMemo(()=>query ? operatorGroups.map((group)=>group.filter((op)=>getOperatorLabel(op, fieldType).toLowerCase().includes(query))).filter((group)=>group.length > 0) : operatorGroups, [
+    const operatorGroups = useMemo(()=>{
+        const allGroups = OPERATORS_BY_TYPE[fieldType] || [];
+        return operators ? filterOperatorGroups(allGroups, operators) : allGroups;
+    }, [
+        fieldType,
+        operators
+    ]);
+    const filteredGroups = useMemo(()=>query ? operatorGroups.map((group)=>group.filter((op)=>getOperatorLabel(op, fieldType).toLowerCase().includes(query) || OPERATOR_SYMBOLS[op].toLowerCase().includes(query) || op.toLowerCase().includes(query))).filter((group)=>group.length > 0) : operatorGroups, [
         operatorGroups,
         fieldType,
         query
@@ -42,17 +55,26 @@ const QueryBarOperatorMenu = ({ fieldType, onSelect, open = false, onOpenChange,
         onHighlightChange: onHighlightChange,
         children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
             ref: menuRef,
-            className: cn('w-64', className),
+            className: cn('w-256', className),
             children: [
                 filteredGroups.length > 0 ? filteredGroups.map((group, groupIdx)=>/*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx(DropdownMenuGroup, {
-                                children: group.map((operator)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
+                                children: group.map((operator)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
                                         value: operator,
                                         onSelect: ()=>onSelect(operator),
-                                        children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                            children: getOperatorLabel(operator, fieldType)
-                                        })
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                                children: getOperatorLabel(operator, fieldType)
+                                            }),
+                                            !HIDE_SYMBOLS_FOR.has(fieldType) && /*#__PURE__*/ jsx("span", {
+                                                className: "ml-auto inline-flex items-center",
+                                                children: /*#__PURE__*/ jsx(Kbd, {
+                                                    className: "font-mono",
+                                                    children: OPERATOR_SYMBOLS[operator]
+                                                })
+                                            })
+                                        ]
                                     }, operator))
                             }),
                             groupIdx < filteredGroups.length - 1 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {})

package/dist/components/QueryBar/hooks/useQueryBarAutocomplete/deriveAutocompleteValues.js

@@ -1,4 +1,4 @@
-import { chipIdToConditionIndex, getDateDisplayLabel, getOperatorLabel, isDatePreset, isMultiSelectOperator } from "../../lib/index.js";
+import { chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, isDatePreset, isMultiSelectOperator } from "../../lib/index.js";
 const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperator, conditions, buildingMultiValue, dateRangeFromValue, segmentFilterText })=>{
     const isBuilding = null !== selectedField && !editingChipId;
     const editingDateIsAbsolute = (()=>{
@@ -20,7 +20,10 @@ const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperat
         const values = Array.isArray(condition.value) ? condition.value : null != condition.value ? [
             condition.value
         ] : [];
-        if (condition.error && selectedField?.values) return values.filter((v)=>selectedField.values.some((opt)=>opt.value === v));
+        if (condition.error && selectedField) {
+            const fieldValues = getFieldValues(selectedField);
+            if (fieldValues.length > 0) return values.filter((v)=>fieldValues.some((opt)=>opt.value === v));
+        }
         return values;
     })();
     const editingSingleValue = (()=>{

package/dist/components/QueryBar/hooks/useQueryBarAutocomplete/useFocusManagement.d.ts

@@ -0,0 +1,20 @@
+import type { FocusEvent, RefObject } from 'react';
+import type { MenuState } from '../../types';
+interface UseFocusManagementDeps {
+    menuState: MenuState;
+    isFocused: boolean;
+    conditionsLength: number;
+    inputText: string;
+    containerRef: RefObject<HTMLElement | null>;
+    inputRef: RefObject<HTMLInputElement | null>;
+    editingSegment: string | null;
+    setIsFocused: (focused: boolean) => void;
+    setMenuState: (state: MenuState) => void;
+    resetMenuOffset: () => void;
+    resetState: (continueBuilding?: boolean) => void;
+}
+export declare const useFocusManagement: ({ menuState, isFocused, conditionsLength, inputText, containerRef, inputRef, editingSegment, setIsFocused, setMenuState, resetMenuOffset, resetState, }: UseFocusManagementDeps) => {
+    handleFocus: (e: FocusEvent) => void;
+    handleBlur: (e: FocusEvent) => void;
+};
+export {};

package/dist/components/QueryBar/hooks/useQueryBarAutocomplete/useFocusManagement.js

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useRef } from "react";
+import { isMenuRelated } from "../../lib/index.js";
+const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, containerRef, inputRef, editingSegment, setIsFocused, setMenuState, resetMenuOffset, resetState })=>{
+    const handleFocus = useCallback((e)=>{
+        if (e.target?.closest?.('[data-slot="query-bar-connector-chip"]')) return;
+        setIsFocused(true);
+    }, [
+        setIsFocused
+    ]);
+    const handleBlur = useCallback((e)=>{
+        const related = e.relatedTarget;
+        if (containerRef.current?.contains(related)) return;
+        if (isMenuRelated(related)) return;
+        setIsFocused(false);
+        resetState();
+    }, [
+        containerRef,
+        resetState,
+        setIsFocused
+    ]);
+    const prevFocusedRef = useRef(false);
+    useEffect(()=>{
+        if (isFocused && !prevFocusedRef.current && 0 === conditionsLength && '' === inputText) {
+            resetMenuOffset();
+            setMenuState('field');
+        }
+        prevFocusedRef.current = isFocused;
+    }, [
+        isFocused,
+        conditionsLength,
+        inputText,
+        resetMenuOffset,
+        setMenuState
+    ]);
+    useEffect(()=>{
+        if ('closed' === menuState) return;
+        let outerRaf = 0;
+        let innerRaf = 0;
+        outerRaf = requestAnimationFrame(()=>{
+            innerRaf = requestAnimationFrame(()=>{
+                if (editingSegment) {
+                    const segmentInput = containerRef.current?.querySelector(`[data-slot="segment-${editingSegment}"] input`);
+                    if (segmentInput && document.activeElement !== segmentInput) {
+                        segmentInput.focus();
+                        segmentInput.select();
+                    } else if (!segmentInput && document.activeElement !== inputRef.current) inputRef.current?.focus();
+                } else if (document.activeElement !== inputRef.current) inputRef.current?.focus();
+            });
+        });
+        return ()=>{
+            cancelAnimationFrame(outerRaf);
+            cancelAnimationFrame(innerRaf);
+        };
+    }, [
+        menuState,
+        inputRef,
+        editingSegment,
+        containerRef
+    ]);
+    return {
+        handleFocus,
+        handleBlur
+    };
+};
+export { useFocusManagement };

package/dist/components/QueryBar/hooks/useQueryBarAutocomplete/useInputHandlers.d.ts

@@ -0,0 +1,27 @@
+import type { ChangeEvent, KeyboardEvent, MutableRefObject, RefObject } from 'react';
+import type { FieldMetadata, FilterOperator, MenuState } from '../../types';
+interface UseInputHandlersDeps {
+    inputText: string;
+    menuState: MenuState;
+    selectedField: FieldMetadata | null;
+    isFocused: boolean;
+    fields: FieldMetadata[];
+    inputRef: RefObject<HTMLInputElement | null>;
+    conditionsLengthRef: MutableRefObject<number>;
+    effectiveInsertIndexRef: MutableRefObject<number>;
+    setInputText: (text: string) => void;
+    setMenuState: (state: MenuState) => void;
+    setInsertIndex: (fn: (prev: number | null) => number) => void;
+    resetMenuOffset: () => void;
+    removeConditionAtIndex: (index: number) => void;
+    handleFieldSelect: (field: FieldMetadata) => void;
+    handleOperatorSelect: (operator: FilterOperator) => void;
+    handleCustomValueCommit: (text: string) => void;
+}
+export declare const useInputHandlers: ({ inputText, menuState, selectedField, isFocused, fields, inputRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, }: UseInputHandlersDeps) => {
+    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleInputClick: () => void;
+    handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    menuRef: RefObject<HTMLDivElement | null>;
+};
+export {};

package/dist/components/QueryBar/hooks/useQueryBarAutocomplete/useInputHandlers.js

@@ -0,0 +1,104 @@
+import { useCallback, useRef } from "react";
+import { OPERATOR_SYMBOLS, getOperatorFromLabel, hasFieldValues } from "../../lib/index.js";
+const useInputHandlers = ({ inputText, menuState, selectedField, isFocused, fields, inputRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit })=>{
+    const menuRef = useRef(null);
+    const handleInputChange = useCallback((e)=>{
+        const text = e.target.value;
+        setInputText(text);
+        if (text && !selectedField) setMenuState('field');
+        else if (!text && !selectedField) setMenuState(isFocused && 0 === conditionsLengthRef.current ? 'field' : 'closed');
+    }, [
+        selectedField,
+        isFocused,
+        setInputText,
+        setMenuState,
+        conditionsLengthRef
+    ]);
+    const handleInputClick = useCallback(()=>{
+        inputRef.current?.focus();
+        if ('closed' === menuState && !selectedField) {
+            resetMenuOffset();
+            setMenuState('field');
+        }
+    }, [
+        menuState,
+        selectedField,
+        resetMenuOffset,
+        inputRef,
+        setMenuState
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if ('ArrowDown' === e.key && 'closed' !== menuState) {
+            e.preventDefault();
+            menuRef.current?.focus();
+            return;
+        }
+        if ('Enter' === e.key && 'field' === menuState && !selectedField && inputText.trim()) {
+            const trimmed = inputText.trim().toLowerCase();
+            const matched = fields.find((f)=>f.label.toLowerCase() === trimmed || f.name.toLowerCase() === trimmed);
+            if (matched) {
+                e.preventDefault();
+                handleFieldSelect(matched);
+                setInputText('');
+                return;
+            }
+        }
+        if ('Enter' === e.key && 'operator' === menuState && selectedField && inputText.trim()) {
+            const trimmed = inputText.trim();
+            let matched = getOperatorFromLabel(trimmed, selectedField.type);
+            if (!matched) {
+                const symbolMatch = Object.entries(OPERATOR_SYMBOLS).find(([, sym])=>sym.toLowerCase() === trimmed.toLowerCase());
+                if (symbolMatch) matched = symbolMatch[0];
+            }
+            if (!matched) {
+                const allOperators = selectedField.operators ?? [];
+                const rawMatch = allOperators.find((op)=>op.toLowerCase() === trimmed.toLowerCase());
+                if (rawMatch) matched = rawMatch;
+            }
+            if (matched) {
+                e.preventDefault();
+                handleOperatorSelect(matched);
+                setInputText('');
+                return;
+            }
+        }
+        if ('Enter' === e.key && 'value' === menuState && selectedField && !hasFieldValues(selectedField) && inputText.trim()) {
+            e.preventDefault();
+            handleCustomValueCommit(inputText);
+            return;
+        }
+        if ('Backspace' === e.key && !e.repeat && '' === inputText && conditionsLengthRef.current > 0) {
+            e.preventDefault();
+            const removeIdx = effectiveInsertIndexRef.current - 1;
+            if (removeIdx >= 0) {
+                removeConditionAtIndex(removeIdx);
+                setInsertIndex((prev)=>{
+                    const eff = prev ?? conditionsLengthRef.current;
+                    return eff > 0 ? eff - 1 : 0;
+                });
+            }
+            setMenuState('closed');
+        }
+    }, [
+        inputText,
+        removeConditionAtIndex,
+        menuState,
+        selectedField,
+        fields,
+        handleFieldSelect,
+        handleOperatorSelect,
+        handleCustomValueCommit,
+        setInputText,
+        setMenuState,
+        setInsertIndex,
+        conditionsLengthRef,
+        effectiveInsertIndexRef
+    ]);
+    return {
+        handleInputChange,
+        handleInputClick,
+        handleKeyDown,
+        menuRef
+    };
+};
+export { useInputHandlers };

package/dist/components/QueryBar/hooks/useQueryBarAutocomplete/useMenuFlow.d.ts

@@ -13,7 +13,7 @@ interface MenuFlowDeps {
     insertIndex: number;
     upsertCondition: (field: FieldMetadata, operator: FilterOperator, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: boolean, dateOrigin?: 'relative' | 'absolute') => void;
     conditions: Condition[];
-    resetState: () => void;
+    resetState: (continueBuilding?: boolean) => void;
     dateRange: {
         selectValue: (val: string) => string[] | null;
     };