@wallarm-org/design-system 0.66.3 → 0.67.0

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

@@ -1,10 +1,13 @@
 import type { RefObject } from 'react';
 import type { ChipSegment } from '../../../FilterInputField/FilterInputChip';
 import type { Condition, FieldMetadata, FilterOperator, MenuState, UpsertCondition } from '../../../types';
+import type { BuildingBase } from '../useAutocompleteState';
 export interface MenuFlowDeps {
     editing: {
         editingChipId: string | null;
         editingSegment: ChipSegment | null;
+        /** Which triplet is being edited: 0 = base, 1 = paired second. */
+        editingSide: 0 | 1;
         /** Pre-derived chipId === null && segment !== null marker — single source
          *  of truth, avoids re-deriving in every consumer. */
         isBuildingEdit: boolean;
@@ -36,6 +39,12 @@ export interface MenuFlowDeps {
     setInputText: (text: string) => void;
     setMenuState: (state: MenuState) => void;
     setBuildingMultiValue: (val: string | undefined) => void;
+    /** Which triplet is being built: 0 = base, 1 = paired second. */
+    buildingSide: 0 | 1;
+    setBuildingSide: (side: 0 | 1) => void;
+    /** Base triplet stashed while building a paired chip's second value. */
+    buildingBase: BuildingBase | null;
+    setBuildingBase: (base: BuildingBase | null) => void;
 }
 /** Shared shape: each sub-hook receives the same deps plus a ref to `conditions`
  *  that stays fresh without forcing callbacks to recreate on every keystroke. */

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

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
 import { OPERATOR_SYMBOLS, chipIdToConditionIndex, getFieldOperators, getOperatorFromLabel, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible } from "../../../lib/index.js";
 const useOperatorFlow = ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, setSelectedOperator, setMenuState, setBuildingMultiValue, setInputText })=>{
-    const { editingChipId, editingSegment, isBuildingEdit, setEditingSegment, setSegmentFilterText, clearEditing } = editing;
+    const { editingChipId, editingSegment, editingSide, isBuildingEdit, setEditingSegment, setSegmentFilterText, clearEditing } = editing;
     const handleOperatorSelect = useCallback((operator)=>{
         if (!selectedField) return;
         if (isBuildingEdit && editingSegment === SEGMENT_VARIANT.operator) {
@@ -20,7 +20,7 @@ const useOperatorFlow = ({ editing, selectedField, selectedOperator, insertIndex
         }
         if (isNoValueOperator(operator)) {
             const isEditing = !!editingChipId;
-            upsertCondition(selectedField, operator, null, editingChipId, isEditing ? void 0 : insertIndex);
+            upsertCondition(selectedField, operator, null, editingChipId, isEditing ? void 0 : insertIndex, void 0, void 0, editingSide);
             resetState(!isEditing);
             return;
         }
@@ -28,13 +28,15 @@ const useOperatorFlow = ({ editing, selectedField, selectedOperator, insertIndex
             const idx = chipIdToConditionIndex(editingChipId);
             const condition = null !== idx ? conditionsRef.current[idx] : null;
             if (condition) {
-                const hasValue = null !== condition.value && '' !== condition.value;
+                const currentValue = 1 === editingSide ? condition.pair?.value : condition.value;
+                const currentDateOrigin = 1 === editingSide ? condition.pair?.dateOrigin : condition.dateOrigin;
+                const hasValue = null !== currentValue && '' !== currentValue && void 0 !== currentValue;
                 if (hasValue) {
-                    upsertCondition(selectedField, operator, condition.value, editingChipId, void 0, void 0, condition.dateOrigin);
+                    upsertCondition(selectedField, operator, currentValue, editingChipId, void 0, void 0, currentDateOrigin, editingSide);
                     resetState();
                     return;
                 }
-                upsertCondition(selectedField, operator, null, editingChipId);
+                upsertCondition(selectedField, operator, 1 === editingSide ? '' : null, editingChipId, void 0, void 0, void 0, editingSide);
                 setEditingSegment(SEGMENT_VARIANT.value);
                 setSegmentFilterText('');
             }
@@ -45,6 +47,7 @@ const useOperatorFlow = ({ editing, selectedField, selectedOperator, insertIndex
     }, [
         editingChipId,
         editingSegment,
+        editingSide,
         isBuildingEdit,
         setEditingSegment,
         setSegmentFilterText,

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

@@ -4,7 +4,7 @@ import type { MenuFlowInternalDeps } from './types';
  * keyboard-typed custom-value commit (which routes through the field-type
  * specific resolver). Also handles multi-select preview/toggle plumbing.
  */
-export declare const useValueFlow: ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, dateRange, setBuildingMultiValue, setInputText, }: MenuFlowInternalDeps) => {
+export declare const useValueFlow: ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, dateRange, buildingSide, setBuildingSide, buildingBase, setBuildingBase, setSelectedField, setSelectedOperator, setMenuState, setBuildingMultiValue, setInputText, }: MenuFlowInternalDeps) => {
     handleValueSelect: (val: string | number | boolean) => void;
     handleMultiCommit: (values: Array<string | number | boolean>) => void;
     handleBuildingValueChange: (preview: string | undefined) => void;

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

@@ -2,28 +2,77 @@ import { useCallback } from "react";
 import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
 import { isBetweenOperator, isMultiSelectOperator } from "../../../lib/index.js";
 import { resolveDateRangeValue, resolveDateValue, resolveMultiValues, resolveSingleValue } from "../lib/index.js";
-const useValueFlow = ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, dateRange, setBuildingMultiValue, setInputText })=>{
-    const { editingChipId, editingSegment, resetSegmentTyping } = editing;
+const useValueFlow = ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, dateRange, buildingSide, setBuildingSide, buildingBase, setBuildingBase, setSelectedField, setSelectedOperator, setMenuState, setBuildingMultiValue, setInputText })=>{
+    const { editingChipId, editingSegment, editingSide, resetSegmentTyping } = editing;
+    const stashAndAdvance = useCallback((value)=>{
+        const pairedField = selectedField?.pairedField;
+        if (0 !== buildingSide || !pairedField || editingChipId || !selectedField || !selectedOperator) return false;
+        setBuildingBase({
+            field: selectedField,
+            operator: selectedOperator,
+            value
+        });
+        setSelectedField(pairedField);
+        setSelectedOperator(null);
+        setBuildingSide(1);
+        setInputText('');
+        setMenuState('operator');
+        return true;
+    }, [
+        selectedField,
+        selectedOperator,
+        buildingSide,
+        editingChipId,
+        setBuildingBase,
+        setSelectedField,
+        setSelectedOperator,
+        setBuildingSide,
+        setInputText,
+        setMenuState
+    ]);
+    const commitPairedSecond = useCallback((value, error, dateOrigin)=>{
+        if (1 !== buildingSide || !buildingBase || !selectedField || !selectedOperator) return false;
+        upsertCondition(buildingBase.field, buildingBase.operator, buildingBase.value, null, insertIndex);
+        upsertCondition(selectedField, selectedOperator, value, null, void 0, error, dateOrigin, 1);
+        setBuildingBase(null);
+        setBuildingSide(0);
+        resetState(true);
+        return true;
+    }, [
+        buildingSide,
+        buildingBase,
+        selectedField,
+        selectedOperator,
+        insertIndex,
+        upsertCondition,
+        setBuildingBase,
+        setBuildingSide,
+        resetState
+    ]);
     const handleValueSelect = useCallback((val)=>{
         if (!selectedField || !selectedOperator) return;
+        let committedValue = val;
         if (isBetweenOperator(selectedOperator) && 'date' === selectedField.type) {
             const result = dateRange.selectValue(String(val));
             if (!result) return;
-            upsertCondition(selectedField, selectedOperator, result, editingChipId);
-            resetState(!editingChipId);
-            return;
+            committedValue = result;
         }
+        if (stashAndAdvance(committedValue)) return;
+        if (commitPairedSecond(committedValue)) return;
         const isEditing = !!editingChipId;
-        upsertCondition(selectedField, selectedOperator, val, editingChipId, isEditing ? void 0 : insertIndex);
+        upsertCondition(selectedField, selectedOperator, committedValue, editingChipId, isEditing ? void 0 : insertIndex, void 0, void 0, editingSide);
         resetState(!isEditing);
     }, [
         selectedField,
         selectedOperator,
         editingChipId,
+        editingSide,
         dateRange,
         insertIndex,
         upsertCondition,
-        resetState
+        resetState,
+        stashAndAdvance,
+        commitPairedSecond
     ]);
     const handleMultiCommit = useCallback((values)=>{
         if (!selectedField || !selectedOperator || 0 === values.length) return;
@@ -71,29 +120,44 @@ const useValueFlow = ({ editing, selectedField, selectedOperator, insertIndex, u
         if (!selectedField || !selectedOperator || !customText.trim()) return;
         const trimmed = customText.trim();
         const isEditing = !!editingChipId;
+        let resolvedValue = trimmed;
+        let valueError;
+        let dateOrigin;
         if (isMultiSelectOperator(selectedOperator)) {
             const { resolved, error } = resolveMultiValues(selectedField, trimmed);
-            upsertCondition(selectedField, selectedOperator, resolved, editingChipId, isEditing ? void 0 : insertIndex, error ? SEGMENT_VARIANT.value : void 0);
+            resolvedValue = resolved;
+            valueError = error ? SEGMENT_VARIANT.value : void 0;
         } else if ('date' === selectedField.type) if (isBetweenOperator(selectedOperator)) {
             const rangeValue = resolveDateRangeValue(trimmed);
-            upsertCondition(selectedField, selectedOperator, rangeValue ?? trimmed, editingChipId, isEditing ? void 0 : insertIndex, rangeValue ? void 0 : SEGMENT_VARIANT.value, 'absolute');
+            resolvedValue = rangeValue ?? trimmed;
+            valueError = rangeValue ? void 0 : SEGMENT_VARIANT.value;
+            dateOrigin = 'absolute';
         } else {
-            const { error, dateOrigin } = resolveDateValue(trimmed, editingChipId, conditionsRef.current);
-            upsertCondition(selectedField, selectedOperator, trimmed, editingChipId, isEditing ? void 0 : insertIndex, error ? SEGMENT_VARIANT.value : void 0, dateOrigin);
+            const resolved = resolveDateValue(trimmed, editingChipId, conditionsRef.current);
+            resolvedValue = trimmed;
+            valueError = resolved.error ? SEGMENT_VARIANT.value : void 0;
+            dateOrigin = resolved.dateOrigin;
         }
         else {
             const { resolved, error } = resolveSingleValue(selectedField, trimmed);
-            upsertCondition(selectedField, selectedOperator, resolved, editingChipId, isEditing ? void 0 : insertIndex, error ? SEGMENT_VARIANT.value : void 0);
+            resolvedValue = resolved;
+            valueError = error ? SEGMENT_VARIANT.value : void 0;
         }
+        if (stashAndAdvance(resolvedValue)) return;
+        if (commitPairedSecond(resolvedValue, valueError, dateOrigin)) return;
+        upsertCondition(selectedField, selectedOperator, resolvedValue, editingChipId, isEditing ? void 0 : insertIndex, valueError, dateOrigin, editingSide);
         resetState(!isEditing);
     }, [
         selectedField,
         selectedOperator,
         editingChipId,
+        editingSide,
         insertIndex,
         conditionsRef,
         upsertCondition,
-        resetState
+        resetState,
+        stashAndAdvance,
+        commitPairedSecond
     ]);
     return {
         handleValueSelect,

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

@@ -14,6 +14,8 @@ interface UseResetStateDeps {
     setSelectedField: Dispatch<SetStateAction<FieldMetadata | null>>;
     setSelectedOperator: Dispatch<SetStateAction<FilterOperator | null>>;
     setBuildingMultiValue: Dispatch<SetStateAction<string | undefined>>;
+    setBuildingSide: (side: 0 | 1) => void;
+    setBuildingBase: (base: null) => void;
     setInsertIndex: Dispatch<SetStateAction<number | null>>;
     setInsertAfterConnector: Dispatch<SetStateAction<boolean>>;
     setMenuState: Dispatch<SetStateAction<MenuState>>;
@@ -29,5 +31,5 @@ interface UseResetStateDeps {
  * vs. genuine outside click). If unifying these, preserve the re-render
  * refocus case or commit chains break. AS-882.
  */
-export declare const useResetState: ({ editing, dateRange, containerRef, inputRef, resetMenuAnchor, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseResetStateDeps) => (continueBuilding?: boolean) => void;
+export declare const useResetState: ({ editing, dateRange, containerRef, inputRef, resetMenuAnchor, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setBuildingSide, setBuildingBase, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseResetStateDeps) => (continueBuilding?: boolean) => void;
 export {};

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

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { flushSync } from "react-dom";
 import { isMenuRelated } from "../../lib/index.js";
-const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuAnchor, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
+const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuAnchor, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setBuildingSide, setBuildingBase, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
     const resetState = useCallback((continueBuilding = false)=>{
         const doReset = ()=>{
             setInputText('');
@@ -10,6 +10,8 @@ const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuAn
             editing.clearEditing();
             dateRange.reset();
             setBuildingMultiValue(void 0);
+            setBuildingSide(0);
+            setBuildingBase(null);
             setInsertIndex(null);
             setInsertAfterConnector(false);
             resetMenuAnchor();
@@ -32,6 +34,8 @@ const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuAn
         setSelectedField,
         setSelectedOperator,
         setBuildingMultiValue,
+        setBuildingSide,
+        setBuildingBase,
         setInsertIndex,
         setInsertAfterConnector,
         setMenuState

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

@@ -82,7 +82,20 @@ const buildMultiValueChip = (baseChip, condition, field, fields, chipError)=>{
         }
     };
 };
-const makeConditionChip = (i, conditions, fields, error)=>{
+const buildPairChip = (condition, field, fields)=>{
+    if (!condition.pair || !field?.pairedField) return;
+    const pf = field.pairedField;
+    const { operator, value, error } = condition.pair;
+    return {
+        attribute: pf.label || pf.name,
+        operator: operator ? getOperatorLabel(operator, pf.type || DEFAULT_FIELD_TYPE) : void 0,
+        value: resolveValueLabel(value, pf, fields) ?? String(value ?? ''),
+        ...error && {
+            error
+        }
+    };
+};
+const makeConditionChipBase = (i, conditions, fields, error)=>{
     const condition = conditions[i];
     if (!condition) return makeEmptyChip(i, error);
     const chipError = condition.error || (error ? true : void 0);
@@ -101,6 +114,17 @@ const makeConditionChip = (i, conditions, fields, error)=>{
         error: chipError
     };
 };
+const makeConditionChip = (i, conditions, fields, error)=>{
+    const base = makeConditionChipBase(i, conditions, fields, error);
+    const condition = conditions[i];
+    if (!condition) return base;
+    const field = fields.find((f)=>f.name === condition.field);
+    const pair = buildPairChip(condition, field, fields);
+    return pair ? {
+        ...base,
+        pair
+    } : base;
+};
 const buildChips = (conditions, connectors, fields, error)=>{
     if (0 === conditions.length) return [];
     const hasMixed = connectors.includes('and') && connectors.includes('or');

package/dist/components/FilterInput/hooks/useFilterInputExpression/expression.d.ts

@@ -1,15 +1,21 @@
-import type { Condition, ExprNode } from '../../types';
+import type { Condition, ExprNode, FieldMetadata } from '../../types';
 /**
  * Build an ExprNode from flat conditions + per-gap connectors.
  * AND has higher precedence than OR: conditions connected by AND
  * are grouped together, then those groups are joined by OR.
+ *
+ * Pass `fields` to expand paired conditions into two AND-joined conditions
+ * (the serialization contract). Omit it to keep paired conditions intact.
  */
-export declare const buildExpression: (conditions: Condition[], connectors: Array<"and" | "or">) => ExprNode | null;
+export declare const buildExpression: (rawConditions: Condition[], rawConnectors: Array<"and" | "or">, fields?: FieldMetadata[]) => ExprNode | null;
 /**
  * Flatten a (possibly nested) ExprNode back to flat conditions + connectors.
  * Walks the tree depth-first; between siblings inserts the parent's operator.
+ *
+ * Pass `fields` to re-pair AND-adjacent conditions into paired conditions (the
+ * inverse of `buildExpression`'s expansion). Omit it to keep them separate.
  */
-export declare const expressionToConditions: (expr: ExprNode | null) => {
+export declare const expressionToConditions: (expr: ExprNode | null, fields?: FieldMetadata[]) => {
     conditions: Condition[];
     connectors: Array<"and" | "or">;
 };

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

@@ -1,4 +1,39 @@
-const buildExpression = (conditions, connectors)=>{
+const expandPairs = (conditions, connectors, fields)=>{
+    const outConditions = [];
+    const outConnectors = [];
+    conditions.forEach((condition, i)=>{
+        if (i > 0) outConnectors.push(connectors[i - 1] ?? 'and');
+        const field = fields.find((f)=>f.name === condition.field);
+        if (condition.pair && field?.pairedField) {
+            const { pair, ...base } = condition;
+            outConditions.push(base);
+            outConnectors.push('and');
+            outConditions.push({
+                type: 'condition',
+                field: field.pairedField.name,
+                ...pair.operator && {
+                    operator: pair.operator
+                },
+                value: pair.value,
+                ...pair.error && {
+                    error: pair.error
+                },
+                ...pair.dateOrigin && {
+                    dateOrigin: pair.dateOrigin
+                }
+            });
+        } else outConditions.push(condition);
+    });
+    return {
+        conditions: outConditions,
+        connectors: outConnectors
+    };
+};
+const buildExpression = (rawConditions, rawConnectors, fields)=>{
+    const { conditions, connectors } = fields ? expandPairs(rawConditions, rawConnectors, fields) : {
+        conditions: rawConditions,
+        connectors: rawConnectors
+    };
     if (0 === conditions.length) return null;
     if (1 === conditions.length) return conditions[0] ?? null;
     const first = conditions[0];
@@ -27,17 +62,48 @@ const buildExpression = (conditions, connectors)=>{
         children: andNodes
     };
 };
-const expressionToConditions = (expr)=>{
+const repairPairs = (conditions, connectors, fields)=>{
+    const outConditions = [];
+    const outConnectors = [];
+    let i = 0;
+    while(i < conditions.length){
+        const condition = conditions[i];
+        if (i > 0) outConnectors.push(connectors[i - 1] ?? 'and');
+        const field = fields.find((f)=>f.name === condition.field);
+        const next = conditions[i + 1];
+        const canMerge = field?.pairedField && !condition.pair && 'and' === connectors[i] && next && next.field === field.pairedField.name;
+        if (canMerge && next) {
+            outConditions.push({
+                ...condition,
+                pair: {
+                    ...next.operator && {
+                        operator: next.operator
+                    },
+                    value: next.value,
+                    ...next.error && {
+                        error: next.error
+                    },
+                    ...next.dateOrigin && {
+                        dateOrigin: next.dateOrigin
+                    }
+                }
+            });
+            i += 2;
+        } else {
+            outConditions.push(condition);
+            i += 1;
+        }
+    }
+    return {
+        conditions: outConditions,
+        connectors: outConnectors
+    };
+};
+const expressionToConditions = (expr, fields)=>{
     if (!expr) return {
         conditions: [],
         connectors: []
     };
-    if ('condition' === expr.type) return {
-        conditions: [
-            expr
-        ],
-        connectors: []
-    };
     const conditions = [];
     const connectors = [];
     const walk = (node)=>{
@@ -48,7 +114,7 @@ const expressionToConditions = (expr)=>{
         });
     };
     walk(expr);
-    return {
+    return fields ? repairPairs(conditions, connectors, fields) : {
         conditions,
         connectors
     };

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

@@ -10,7 +10,7 @@ export declare const useFilterInputExpression: ({ fields, value, onChange, error
     conditions: Condition[];
     connectors: ("and" | "or")[];
     chips: import("../..").FilterInputChipData[];
-    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: "relative" | "absolute") => void;
+    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: "relative" | "absolute", side?: 0 | 1) => void;
     removeCondition: (chipId: string) => void;
     removeConditionAtIndex: (idx: number) => void;
     clearAll: () => void;

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

@@ -96,7 +96,7 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
     const [state, setState] = useState(EMPTY_STATE);
     useEffect(()=>{
         if (void 0 !== value) {
-            const result = expressionToConditions(value);
+            const result = expressionToConditions(value, fields);
             setState({
                 conditions: revalidateConditions(result.conditions, fields),
                 connectors: result.connectors
@@ -113,7 +113,36 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
         error,
         externalErrors
     ]);
-    const upsertCondition = useCallback((field, operator, val, editingChipId, atIndex, error, dateOrigin)=>{
+    const upsertCondition = useCallback((field, operator, val, editingChipId, atIndex, error, dateOrigin, side)=>{
+        if (1 === side) return void setState((prev)=>{
+            const idx = null != editingChipId ? chipIdToConditionIndex(editingChipId) : prev.conditions.length - 1;
+            if (null == idx || idx < 0 || idx >= prev.conditions.length) return prev;
+            const base = prev.conditions[idx];
+            const updated = [
+                ...prev.conditions
+            ];
+            updated[idx] = {
+                ...base,
+                pair: {
+                    ...operator && {
+                        operator
+                    },
+                    value: val,
+                    ...error && {
+                        error
+                    },
+                    ...dateOrigin && {
+                        dateOrigin
+                    }
+                }
+            };
+            const next = {
+                conditions: updated,
+                connectors: prev.connectors
+            };
+            onChange?.(buildExpression(next.conditions, next.connectors, fields));
+            return next;
+        });
         const condition = buildCondition(field, operator, val, error, dateOrigin);
         setState((prev)=>{
             const newConditions = applyCondition(prev.conditions, condition, editingChipId, atIndex);
@@ -122,11 +151,12 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
                 conditions: newConditions,
                 connectors: newConnectors
             };
-            onChange?.(buildExpression(next.conditions, next.connectors));
+            onChange?.(buildExpression(next.conditions, next.connectors, fields));
             return next;
         });
     }, [
-        onChange
+        onChange,
+        fields
     ]);
     const removeCondition = useCallback((chipId)=>{
         const idx = chipIdToConditionIndex(chipId);
@@ -139,11 +169,12 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
                 conditions: newConditions,
                 connectors: newConnectors
             };
-            onChange?.(buildExpression(next.conditions, next.connectors));
+            onChange?.(buildExpression(next.conditions, next.connectors, fields));
             return next;
         });
     }, [
-        onChange
+        onChange,
+        fields
     ]);
     const removeConditionAtIndex = useCallback((idx)=>{
         setState((prev)=>{
@@ -155,11 +186,12 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
                 conditions: newConditions,
                 connectors: newConnectors
             };
-            onChange?.(buildExpression(next.conditions, next.connectors));
+            onChange?.(buildExpression(next.conditions, next.connectors, fields));
             return next;
         });
     }, [
-        onChange
+        onChange,
+        fields
     ]);
     const clearAll = useCallback(()=>{
         setState((prev)=>{
@@ -172,21 +204,23 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
                 conditions: disabledConditions,
                 connectors: []
             };
-            onChange?.(buildExpression(next.conditions, next.connectors));
+            onChange?.(buildExpression(next.conditions, next.connectors, fields));
             return next;
         });
     }, [
-        onChange
+        onChange,
+        fields
     ]);
     const replaceExpression = useCallback((expr)=>{
-        const result = expressionToConditions(expr);
+        const result = expressionToConditions(expr, fields);
         setState({
             conditions: result.conditions,
             connectors: result.connectors
         });
         onChange?.(expr);
     }, [
-        onChange
+        onChange,
+        fields
     ]);
     const setConnectorValue = useCallback((connectorId, value)=>{
         const match = connectorId.match(CONNECTOR_ID_PATTERN);
@@ -202,11 +236,12 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
                 conditions: prev.conditions,
                 connectors: updated
             };
-            onChange?.(buildExpression(next.conditions, next.connectors));
+            onChange?.(buildExpression(next.conditions, next.connectors, fields));
             return next;
         });
     }, [
-        onChange
+        onChange,
+        fields
     ]);
     return {
         conditions: state.conditions,

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

@@ -14,7 +14,10 @@ export type ChipErrorSegment = boolean | 'attribute' | 'value';
  * Re-declared in several option interfaces — exported here to keep the source of
  * truth single-rooted (changes to the signature reach all consumers).
  */
-export type UpsertCondition = (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: 'relative' | 'absolute') => void;
+export type UpsertCondition = (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: 'relative' | 'absolute', 
+/** When 1, write the paired (second) triplet onto the target condition instead
+ *  of replacing the base triplet. Defaults to 0 (base triplet). */
+side?: 0 | 1) => void;
 export interface FilterInputChipData {
     id: string;
     variant: FilterInputChipVariant;
@@ -30,6 +33,13 @@ export interface FilterInputChipData {
     errorValueIndices?: number[];
     /** When true, the chip cannot be edited or removed */
     disabled?: boolean;
+    /** Second paired triplet (display) for two-step fields. */
+    pair?: {
+        attribute: string;
+        operator?: string;
+        value?: string;
+        error?: ChipErrorSegment;
+    };
 }
 /**
  * Field Type for filter attributes
@@ -120,6 +130,13 @@ export interface FieldMetadata {
      * emitting the query. Display in the chip is unaffected.
      */
     serializeValue?: (value: string | number | boolean) => string | number | boolean;
+    /**
+     * When set, this field is a two-step paired field: the chip holds a second
+     * attribute/operator/value triplet. The paired segment is a full field
+     * definition (label, type, operators, values, validate, …). Nesting is one
+     * level only — a pairedField's own `pairedField` is ignored.
+     */
+    pairedField?: FieldMetadata;
 }
 /**
  * Expression Tree Types
@@ -139,6 +156,13 @@ export interface Condition {
     dateOrigin?: 'relative' | 'absolute';
     /** When true, the condition cannot be edited or removed */
     disabled?: boolean;
+    /** Second paired triplet. Present only for fields with `pairedField`. */
+    pair?: {
+        operator?: FilterOperator;
+        value: string | number | boolean | null | Array<string | number | boolean>;
+        error?: ChipErrorSegment;
+        dateOrigin?: 'relative' | 'absolute';
+    };
 }
 /**
  * Group Node - Represents a grouped expression with AND/OR logic

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.66.2",
-  "generatedAt": "2026-06-23T09:25:43.087Z",
+  "version": "0.66.3",
+  "generatedAt": "2026-06-24T13:26:24.868Z",
   "components": [
     {
       "name": "Accordion",
@@ -29593,6 +29593,12 @@
               "required": false,
               "description": "When true, the chip cannot be edited or removed (dimmed appearance)"
             },
+            {
+              "name": "pair",
+              "type": "complex",
+              "required": false,
+              "description": "Second paired triplet (two-step fields). The paired attribute is fixed."
+            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.66.3",
+  "version": "0.67.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",