@wallarm-org/design-system 0.36.0 → 0.37.0-rc-feature-AS-970.1

package/dist/components/FilterInput/FilterInput.js

@@ -49,7 +49,7 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
         setInputText: autocomplete.setInputText,
         closeMenu: autocomplete.closeAutocompleteMenu,
         replaceExpression,
-        resetAutocompleteState: autocomplete.handleMenuDiscard
+        resetAutocompleteState: autocomplete.resetAutocompleteState
     });
     const contextValue = useFilterInputContextValue({
         chips,

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

@@ -23,6 +23,9 @@ export interface FilterInputContextValue {
     onInputClick: () => void;
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
     onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    /** Click on a segment of the *building* (in-progress) chip — re-opens the
+     *  corresponding menu and enters inline-edit without committing the chip. */
+    onBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
     onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     onChipRemove: (chipId: string) => void;
     onClear: () => void;
@@ -33,6 +36,7 @@ export interface FilterInputContextValue {
     onCancelSegmentEdit: () => void;
     onCustomValueCommit: (customText: string) => void;
     onCustomAttributeCommit: (customText: string) => void;
+    onCustomOperatorCommit: (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) */

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

@@ -10,6 +10,7 @@ interface AutocompleteForContext {
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleInputClick: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
     handleConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;
@@ -23,6 +24,7 @@ interface AutocompleteForContext {
     cancelSegmentEdit: () => void;
     handleCustomValueCommit: (customText: string) => void;
     handleCustomAttributeCommit: (customText: string) => void;
+    handleCustomOperatorCommit: (customText: string) => void;
     menuRef: RefObject<HTMLDivElement | null>;
     closeAutocompleteMenu: () => void;
     segmentAttributeInputRef: RefObject<HTMLInputElement | null>;

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

@@ -16,6 +16,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onInputKeyDown: autocomplete.handleKeyDown,
             onInputClick: autocomplete.handleInputClick,
             onChipClick: autocomplete.handleChipClick,
+            onBuildingChipClick: autocomplete.handleBuildingChipClick,
             onConnectorChange: autocomplete.handleConnectorChange,
             onChipRemove: autocomplete.handleChipRemove,
             onClear: autocomplete.handleClear,
@@ -26,6 +27,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onCancelSegmentEdit: autocomplete.cancelSegmentEdit,
             onCustomValueCommit: autocomplete.handleCustomValueCommit,
             onCustomAttributeCommit: autocomplete.handleCustomAttributeCommit,
+            onCustomOperatorCommit: autocomplete.handleCustomOperatorCommit,
             menuRef: autocomplete.menuRef,
             closeAutocompleteMenu: autocomplete.closeAutocompleteMenu,
             registerChipRef,
@@ -44,6 +46,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleKeyDown,
         autocomplete.handleInputClick,
         autocomplete.handleChipClick,
+        autocomplete.handleBuildingChipClick,
         autocomplete.handleConnectorChange,
         autocomplete.handleChipRemove,
         autocomplete.handleClear,
@@ -54,6 +57,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.cancelSegmentEdit,
         autocomplete.handleCustomValueCommit,
         autocomplete.handleCustomAttributeCommit,
+        autocomplete.handleCustomOperatorCommit,
         autocomplete.menuRef,
         autocomplete.closeAutocompleteMenu,
         autocomplete.segmentAttributeInputRef,

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

@@ -8,11 +8,11 @@ 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 interactive = !disabled;
     const hasError = !!error;
     const internalRef = useRef(null);
     const editing = useEditingContext();
-    const isEditingThisChip = null != editing && null != chipId && editing.editingChipId === chipId;
+    const isEditingThisChip = null != editing && null != editing.editingSegment && (building ? null == editing.editingChipId : null != chipId && editing.editingChipId === chipId);
     const activeSegment = isEditingThisChip ? editing.editingSegment : null;
     const handleSegmentClick = useCallback((segment, e)=>{
         if (!onSegmentClick) return;
@@ -25,6 +25,9 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
         onSegmentClick,
         activeSegment
     ]);
+    const handleSegmentMouseDown = useCallback((e)=>{
+        e.preventDefault();
+    }, []);
     const segmentEditProps = (segment)=>isEditingThisChip && editing.editingSegment === segment ? {
             editing: true,
             editText: editing.segmentFilterText,
@@ -44,7 +47,8 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
         className: cn(chipVariants({
             error: hasError,
             interactive,
-            disabled
+            disabled,
+            building
         }), 'max-w-[320px]', className),
         "data-slot": "filter-input-condition-chip",
         ...props,
@@ -54,6 +58,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                 className: "shrink-0",
                 error: true === error || error === SEGMENT_VARIANT.attribute,
                 onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.attribute, e) : void 0,
+                onMouseDown: interactive && building ? handleSegmentMouseDown : void 0,
                 ...segmentEditProps(SEGMENT_VARIANT.attribute),
                 children: attribute
             }),
@@ -61,6 +66,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                 variant: SEGMENT_VARIANT.operator,
                 className: "shrink-0",
                 onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.operator, e) : void 0,
+                onMouseDown: interactive && building ? handleSegmentMouseDown : void 0,
                 ...segmentEditProps(SEGMENT_VARIANT.operator),
                 children: operator ?? ''
             }),
@@ -72,10 +78,11 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                 valueSeparator: valueSeparator,
                 errorValueIndices: errorValueIndices,
                 onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.value, e) : void 0,
+                onMouseDown: interactive && building ? handleSegmentMouseDown : void 0,
                 ...segmentEditProps(SEGMENT_VARIANT.value),
                 children: value ?? ''
             }),
-            building && /*#__PURE__*/ jsx(ChipSearchInput, {}),
+            building && !isEditingThisChip && /*#__PURE__*/ jsx(ChipSearchInput, {}),
             onRemove && !disabled && /*#__PURE__*/ jsx(FilterInputRemoveButton, {
                 error: hasError,
                 onRemove: onRemove

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

@@ -3,6 +3,7 @@ export declare const chipVariants: (props?: ({
     error?: boolean | null | undefined;
     interactive?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
+    building?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Segment container */
 export declare const segmentContainer = "flex flex-col justify-center overflow-hidden leading-none";

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

@@ -14,11 +14,15 @@ const chipVariants = cva(`h-22 group/chip relative flex items-center justify-cen
         disabled: {
             true: 'opacity-50 cursor-default',
             false: ''
+        },
+        building: {
+            true: '',
+            false: ''
         }
     },
     compoundVariants: [
         {
-            interactive: false,
+            building: true,
             error: false,
             className: 'border-border-strong-primary'
         }
@@ -26,7 +30,8 @@ const chipVariants = cva(`h-22 group/chip relative flex items-center justify-cen
     defaultVariants: {
         error: false,
         interactive: false,
-        disabled: false
+        disabled: false,
+        building: false
     }
 });
 const segmentContainer = 'flex flex-col justify-center overflow-hidden leading-none';

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

@@ -15,7 +15,7 @@ import { FilterInputSearch } from "./FilterInputSearch.js";
 import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
 import { useExpandCollapse } from "./hooks/useExpandCollapse.js";
 const FilterInputField = ({ className, ...props })=>{
-    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, menuRef } = useFilterInputContext();
+    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, menuRef } = useFilterInputContext();
     const hasContent = chips.length > 0 || null != buildingChipData;
     const { isExpanded, isOverflowing, innerRef, toggleExpand, multiRow } = useExpandCollapse();
     const { chipsBefore, chipsAfter, hideTrailingGap, hideLeadingGap } = useChipsSplitting(chips, insertIndex, insertAfterConnector);
@@ -42,6 +42,11 @@ const FilterInputField = ({ className, ...props })=>{
                 onCustomAttributeCommit(segmentFilterText);
                 return;
             }
+            if (editingSegment === SEGMENT_VARIANT.operator) {
+                e.preventDefault();
+                onCustomOperatorCommit(segmentFilterText);
+                return;
+            }
         }
         if ('ArrowDown' === e.key) {
             e.preventDefault();
@@ -53,6 +58,7 @@ const FilterInputField = ({ className, ...props })=>{
         segmentFilterText,
         onCustomValueCommit,
         onCustomAttributeCommit,
+        onCustomOperatorCommit,
         menuRef
     ]);
     const handleSegmentEditBlur = useCallback((e)=>{
@@ -108,9 +114,10 @@ const FilterInputField = ({ className, ...props })=>{
                                     buildingChipData ? /*#__PURE__*/ jsx(FilterInputChip, {
                                         ref: buildingChipRef,
                                         building: true,
-                                        attribute: buildingChipData.attribute ?? '',
+                                        attribute: buildingChipData.attribute,
                                         operator: buildingChipData.operator,
                                         value: buildingChipData.value,
+                                        onSegmentClick: onBuildingChipClick,
                                         className: "mx-4"
                                     }) : /*#__PURE__*/ jsx(FilterInputSearch, {
                                         hasContent: hasContent

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/deriveAutocompleteValues.js

@@ -1,4 +1,4 @@
-import { chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator } from "../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../lib/index.js";
 const getEditingCondition = (editingChipId, conditions)=>{
     if (!editingChipId) return null;
     const idx = chipIdToConditionIndex(editingChipId);
@@ -32,6 +32,7 @@ const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperat
     const buildingValue = (()=>{
         if (buildingMultiValue) return buildingMultiValue;
         if (dateRangeFromValue && 'between' === selectedOperator) return `${getDateDisplayLabel(dateRangeFromValue)} – ...`;
+        if (selectedOperator && isNoValueOperator(selectedOperator)) return NO_VALUE_PLACEHOLDER;
     })();
     const buildingChipData = isBuilding ? {
         attribute: selectedField.label,

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useBlurCommit.d.ts

@@ -29,5 +29,8 @@ interface UseBlurCommitDeps {
  * plus a blur in the same tick) short-circuit on re-entry instead of creating
  * duplicate error chips.
  */
-export declare const useBlurCommit: ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, commitBuildingOnBlurRef, }: UseBlurCommitDeps) => () => boolean;
+export declare const useBlurCommit: ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, commitBuildingOnBlurRef, }: UseBlurCommitDeps) => {
+    commitBuildingOnBlur: () => boolean;
+    hasIncompleteBuilding: () => boolean;
+};
 export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useBlurCommit.js

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from "react";
+import { isBuildingComplete, isNoValueOperator } from "../../lib/index.js";
 const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, commitBuildingOnBlurRef })=>{
     const selectedFieldRef = useRef(selectedField);
     selectedFieldRef.current = selectedField;
@@ -14,16 +15,18 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
         const text = inputTextRef.current.trim();
         if (!field) return false;
         if (editingChipId) return false;
+        const hasTypedValue = !!operator && !isNoValueOperator(operator) && text.length > 0;
+        if (!isBuildingComplete(field, operator, null) && !hasTypedValue) return false;
         committingRef.current = true;
         try {
             selectedFieldRef.current = null;
             selectedOperatorRef.current = null;
             inputTextRef.current = '';
-            if (operator && text) {
+            if (hasTypedValue) {
                 handleCustomValueCommit(text);
                 return true;
             }
-            upsertCondition(field, operator ?? void 0, null, void 0, effectiveInsertIndexRef.current, true);
+            upsertCondition(field, operator, null, void 0, effectiveInsertIndexRef.current);
             resetState();
             return true;
         } finally{
@@ -37,6 +40,12 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
         effectiveInsertIndexRef
     ]);
     commitBuildingOnBlurRef.current = commitBuildingOnBlur;
-    return commitBuildingOnBlur;
+    const hasIncompleteBuilding = useCallback(()=>null !== selectedFieldRef.current && !editingChipId, [
+        editingChipId
+    ]);
+    return {
+        commitBuildingOnBlur,
+        hasIncompleteBuilding
+    };
 };
 export { useBlurCommit };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipActions.js

@@ -25,6 +25,7 @@ const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, cl
         resetState
     ]);
     const handleGapClick = useCallback((conditionIndex, afterConnector)=>{
+        resetState();
         flushSync(()=>{
             setInsertIndex(conditionIndex);
             setInsertAfterConnector(afterConnector);
@@ -34,6 +35,7 @@ const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, cl
         setMenuState('field');
         inputRef.current?.focus();
     }, [
+        resetState,
         resetMenuOffset,
         inputRef,
         setInsertIndex,

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.d.ts

@@ -26,6 +26,7 @@ export declare const useChipEditing: ({ conditions, chips, fields, containerRef,
     setSegmentFilterText: (text: string) => void;
     resetSegmentTyping: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
     clearEditing: () => void;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.js

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { chipIdToConditionIndex, getOperatorFromLabel } from "../../lib/index.js";
+import { chipIdToConditionIndex, getOperatorFromLabel, isNoValueOperator } from "../../lib/index.js";
 const getConditionByChipId = (chipId, conditions)=>{
     const idx = chipIdToConditionIndex(chipId);
     return null !== idx ? conditions[idx] ?? null : null;
@@ -35,7 +35,8 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         const chip = chipsRef.current.find((c)=>c.id === chipId);
         if (!chip || 'chip' !== chip.variant) return;
         const incompleteSegment = condition.error ? getFirstIncompleteSegment(condition, fieldsRef.current) : null;
-        const targetSegment = incompleteSegment ?? segment;
+        const isPlaceholderValueClick = segment === SEGMENT_VARIANT.value && null != condition.operator && isNoValueOperator(condition.operator);
+        const targetSegment = incompleteSegment ?? (isPlaceholderValueClick ? SEGMENT_VARIANT.operator : segment);
         if (!field && targetSegment !== SEGMENT_VARIANT.attribute) return;
         if (incompleteSegment && field) upsertCondition(field, condition.operator, condition.value, chipId);
         const containerRect = containerRef.current?.getBoundingClientRect();
@@ -67,6 +68,12 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         setSegmentFilterText('');
         setUserHasTyped(false);
     }, []);
+    const startBuildingEdit = useCallback((segment, currentText)=>{
+        setEditingChipId(null);
+        setEditingSegment(segment);
+        setSegmentFilterText(currentText);
+        setUserHasTyped(false);
+    }, []);
     const handleSegmentFilterChange = useCallback((text)=>{
         setSegmentFilterText(text);
         setUserHasTyped(true);
@@ -85,6 +92,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
             setSegmentFilterText: handleSegmentFilterChange,
             resetSegmentTyping,
             handleChipClick,
+            startBuildingEdit,
             clearEditing
         }), [
         editingChipId,
@@ -94,6 +102,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         handleSegmentFilterChange,
         resetSegmentTyping,
         handleChipClick,
+        startBuildingEdit,
         clearEditing
     ]);
 };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.d.ts

@@ -1,4 +1,5 @@
 import type { RefObject } from 'react';
+import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
 import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
 interface UseFilterInputAutocompleteOptions {
     fields: FieldMetadata[];
@@ -46,8 +47,13 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     handleBuildingValueChange: (preview: string | undefined) => void;
     handleMultiSelectToggle: () => void;
     handleMenuClose: () => void;
-    handleMenuDiscard: (continueBuilding?: boolean) => void;
-    handleChipClick: (chipId: string, segment: import("../../FilterInputField").ChipSegment, anchorRect: DOMRect) => void;
+    handleMenuDiscard: () => void;
+    /** Hard reset of autocomplete state — used by paste/clipboard flows where
+     *  the conditions array is replaced and any in-progress building must be
+     *  scrapped, regardless of inline-edit mode. */
+    resetAutocompleteState: (continueBuilding?: boolean) => void;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
     handleConnectorChange: (connectorId: string, value: "and" | "or") => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;
@@ -67,6 +73,7 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     cancelSegmentEdit: () => void;
     handleCustomValueCommit: (customText: string) => void;
     handleCustomAttributeCommit: (customText: string) => void;
+    handleCustomOperatorCommit: (customText: string) => void;
     menuRef: RefObject<HTMLDivElement | null>;
     closeAutocompleteMenu: () => void;
     blurCommitRef: RefObject<(() => boolean) | null>;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.js

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
-import { applyAcceptChar } from "../../lib/index.js";
+import { applyAcceptChar, getOperatorLabel } from "../../lib/index.js";
 import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
 import { useBlurCommit } from "./useBlurCommit.js";
 import { useChipActions } from "./useChipActions.js";
@@ -65,7 +65,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setInsertAfterConnector,
         setMenuState
     });
-    const { handleMenuClose, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleBuildingValueChange, handleMultiSelectToggle, handleRangeSelect, handleCustomValueCommit, handleCustomAttributeCommit } = useMenuFlow({
+    const { handleMenuClose, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleBuildingValueChange, handleMultiSelectToggle, handleRangeSelect, handleCustomValueCommit, handleCustomAttributeCommit, handleCustomOperatorCommit } = useMenuFlow({
         editing,
         selectedField,
         selectedOperator,
@@ -87,6 +87,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         inputText,
         menuState,
         selectedField,
+        selectedOperator,
         isFocused,
         fields,
         inputRef,
@@ -102,7 +103,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         handleOperatorSelect,
         handleCustomValueCommit
     });
-    const commitBuildingOnBlur = useBlurCommit({
+    const { commitBuildingOnBlur, hasIncompleteBuilding } = useBlurCommit({
         selectedField,
         selectedOperator,
         inputText,
@@ -118,6 +119,8 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         isFocused,
         conditionsLength: conditions.length,
         inputText,
+        selectedField,
+        selectedOperator,
         containerRef,
         inputRef,
         editingSegment: editing.editingSegment,
@@ -126,6 +129,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         segmentValueInputRef,
         blurCommitRef,
         commitBuildingOnBlur,
+        hasIncompleteBuilding,
         setIsFocused,
         setMenuState,
         resetMenuOffset,
@@ -160,6 +164,12 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         editing
     ]);
     const cancelSegmentEdit = useCallback(()=>{
+        const isBuildingEdit = !editing.editingChipId && null !== editing.editingSegment;
+        if (isBuildingEdit) {
+            editing.clearEditing();
+            setMenuState('closed');
+            return;
+        }
         setSelectedField(null);
         setSelectedOperator(null);
         editing.clearEditing();
@@ -167,6 +177,34 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
     }, [
         editing
     ]);
+    const handleMenuDiscard = useCallback(()=>{
+        const isBuildingEdit = !editing.editingChipId && null !== editing.editingSegment;
+        if (isBuildingEdit) {
+            editing.clearEditing();
+            setMenuState('closed');
+            return;
+        }
+        resetState();
+    }, [
+        editing,
+        resetState
+    ]);
+    const handleBuildingChipClick = useCallback((segment, anchorRect)=>{
+        if (!selectedField) return;
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        setMenuOffset(containerRect ? anchorRect.left - containerRect.left : 0);
+        const initialText = segment === SEGMENT_VARIANT.attribute ? selectedField.label : segment === SEGMENT_VARIANT.operator ? selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : '' : buildingMultiValue ?? '';
+        editing.startBuildingEdit(segment, initialText);
+        setInputText('');
+        setMenuState(segment === SEGMENT_VARIANT.attribute ? 'field' : segment === SEGMENT_VARIANT.operator ? 'operator' : 'value');
+    }, [
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        containerRef,
+        setMenuOffset,
+        editing
+    ]);
     return {
         inputText,
         menuState,
@@ -187,8 +225,10 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         handleBuildingValueChange,
         handleMultiSelectToggle,
         handleMenuClose,
-        handleMenuDiscard: resetState,
+        handleMenuDiscard,
+        resetAutocompleteState: resetState,
         handleChipClick: editing.handleChipClick,
+        handleBuildingChipClick,
         handleConnectorChange: setConnectorValue,
         handleChipRemove,
         handleClear,
@@ -208,6 +248,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         cancelSegmentEdit,
         handleCustomValueCommit,
         handleCustomAttributeCommit,
+        handleCustomOperatorCommit,
         menuRef,
         closeAutocompleteMenu,
         blurCommitRef,

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFocusManagement.d.ts

@@ -1,11 +1,15 @@
 import type { FocusEvent, RefObject } from 'react';
 import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
-import type { MenuState } from '../../types';
+import type { FieldMetadata, FilterOperator, MenuState } from '../../types';
 interface UseFocusManagementDeps {
     menuState: MenuState;
     isFocused: boolean;
     conditionsLength: number;
     inputText: string;
+    /** In-progress building-chip state — needed so refocus resumes at the next
+     *  missing segment instead of (incorrectly) reopening the field menu. */
+    selectedField: FieldMetadata | null;
+    selectedOperator: FilterOperator | null;
     containerRef: RefObject<HTMLElement | null>;
     inputRef: RefObject<HTMLInputElement | null>;
     editingSegment: ChipSegment | null;
@@ -19,12 +23,15 @@ interface UseFocusManagementDeps {
     blurCommitRef: RefObject<(() => boolean) | null>;
     /** Tries to commit a building chip's freeform value on blur. Returns true if committed. */
     commitBuildingOnBlur: () => boolean;
+    /** True if there's an in-progress building chip that the blur/close path
+     *  must preserve (skip resetState). */
+    hasIncompleteBuilding: () => boolean;
     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, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, setIsFocused, setMenuState, resetMenuOffset, resetState, }: UseFocusManagementDeps) => {
+export declare const useFocusManagement: ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuOffset, resetState, }: UseFocusManagementDeps) => {
     handleFocus: (e: FocusEvent) => void;
     handleBlur: (e: FocusEvent) => void;
 };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFocusManagement.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { isMenuRelated } from "../../lib/index.js";
-const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, setIsFocused, setMenuState, resetMenuOffset, resetState })=>{
+import { isMenuRelated, nextBuildingMenu } from "../../lib/index.js";
+const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuOffset, resetState })=>{
     const handleFocus = useCallback((e)=>{
         if (e.target?.closest?.('[data-slot="filter-input-connector-chip"]')) return;
         setIsFocused(true);
@@ -18,7 +18,8 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         try {
             setIsFocused(false);
             const committed = blurCommitRef.current?.() || commitBuildingOnBlur();
-            if (!committed) resetState();
+            if (!committed) if (hasIncompleteBuilding()) setMenuState('closed');
+            else resetState();
             related?.focus();
             if (document.activeElement === inputRef.current) inputRef.current?.blur();
         } finally{
@@ -28,13 +29,26 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         containerRef,
         blurCommitRef,
         commitBuildingOnBlur,
+        hasIncompleteBuilding,
         resetState,
         setIsFocused,
+        setMenuState,
         inputRef
     ]);
     const prevFocusedRef = useRef(false);
     useEffect(()=>{
-        if (isFocused && !prevFocusedRef.current && 0 === conditionsLength && '' === inputText) {
+        if (!isFocused || prevFocusedRef.current) {
+            prevFocusedRef.current = isFocused;
+            return;
+        }
+        if (editingSegment) {
+            prevFocusedRef.current = isFocused;
+            return;
+        }
+        if (selectedField) {
+            resetMenuOffset();
+            setMenuState(nextBuildingMenu(selectedField, selectedOperator));
+        } else if (0 === conditionsLength && '' === inputText) {
             resetMenuOffset();
             setMenuState('field');
         }
@@ -43,6 +57,9 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         isFocused,
         conditionsLength,
         inputText,
+        selectedField,
+        selectedOperator,
+        editingSegment,
         resetMenuOffset,
         setMenuState
     ]);

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useInputHandlers.d.ts

@@ -4,6 +4,9 @@ interface UseInputHandlersDeps {
     inputText: string;
     menuState: MenuState;
     selectedField: FieldMetadata | null;
+    /** Needed so a click into the main input while a building chip is alive
+     *  resumes at the next missing segment instead of doing nothing. */
+    selectedOperator: FilterOperator | null;
     isFocused: boolean;
     fields: FieldMetadata[];
     inputRef: RefObject<HTMLInputElement | null>;
@@ -19,7 +22,7 @@ interface UseInputHandlersDeps {
     handleOperatorSelect: (operator: FilterOperator) => void;
     handleCustomValueCommit: (text: string) => void;
 }
-export declare const useInputHandlers: ({ inputText, menuState, selectedField, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, }: UseInputHandlersDeps) => {
+export declare const useInputHandlers: ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, }: UseInputHandlersDeps) => {
     handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
     handleInputClick: () => void;
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useInputHandlers.js

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
-import { OPERATOR_SYMBOLS, applyAcceptChar, getOperatorFromLabel, hasFieldValues } from "../../lib/index.js";
-const useInputHandlers = ({ inputText, menuState, selectedField, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit })=>{
+import { OPERATOR_SYMBOLS, applyAcceptChar, getOperatorFromLabel, hasFieldValues, nextBuildingMenu } from "../../lib/index.js";
+const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit })=>{
     const menuRef = useRef(null);
     const handleInputChange = useCallback((e)=>{
         let text = e.target.value;
@@ -21,13 +21,13 @@ const useInputHandlers = ({ inputText, menuState, selectedField, isFocused, fiel
     ]);
     const handleInputClick = useCallback(()=>{
         inputRef.current?.focus();
-        if ('closed' === menuState && !selectedField) {
-            resetMenuOffset();
-            setMenuState('field');
-        }
+        if ('closed' !== menuState) return;
+        resetMenuOffset();
+        setMenuState(nextBuildingMenu(selectedField, selectedOperator));
     }, [
         menuState,
         selectedField,
+        selectedOperator,
         resetMenuOffset,
         inputRef,
         setMenuState

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useMenuFlow.d.ts

@@ -8,6 +8,9 @@ interface MenuFlowDeps {
         setEditingSegment: (segment: ChipSegment | null) => void;
         setSegmentFilterText: (text: string) => void;
         resetSegmentTyping: () => void;
+        /** Exit inline-edit and the building-edit marker. Called when switching
+         *  filter/operator in the building chip lands on the next menu. */
+        clearEditing: () => void;
     };
     selectedField: FieldMetadata | null;
     selectedOperator: FilterOperator | null;
@@ -38,6 +41,7 @@ export declare const useMenuFlow: ({ editing, selectedField, selectedOperator, f
     handleMultiSelectToggle: () => void;
     handleRangeSelect: (from: string, to: string) => void;
     handleCustomValueCommit: (customText: string) => void;
+    handleCustomOperatorCommit: (customText: string) => void;
     handleCustomAttributeCommit: (customText: string) => void;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useMenuFlow.js

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { chipIdToConditionIndex, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "../../lib/index.js";
+import { OPERATOR_SYMBOLS, chipIdToConditionIndex, getFieldOperators, getOperatorFromLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible } from "../../lib/index.js";
 import { resolveDateRangeValue, resolveDateValue, resolveMultiValues, resolveSingleValue, validateValueForField } from "./valueCommitHelpers.js";
 const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRef, insertIndex, upsertCondition, conditions, resetState, commitBuildingOnBlur, dateRange, setSelectedField, setSelectedOperator, setInputText, setMenuState, setBuildingMultiValue })=>{
     const conditionsRef = useRef(conditions);
@@ -8,11 +8,17 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
     const handleMenuClose = useCallback(()=>{
         if (document.activeElement === inputRef.current) return;
         if (document.activeElement?.closest?.('[data-slot^="segment-"]')) return;
-        if (!commitBuildingOnBlur()) resetState();
+        if (commitBuildingOnBlur()) return;
+        const hasIncompleteBuilding = null !== selectedField && !editing.editingChipId;
+        if (hasIncompleteBuilding) return void setMenuState('closed');
+        resetState();
     }, [
         commitBuildingOnBlur,
         resetState,
-        inputRef
+        inputRef,
+        selectedField,
+        editing.editingChipId,
+        setMenuState
     ]);
     const handleFieldSelect = useCallback((field)=>{
         if (editing.editingChipId && editing.editingSegment === SEGMENT_VARIANT.attribute) {
@@ -25,19 +31,44 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
             resetState();
             return;
         }
+        const isBuildingEdit = !editing.editingChipId && editing.editingSegment === SEGMENT_VARIANT.attribute;
+        if (isBuildingEdit) {
+            setSelectedField(field);
+            const keepOperator = selectedOperator ? isOperatorAllowedForField(field, selectedOperator) : false;
+            if (!keepOperator) setSelectedOperator(null);
+            editing.clearEditing();
+            setMenuState(keepOperator ? 'value' : 'operator');
+            return;
+        }
         setSelectedField(field);
         setInputText('');
         setMenuState('operator');
     }, [
         editing,
+        selectedOperator,
         upsertCondition,
         resetState,
         setSelectedField,
+        setSelectedOperator,
         setInputText,
         setMenuState
     ]);
     const handleOperatorSelect = useCallback((operator)=>{
         if (!selectedField) return;
+        const isBuildingEdit = !editing.editingChipId && editing.editingSegment === SEGMENT_VARIANT.operator;
+        if (isBuildingEdit) {
+            const shapeCompatible = isValueShapeCompatible(selectedOperator, operator);
+            if (!shapeCompatible) setBuildingMultiValue(void 0);
+            setSelectedOperator(operator);
+            editing.clearEditing();
+            if (isNoValueOperator(operator)) {
+                upsertCondition(selectedField, operator, null, null, insertIndex);
+                resetState(true);
+                return;
+            }
+            setMenuState('value');
+            return;
+        }
         if (isNoValueOperator(operator)) {
             const isEditing = !!editing.editingChipId;
             upsertCondition(selectedField, operator, null, editing.editingChipId, isEditing ? void 0 : insertIndex);
@@ -65,11 +96,14 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
     }, [
         editing,
         selectedField,
+        selectedOperator,
         insertIndex,
         upsertCondition,
         resetState,
         setSelectedOperator,
-        setMenuState
+        setMenuState,
+        setBuildingMultiValue,
+        setInputText
     ]);
     const handleValueSelect = useCallback((val)=>{
         if (!selectedField || !selectedOperator) return;
@@ -161,12 +195,16 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
         resetState
     ]);
     const handleCustomAttributeCommit = useCallback((customText)=>{
-        if (!editing.editingChipId || !customText.trim()) return;
+        if (!customText.trim()) return;
         const trimmed = customText.trim();
+        const matchedField = fields.find((f)=>f.label.toLowerCase() === trimmed.toLowerCase() || f.name.toLowerCase() === trimmed.toLowerCase());
+        if (!editing.editingChipId) {
+            if (matchedField) handleFieldSelect(matchedField);
+            return;
+        }
         const idx = chipIdToConditionIndex(editing.editingChipId);
         const condition = null !== idx ? conditionsRef.current[idx] : null;
         if (!condition) return;
-        const matchedField = fields.find((f)=>f.label.toLowerCase() === trimmed.toLowerCase() || f.name.toLowerCase() === trimmed.toLowerCase());
         if (matchedField) {
             const hasValueError = validateValueForField(matchedField, condition.value);
             upsertCondition(matchedField, condition.operator, condition.value, editing.editingChipId, void 0, hasValueError ? SEGMENT_VARIANT.value : void 0, condition.dateOrigin);
@@ -183,7 +221,27 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
         editing,
         fields,
         upsertCondition,
-        resetState
+        resetState,
+        handleFieldSelect
+    ]);
+    const handleCustomOperatorCommit = useCallback((customText)=>{
+        if (!selectedField || !customText.trim()) return;
+        const trimmed = customText.trim();
+        const allowed = getFieldOperators(selectedField);
+        let matched = getOperatorFromLabel(trimmed, selectedField.type);
+        if (!matched) {
+            const symbolMatch = allowed.find((op)=>OPERATOR_SYMBOLS[op].toLowerCase() === trimmed.toLowerCase());
+            if (symbolMatch) matched = symbolMatch;
+        }
+        if (!matched) {
+            const rawMatch = allowed.find((op)=>op.toLowerCase() === trimmed.toLowerCase());
+            if (rawMatch) matched = rawMatch;
+        }
+        if (!matched || !isOperatorAllowedForField(selectedField, matched)) return;
+        handleOperatorSelect(matched);
+    }, [
+        selectedField,
+        handleOperatorSelect
     ]);
     return {
         handleMenuClose,
@@ -195,6 +253,7 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
         handleMultiSelectToggle,
         handleRangeSelect,
         handleCustomValueCommit,
+        handleCustomOperatorCommit,
         handleCustomAttributeCommit
     };
 };

package/dist/components/FilterInput/hooks/useFilterInputExpression/buildChips.js

@@ -1,5 +1,5 @@
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { findOptionByValue, getDateDisplayLabel, getOperatorLabel } from "../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, findOptionByValue, getDateDisplayLabel, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
 import { getInvalidValueIndices } from "../useFilterInputAutocomplete/valueCommitHelpers.js";
 const INVALID_DATE = 'Invalid Date';
 const DATE_RANGE_SEPARATOR = ' – ';
@@ -84,6 +84,11 @@ const makeConditionChip = (i, conditions, fields, error)=>{
     const chipError = condition.error || (error ? true : void 0);
     const field = fields.find((f)=>f.name === condition.field);
     const baseChip = buildBaseChip(i, condition, field);
+    if (condition.operator && isNoValueOperator(condition.operator)) return {
+        ...baseChip,
+        value: NO_VALUE_PLACEHOLDER,
+        error: chipError
+    };
     if (field?.type === 'date') return Array.isArray(condition.value) ? buildDateRangeChip(baseChip, condition, chipError) : buildDateChip(baseChip, condition, chipError);
     if (Array.isArray(condition.value)) return buildMultiValueChip(baseChip, condition, field, chipError);
     return {

package/dist/components/FilterInput/lib/index.d.ts

@@ -9,7 +9,7 @@ export { buildContainerAnchoredRect, isMenuRelated } from './dom';
 export { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from './fields';
 export { filterAndSort } from './filterSort';
 export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
-export { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator, } from './operators';
+export { getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, NO_VALUE_PLACEHOLDER, nextBuildingMenu, } from './operators';
 export { type FilterParseError, isFilterParseError, parseExpression } from './parseExpression';
 export { serializeExpression } from './serializeExpression';
 export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';

package/dist/components/FilterInput/lib/index.js

@@ -8,8 +8,8 @@ import { buildContainerAnchoredRect, isMenuRelated } from "./dom.js";
 import { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
 import { filterAndSort } from "./filterSort.js";
 import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.js";
-import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "./operators.js";
+import { NO_VALUE_PLACEHOLDER, getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu } from "./operators.js";
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
 import { serializeExpression } from "./serializeExpression.js";
 import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
-export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
+export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, NO_VALUE_PLACEHOLDER, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression };

package/dist/components/FilterInput/lib/operators.d.ts

@@ -1,4 +1,11 @@
-import type { FieldType, FilterOperator } from '../types';
+import type { FieldMetadata, FieldType, FilterOperator, MenuState } from '../types';
+/**
+ * Filler text shown in the value slot of no-value operator chips so every
+ * chip visually has three segments. Kept here next to `isNoValueOperator`
+ * so committed (buildChips) and building-preview (deriveAutocompleteValues)
+ * paths can never drift.
+ */
+export declare const NO_VALUE_PLACEHOLDER = "\u2014";
 /**
  * Helper to get operator label for specific field type
  */
@@ -13,3 +20,27 @@ export declare const isMultiSelectOperator: (op: FilterOperator | null) => op is
 export declare const isNoValueOperator: (op: FilterOperator) => boolean;
 /** Check if operator is a between/range operator */
 export declare const isBetweenOperator: (op: FilterOperator | null) => boolean;
+/** Get the list of operators a field allows (custom override or full type list) */
+export declare const getFieldOperators: (field: FieldMetadata) => FilterOperator[];
+/** Check whether an operator is supported by a field's type/override list */
+export declare const isOperatorAllowedForField: (field: FieldMetadata, operator: FilterOperator) => boolean;
+/**
+ * The menu that should open to continue building a chip from its current
+ * state. Returns null when the chip is fully built and nothing should open.
+ * Reused by the refocus path (useFocusManagement) and the main-input click
+ * path (useInputHandlers) so both stay in sync.
+ */
+export declare const nextBuildingMenu: (field: FieldMetadata | null, operator: FilterOperator | null) => MenuState | null;
+/**
+ * Decide whether the in-progress (field, operator, value) triple is fully
+ * built — i.e. has all the segments the chip needs. No-value operators
+ * (is_null / is_not_null) are complete without a value: the chip renders a
+ * value-placeholder in that slot so it still visually has three segments.
+ */
+export declare const isBuildingComplete: (field: FieldMetadata | null, operator: FilterOperator | null, value: string | number | boolean | Array<string | number | boolean> | null | undefined) => boolean;
+/**
+ * Check whether two operators handle values in compatible shapes
+ * (multi-select / between / no-value categories match), meaning a value
+ * preview built for `a` can be reused as-is for `b`.
+ */
+export declare const isValueShapeCompatible: (a: FilterOperator | null, b: FilterOperator | null) => boolean;

package/dist/components/FilterInput/lib/operators.js

@@ -1,4 +1,5 @@
-import { MULTI_SELECT_OPERATORS, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE } from "./constants.js";
+import { MULTI_SELECT_OPERATORS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE } from "./constants.js";
+const NO_VALUE_PLACEHOLDER = '—';
 const getOperatorLabel = (operator, fieldType)=>OPERATOR_LABELS_BY_TYPE[fieldType]?.[operator] ?? OPERATOR_LABELS[operator];
 const getOperatorFromLabel = (label, fieldType)=>{
     const typeLabels = OPERATOR_LABELS_BY_TYPE[fieldType];
@@ -10,4 +11,26 @@ const getOperatorFromLabel = (label, fieldType)=>{
 const isMultiSelectOperator = (op)=>null !== op && MULTI_SELECT_OPERATORS.includes(op);
 const isNoValueOperator = (op)=>NO_VALUE_OPERATORS.includes(op);
 const isBetweenOperator = (op)=>'between' === op;
-export { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator };
+const getFieldOperators = (field)=>field.operators ?? OPERATORS_BY_TYPE[field.type].flat();
+const isOperatorAllowedForField = (field, operator)=>getFieldOperators(field).includes(operator);
+const nextBuildingMenu = (field, operator)=>{
+    if (!field) return 'field';
+    if (!operator) return 'operator';
+    return 'value';
+};
+const isBuildingComplete = (field, operator, value)=>{
+    if (!field || !operator) return false;
+    if (isNoValueOperator(operator)) return true;
+    if (null == value) return false;
+    if (Array.isArray(value)) return value.length > 0;
+    return '' !== value;
+};
+const isValueShapeCompatible = (a, b)=>{
+    if (a === b) return true;
+    if (null == a || null == b) return false;
+    if (isMultiSelectOperator(a) !== isMultiSelectOperator(b)) return false;
+    if (isBetweenOperator(a) !== isBetweenOperator(b)) return false;
+    if (isNoValueOperator(a) !== isNoValueOperator(b)) return false;
+    return true;
+};
+export { NO_VALUE_PLACEHOLDER, getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.35.0",
-  "generatedAt": "2026-05-15T08:59:28.441Z",
+  "version": "0.36.0",
+  "generatedAt": "2026-05-15T12:04:58.806Z",
   "components": [
     {
       "name": "Alert",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.36.0",
+  "version": "0.37.0-rc-feature-AS-970.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",