@wallarm-org/design-system 0.66.3 → 0.67.0

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

@@ -5,6 +5,8 @@ export interface BuildingChipData {
     attribute: string;
     operator?: string;
     value?: string;
+    /** Paired second triplet shown while building a two-step field's second value. */
+    pair?: FilterInputChipData['pair'];
 }
 export interface FilterInputContextValue {
     chips: FilterInputChipData[];
@@ -26,6 +28,8 @@ export interface FilterInputContextValue {
     onAreaClick: () => void;
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
     onChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
+    /** Click on an editable paired (second-triplet) segment — edits the pair. */
+    onPairChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
     /** Click on a building-chip segment — reopens its menu and enters inline-edit. */
     onBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
     /** Move inline-edit to another segment of the edited chip (Backspace cascade). */
@@ -37,6 +41,8 @@ export interface FilterInputContextValue {
     onClear: () => void;
     editingChipId: string | null;
     editingSegment: ChipSegment | null;
+    /** Which triplet is being edited: 0 = base, 1 = paired second. */
+    editingSide: 0 | 1;
     segmentFilterText: string;
     onSegmentFilterChange: (text: string) => void;
     onCancelSegmentEdit: () => void;

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

@@ -11,6 +11,7 @@ interface AutocompleteForContext {
     handleInputClick: () => void;
     handleAreaClick: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
+    handlePairChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
     handleBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
     switchEditSegment: (targetSegment: ChipSegment) => boolean;
     removeEditingChip: () => void;
@@ -22,6 +23,7 @@ interface AutocompleteForContext {
     insertAfterConnector: boolean;
     editingChipId: string | null;
     editingSegment: ChipSegment | null;
+    editingSide: 0 | 1;
     segmentFilterText: string;
     handleSegmentFilterChange: (text: string) => void;
     cancelSegmentEdit: () => void;

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

@@ -17,6 +17,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onInputClick: autocomplete.handleInputClick,
             onAreaClick: autocomplete.handleAreaClick,
             onChipClick: autocomplete.handleChipClick,
+            onPairChipClick: autocomplete.handlePairChipClick,
             onBuildingChipClick: autocomplete.handleBuildingChipClick,
             onSwitchEditSegment: autocomplete.switchEditSegment,
             onRemoveEditingChip: autocomplete.removeEditingChip,
@@ -25,6 +26,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onClear: autocomplete.handleClear,
             editingChipId: autocomplete.editingChipId,
             editingSegment: autocomplete.editingSegment,
+            editingSide: autocomplete.editingSide,
             segmentFilterText: autocomplete.segmentFilterText,
             onSegmentFilterChange: autocomplete.handleSegmentFilterChange,
             onCancelSegmentEdit: autocomplete.cancelSegmentEdit,
@@ -50,6 +52,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleInputClick,
         autocomplete.handleAreaClick,
         autocomplete.handleChipClick,
+        autocomplete.handlePairChipClick,
         autocomplete.handleBuildingChipClick,
         autocomplete.switchEditSegment,
         autocomplete.removeEditingChip,
@@ -58,6 +61,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleClear,
         autocomplete.editingChipId,
         autocomplete.editingSegment,
+        autocomplete.editingSide,
         autocomplete.segmentFilterText,
         autocomplete.handleSegmentFilterChange,
         autocomplete.cancelSegmentEdit,

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

@@ -1,10 +1,19 @@
 import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
-import { getFieldValues, hasStaticAllowlist, isValidFieldValue } from "../lib/index.js";
+import { getFieldValues, hasStaticAllowlist, isNoValueOperator, isValidFieldValue } from "../lib/index.js";
+const isPairValueMissing = (condition)=>{
+    const pair = condition.pair;
+    if (!pair) return true;
+    if (pair.operator && isNoValueOperator(pair.operator)) return false;
+    const value = pair.value;
+    return null == value || '' === value || Array.isArray(value) && 0 === value.length;
+};
 const parseFilterInputErrors = (conditions, fields)=>{
     const errors = [];
     for (const condition of conditions){
-        if (!condition.error) continue;
         const field = fields.find((f)=>f.name === condition.field);
+        const baseIsNoValue = null != condition.operator && isNoValueOperator(condition.operator);
+        if (field?.pairedField && !baseIsNoValue && isPairValueMissing(condition)) errors.push(`${field.pairedField.label} is required`);
+        if (!condition.error) continue;
         const label = field?.label || condition.field;
         switch(condition.error){
             case SEGMENT_VARIANT.attribute:

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

@@ -6,7 +6,7 @@ import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
 import { FilterInputConnectorChip } from "./FilterInputConnectorChip/index.js";
 import { InsertionGap } from "./InsertionGap/index.js";
 const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, onConnectorChange, onChipRemove, onGapClick })=>{
-    const { registerChipRef } = useFilterInputContext();
+    const { registerChipRef, onPairChipClick } = useFilterInputContext();
     const chipRef = useCallback((id)=>(el)=>registerChipRef(id, el), [
         registerChipRef
     ]);
@@ -29,8 +29,10 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
                 valueSeparator: chip.valueSeparator,
                 errorValueIndices: chip.errorValueIndices,
                 disabled: chip.disabled,
+                pair: chip.pair,
                 onRemove: chip.disabled ? void 0 : ()=>onChipRemove(chip.id),
-                onSegmentClick: chip.disabled ? void 0 : (segment, anchorEl)=>onChipClick(chip.id, segment, anchorEl)
+                onSegmentClick: chip.disabled ? void 0 : (segment, anchorEl)=>onChipClick(chip.id, segment, anchorEl),
+                onPairSegmentClick: chip.disabled ? void 0 : (segment, anchorEl)=>onPairChipClick(chip.id, segment, anchorEl)
             })
         }, chip.id));
         else if (isConnector) {

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

@@ -1,7 +1,9 @@
 import type { FC, HTMLAttributes, Ref } from 'react';
-import type { ChipErrorSegment } from '../../types';
+import type { ChipErrorSegment, FilterInputChipData } from '../../types';
 import { type SegmentVariant } from './segmentVariant';
 export type ChipSegment = SegmentVariant;
+/** Editable segments of the paired (second) triplet. The paired attribute is fixed. */
+export type PairSegment = Extract<SegmentVariant, 'operator' | 'value'>;
 export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     ref?: Ref<HTMLDivElement>;
     chipId?: string;
@@ -15,7 +17,11 @@ export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement
     building?: boolean;
     /** When true, the chip cannot be edited or removed (dimmed appearance) */
     disabled?: boolean;
+    /** Second paired triplet (two-step fields). The paired attribute is fixed. */
+    pair?: FilterInputChipData['pair'];
     onRemove?: () => void;
     onSegmentClick?: (segment: ChipSegment, anchorEl: HTMLElement) => void;
+    /** Click on an editable paired segment (operator/value of the second triplet). */
+    onPairSegmentClick?: (segment: PairSegment, anchorEl: HTMLElement) => void;
 }
 export declare const FilterInputChip: FC<FilterInputChipProps>;

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

@@ -1,13 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
 import { ChipSearchInput } from "./ChipSearchInput.js";
 import { chipVariants } from "./classes.js";
 import { useEditingContext } from "./context/EditingContext.js";
 import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
+import { PairSeparator } from "./PairSeparator.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 FilterInputChip = ({ ref, chipId, attribute, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, disabled = false, pair, onRemove, onSegmentClick, onPairSegmentClick, className, ...props })=>{
     const interactive = !disabled;
     const hasError = !!error;
     const internalRef = useRef(null);
@@ -25,16 +26,28 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
         onSegmentClick,
         activeSegment
     ]);
+    const handlePairSegmentClick = useCallback((segment, e)=>{
+        if (!onPairSegmentClick) return;
+        e.stopPropagation();
+        const anchorEl = internalRef.current;
+        if (!anchorEl) return;
+        onPairSegmentClick(segment, anchorEl);
+    }, [
+        onPairSegmentClick
+    ]);
     const handleSegmentMouseDown = useCallback((e)=>{
         e.preventDefault();
     }, []);
-    const segmentEditProps = (segment)=>isEditingThisChip && editing.editingSegment === segment ? {
+    const editingSide = editing?.editingSide ?? 0;
+    const segmentEditProps = (segment, side = 0)=>isEditingThisChip && editing.editingSegment === segment && editingSide === side ? {
             editing: true,
             editText: editing.segmentFilterText,
             onEditChange: editing.onSegmentFilterChange,
             onEditKeyDown: editing.onSegmentEditKeyDown,
             onEditBlur: editing.onSegmentEditBlur
         } : {};
+    const baseActiveSegment = 0 === editingSide ? activeSegment : null;
+    const pairActiveSegment = 1 === editingSide ? activeSegment : null;
     const setRefs = useCallback((node)=>{
         internalRef.current = node;
         if ('function' == typeof ref) ref(node);
@@ -65,7 +78,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                 ...segmentEditProps(SEGMENT_VARIANT.attribute),
                 children: attribute
             }),
-            (operator || activeSegment === SEGMENT_VARIANT.operator) && /*#__PURE__*/ jsx(Segment, {
+            (operator || baseActiveSegment === SEGMENT_VARIANT.operator) && /*#__PURE__*/ jsx(Segment, {
                 variant: SEGMENT_VARIANT.operator,
                 className: "shrink-0",
                 onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.operator, e) : void 0,
@@ -73,10 +86,10 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                 ...segmentEditProps(SEGMENT_VARIANT.operator),
                 children: operator ?? ''
             }),
-            (value || activeSegment === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
+            (value || baseActiveSegment === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
                 variant: SEGMENT_VARIANT.value,
                 className: "min-w-0",
-                error: activeSegment !== SEGMENT_VARIANT.value && (true === error || error === SEGMENT_VARIANT.value),
+                error: baseActiveSegment !== SEGMENT_VARIANT.value && (true === error || error === SEGMENT_VARIANT.value),
                 valueParts: valueParts,
                 valueSeparator: valueSeparator,
                 errorValueIndices: errorValueIndices,
@@ -85,6 +98,31 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                 ...segmentEditProps(SEGMENT_VARIANT.value),
                 children: value ?? ''
             }),
+            pair && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(PairSeparator, {}),
+                    /*#__PURE__*/ jsx(Segment, {
+                        variant: SEGMENT_VARIANT.attribute,
+                        className: "shrink-0",
+                        children: pair.attribute
+                    }),
+                    (pair.operator || pairActiveSegment === SEGMENT_VARIANT.operator) && /*#__PURE__*/ jsx(Segment, {
+                        variant: SEGMENT_VARIANT.operator,
+                        className: "shrink-0",
+                        onClick: interactive ? (e)=>handlePairSegmentClick('operator', e) : void 0,
+                        ...segmentEditProps(SEGMENT_VARIANT.operator, 1),
+                        children: pair.operator ?? ''
+                    }),
+                    (null != pair.value || pairActiveSegment === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
+                        variant: SEGMENT_VARIANT.value,
+                        className: "min-w-0",
+                        error: pairActiveSegment !== SEGMENT_VARIANT.value && (true === pair.error || pair.error === SEGMENT_VARIANT.value),
+                        onClick: interactive ? (e)=>handlePairSegmentClick('value', e) : void 0,
+                        ...segmentEditProps(SEGMENT_VARIANT.value, 1),
+                        children: pair.value ?? ''
+                    })
+                ]
+            }),
             building && !isEditingThisChip && /*#__PURE__*/ jsx(ChipSearchInput, {}),
             onRemove && !disabled && /*#__PURE__*/ jsx(FilterInputRemoveButton, {
                 error: hasError,

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+/** Decorative ";" between the two triplets of a paired chip. Non-interactive. */
+export declare const PairSeparator: FC;

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { segmentContainer, segmentTextVariants } from "./classes.js";
+import { PAIR_SEPARATOR_SLOT } from "./segmentVariant.js";
+const PairSeparator = ()=>/*#__PURE__*/ jsx("div", {
+        className: `${segmentContainer} shrink-0`,
+        "data-slot": PAIR_SEPARATOR_SLOT,
+        "aria-hidden": true,
+        children: /*#__PURE__*/ jsx("p", {
+            className: segmentTextVariants({
+                variant: 'operator'
+            }),
+            children: ";"
+        })
+    });
+PairSeparator.displayName = 'PairSeparator';
+export { PairSeparator };

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

@@ -3,6 +3,8 @@ import type { ChipSegment } from '../FilterInputChip';
 export interface EditingContextValue {
     editingChipId: string | null;
     editingSegment: ChipSegment | null;
+    /** Which triplet is being edited: 0 = base, 1 = paired second. */
+    editingSide: 0 | 1;
     segmentFilterText: string;
     onSegmentFilterChange: (text: string) => void;
     onSegmentEditKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;

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

@@ -1,6 +1,7 @@
 export { type ConnectorVariant, FilterInputConnectorChip, type FilterInputConnectorChipProps, } from '../FilterInputConnectorChip';
 export { type EditingContextValue, EditingProvider, useEditingContext, } from './context/EditingContext';
-export { type ChipSegment, FilterInputChip, type FilterInputChipProps } from './FilterInputChip';
+export { type ChipSegment, FilterInputChip, type FilterInputChipProps, type PairSegment, } from './FilterInputChip';
 export { FilterInputRemoveButton } from './FilterInputRemoveButton';
+export { PairSeparator } from './PairSeparator';
 export { Segment, type SegmentProps } from './Segment';
-export { SEGMENT_VARIANT, type SegmentVariant } from './segmentVariant';
+export { PAIR_SEPARATOR_SLOT, SEGMENT_VARIANT, type SegmentVariant } from './segmentVariant';

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

@@ -2,6 +2,7 @@ import { FilterInputConnectorChip } from "../FilterInputConnectorChip/index.js";
 import { EditingProvider, useEditingContext } from "./context/EditingContext.js";
 import { FilterInputChip } from "./FilterInputChip.js";
 import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
+import { PairSeparator } from "./PairSeparator.js";
 import { Segment } from "./Segment.js";
-import { SEGMENT_VARIANT } from "./segmentVariant.js";
-export { EditingProvider, FilterInputChip, FilterInputConnectorChip, FilterInputRemoveButton, SEGMENT_VARIANT, Segment, useEditingContext };
+import { PAIR_SEPARATOR_SLOT, SEGMENT_VARIANT } from "./segmentVariant.js";
+export { EditingProvider, FilterInputChip, FilterInputConnectorChip, FilterInputRemoveButton, PAIR_SEPARATOR_SLOT, PairSeparator, SEGMENT_VARIANT, Segment, useEditingContext };

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

@@ -4,3 +4,5 @@ export declare const SEGMENT_VARIANT: {
     readonly value: "value";
 };
 export type SegmentVariant = (typeof SEGMENT_VARIANT)[keyof typeof SEGMENT_VARIANT];
+/** data-slot for the decorative ";" between paired triplets (non-interactive). */
+export declare const PAIR_SEPARATOR_SLOT = "segment-separator";

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

@@ -3,4 +3,5 @@ const SEGMENT_VARIANT = {
     operator: 'operator',
     value: 'value'
 };
-export { SEGMENT_VARIANT };
+const PAIR_SEPARATOR_SLOT = 'segment-separator';
+export { PAIR_SEPARATOR_SLOT, SEGMENT_VARIANT };

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

@@ -13,7 +13,7 @@ import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
 import { useExpandCollapse } from "./hooks/useExpandCollapse.js";
 import { useSegmentEditKeyboard } from "./hooks/useSegmentEditKeyboard.js";
 const FilterInputField = ({ className, ...props })=>{
-    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onAreaClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, menuRef } = useFilterInputContext();
+    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onAreaClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, editingSide, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, menuRef } = useFilterInputContext();
     const hasContent = chips.length > 0 || null != buildingChipData;
     const { isExpanded, isOverflowing, innerRef, toggleExpand, multiRow } = useExpandCollapse();
     const { chipsBefore, chipsAfter, hideTrailingGap, hideLeadingGap } = useChipsSplitting(chips, insertIndex, insertAfterConnector);
@@ -40,6 +40,7 @@ const FilterInputField = ({ className, ...props })=>{
     return /*#__PURE__*/ jsx(EditingProvider, {
         editingChipId: editingChipId,
         editingSegment: editingSegment,
+        editingSide: editingSide,
         segmentFilterText: segmentFilterText,
         onSegmentFilterChange: onSegmentFilterChange,
         onSegmentEditKeyDown: handleSegmentEditKeyDown,
@@ -98,6 +99,7 @@ const FilterInputField = ({ className, ...props })=>{
                                         attribute: buildingChipData.attribute,
                                         operator: buildingChipData.operator,
                                         value: buildingChipData.value,
+                                        pair: buildingChipData.pair,
                                         onSegmentClick: onBuildingChipClick,
                                         className: "mx-4"
                                     }) : /*#__PURE__*/ jsx(FilterInputSearch, {

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

@@ -1,5 +1,6 @@
 import type { BuildingChipData } from '../../../FilterInputContext/types';
 import type { Condition, FieldMetadata, FilterOperator } from '../../../types';
+import type { BuildingBase } from '../useAutocompleteState';
 interface DeriveOptions {
     editingChipId: string | null;
     selectedField: FieldMetadata | null;
@@ -9,6 +10,12 @@ interface DeriveOptions {
     dateRangeFromValue: string | null | undefined;
     /** Segment text when inline-editing a value. */
     segmentFilterText?: string;
+    /** Which triplet is being built: 0 = base, 1 = paired second. */
+    buildingSide?: 0 | 1;
+    /** Stashed base triplet while building the paired second value. */
+    buildingBase?: BuildingBase | null;
+    /** Which triplet is being edited: 0 = base, 1 = paired second. */
+    editingSide?: 0 | 1;
 }
 export interface DerivedAutocompleteValues {
     isBuilding: boolean;
@@ -18,5 +25,5 @@ export interface DerivedAutocompleteValues {
     /** [from, to] ISO strings when editing a "between" date condition */
     editingDateRange: [string, string] | undefined;
 }
-export declare const deriveAutocompleteValues: ({ editingChipId, selectedField, selectedOperator, conditions, buildingMultiValue, dateRangeFromValue, segmentFilterText, }: DeriveOptions) => DerivedAutocompleteValues;
+export declare const deriveAutocompleteValues: ({ editingChipId, selectedField, selectedOperator, conditions, buildingMultiValue, dateRangeFromValue, segmentFilterText, buildingSide, buildingBase, editingSide, }: DeriveOptions) => DerivedAutocompleteValues;
 export {};

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

@@ -1,12 +1,22 @@
 import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../../lib/index.js";
+const displayBaseValue = (value, field)=>{
+    const options = getFieldValues(field);
+    const resolve = (v)=>options.find((opt)=>String(opt.value) === String(v))?.label ?? String(v ?? '');
+    return Array.isArray(value) ? value.map(resolve).join(', ') : resolve(value);
+};
 const getEditingCondition = (editingChipId, conditions)=>{
     if (!editingChipId) return null;
     const idx = chipIdToConditionIndex(editingChipId);
     return null !== idx ? conditions[idx] ?? null : null;
 };
-const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperator, conditions, buildingMultiValue, dateRangeFromValue, segmentFilterText })=>{
+const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperator, conditions, buildingMultiValue, dateRangeFromValue, segmentFilterText, buildingSide, buildingBase, editingSide })=>{
     const isBuilding = null !== selectedField && !editingChipId;
-    const editingCondition = getEditingCondition(editingChipId, conditions);
+    const rawEditingCondition = getEditingCondition(editingChipId, conditions);
+    const editingCondition = rawEditingCondition && 1 === editingSide && rawEditingCondition.pair ? {
+        ...rawEditingCondition,
+        value: rawEditingCondition.pair.value,
+        dateOrigin: rawEditingCondition.pair.dateOrigin
+    } : rawEditingCondition;
     const editingMultiValues = (()=>{
         if (!editingCondition || !selectedOperator || !isMultiSelectOperator(selectedOperator)) return [];
         const values = Array.isArray(editingCondition.value) ? editingCondition.value : null != editingCondition.value ? [
@@ -34,7 +44,16 @@ const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperat
         if (dateRangeFromValue && 'between' === selectedOperator) return `${getDateDisplayLabel(dateRangeFromValue)} – ...`;
         if (selectedOperator && isNoValueOperator(selectedOperator)) return NO_VALUE_PLACEHOLDER;
     })();
-    const buildingChipData = isBuilding ? {
+    const buildingChipData = isBuilding ? 1 === buildingSide && buildingBase ? {
+        attribute: buildingBase.field.label,
+        operator: buildingBase.operator ? getOperatorLabel(buildingBase.operator, buildingBase.field.type) : void 0,
+        value: displayBaseValue(buildingBase.value, buildingBase.field),
+        pair: {
+            attribute: selectedField.label,
+            operator: selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : void 0,
+            value: buildingValue
+        }
+    } : {
         attribute: selectedField.label,
         operator: selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : void 0,
         value: buildingValue

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

@@ -2,6 +2,12 @@ import type { Condition, FieldMetadata, FilterOperator, MenuState } from '../../
 interface UseAutocompleteStateOptions {
     conditions: Condition[];
 }
+/** Base triplet stashed while building a paired chip's second value. */
+export interface BuildingBase {
+    field: FieldMetadata;
+    operator: FilterOperator | undefined;
+    value: string | number | boolean | null | Array<string | number | boolean>;
+}
 /**
  * Owns the useState/useRef surface of the autocomplete hook. Refs mirror
  * state so sub-hooks read synchronously without recreating callbacks.
@@ -19,6 +25,10 @@ export declare const useAutocompleteState: ({ conditions }: UseAutocompleteState
     setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     buildingMultiValue: string | undefined;
     setBuildingMultiValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    buildingSide: 0 | 1;
+    setBuildingSide: import("react").Dispatch<import("react").SetStateAction<0 | 1>>;
+    buildingBase: BuildingBase | null;
+    setBuildingBase: import("react").Dispatch<import("react").SetStateAction<BuildingBase | null>>;
     insertIndex: number | null;
     setInsertIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>;
     insertAfterConnector: boolean;

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

@@ -6,6 +6,8 @@ const useAutocompleteState = ({ conditions })=>{
     const [selectedOperator, setSelectedOperator] = useState(null);
     const [isFocused, setIsFocused] = useState(false);
     const [buildingMultiValue, setBuildingMultiValue] = useState(void 0);
+    const [buildingSide, setBuildingSide] = useState(0);
+    const [buildingBase, setBuildingBase] = useState(null);
     const [insertIndex, setInsertIndex] = useState(null);
     const [insertAfterConnector, setInsertAfterConnector] = useState(false);
     const effectiveInsertIndex = insertIndex ?? conditions.length;
@@ -36,6 +38,10 @@ const useAutocompleteState = ({ conditions })=>{
         setIsFocused,
         buildingMultiValue,
         setBuildingMultiValue,
+        buildingSide,
+        setBuildingSide,
+        buildingBase,
+        setBuildingBase,
         insertIndex,
         setInsertIndex,
         insertAfterConnector,

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

@@ -17,6 +17,7 @@ interface UseChipEditingOptions {
 export declare const useChipEditing: ({ conditions, chips, fields, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition, }: UseChipEditingOptions) => {
     editingChipId: string | null;
     editingSegment: import("../../FilterInputField/FilterInputChip").SegmentVariant | null;
+    editingSide: 0 | 1;
     isBuildingEdit: boolean;
     setEditingSegment: import("react").Dispatch<import("react").SetStateAction<import("../../FilterInputField/FilterInputChip").SegmentVariant | null>>;
     segmentFilterText: string;
@@ -24,6 +25,7 @@ export declare const useChipEditing: ({ conditions, chips, fields, setMenuAnchor
     setSegmentFilterText: (text: string) => void;
     resetSegmentTyping: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
+    handlePairChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
     startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
     switchEditSegment: (segment: ChipSegment, currentText: string) => void;
     clearEditing: () => void;

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

@@ -15,6 +15,7 @@ const getFirstIncompleteSegment = (condition, fields)=>{
 const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition })=>{
     const [editingChipId, setEditingChipId] = useState(null);
     const [editingSegment, setEditingSegment] = useState(null);
+    const [editingSide, setEditingSide] = useState(0);
     const [segmentFilterText, setSegmentFilterText] = useState('');
     const [userHasTyped, setUserHasTyped] = useState(false);
     const conditionsRef = useRef(conditions);
@@ -49,6 +50,7 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
         };
         setSegmentFilterText(segmentText[targetSegment]);
         setUserHasTyped(false);
+        setEditingSide(0);
         setMenuState(SEGMENT_TO_MENU[targetSegment]);
     }, [
         setMenuAnchor,
@@ -57,20 +59,45 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
         setMenuState,
         upsertCondition
     ]);
+    const handlePairChipClick = useCallback((chipId, segment, anchorEl)=>{
+        const condition = getConditionByChipId(chipId, conditionsRef.current);
+        const field = condition && fieldsRef.current.find((f)=>f.name === condition.field);
+        const pairedField = field ? field.pairedField : void 0;
+        const chip = chipsRef.current.find((c)=>c.id === chipId);
+        if (!condition?.pair || !pairedField || !chip?.pair) return;
+        setMenuAnchor(anchorEl);
+        setEditingChipId(chipId);
+        setEditingSide(1);
+        setSelectedField(pairedField);
+        const rawOperator = getOperatorFromLabel(chip.pair.operator || '', pairedField.type) ?? condition.pair.operator ?? null;
+        setSelectedOperator(segment === SEGMENT_VARIANT.value ? rawOperator : null);
+        setEditingSegment(segment);
+        setSegmentFilterText(segment === SEGMENT_VARIANT.operator ? chip.pair.operator ?? '' : chip.pair.value ?? '');
+        setUserHasTyped(false);
+        setMenuState(SEGMENT_TO_MENU[segment]);
+    }, [
+        setMenuAnchor,
+        setSelectedField,
+        setSelectedOperator,
+        setMenuState
+    ]);
     const clearEditing = useCallback(()=>{
         setEditingChipId(null);
         setEditingSegment(null);
+        setEditingSide(0);
         setSegmentFilterText('');
         setUserHasTyped(false);
     }, []);
     const startBuildingEdit = useCallback((segment, currentText)=>{
         setEditingChipId(null);
         setEditingSegment(segment);
+        setEditingSide(0);
         setSegmentFilterText(currentText);
         setUserHasTyped(false);
     }, []);
     const switchEditSegment = useCallback((segment, currentText)=>{
         setEditingSegment(segment);
+        setEditingSide(0);
         setSegmentFilterText(currentText);
         setUserHasTyped(false);
     }, []);
@@ -87,6 +114,7 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
     return useMemo(()=>({
             editingChipId,
             editingSegment,
+            editingSide,
             isBuildingEdit,
             setEditingSegment,
             segmentFilterText: segmentDisplayText,
@@ -94,18 +122,21 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
             setSegmentFilterText: handleSegmentFilterChange,
             resetSegmentTyping,
             handleChipClick,
+            handlePairChipClick,
             startBuildingEdit,
             switchEditSegment,
             clearEditing
         }), [
         editingChipId,
         editingSegment,
+        editingSide,
         isBuildingEdit,
         segmentDisplayText,
         segmentMenuFilterText,
         handleSegmentFilterChange,
         resetSegmentTyping,
         handleChipClick,
+        handlePairChipClick,
         startBuildingEdit,
         switchEditSegment,
         clearEditing

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

@@ -50,6 +50,7 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     /** Hard reset for paste/clipboard flows — scraps in-progress building. */
     resetAutocompleteState: (continueBuilding?: boolean) => void;
     handleChipClick: (chipId: string, segment: import("../../FilterInputField").ChipSegment, anchorEl: HTMLElement) => void;
+    handlePairChipClick: (chipId: string, segment: import("../../FilterInputField").ChipSegment, anchorEl: HTMLElement) => void;
     handleBuildingChipClick: (segment: import("../../FilterInputField").ChipSegment, anchorEl: HTMLElement) => void;
     switchEditSegment: (targetSegment: import("../../FilterInputField").ChipSegment) => boolean;
     removeEditingChip: () => void;
@@ -67,6 +68,7 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     insertAfterConnector: boolean;
     editingChipId: string | null;
     editingSegment: import("../../FilterInputField/FilterInputChip").SegmentVariant | null;
+    editingSide: 0 | 1;
     segmentFilterText: string;
     segmentMenuFilterText: string;
     handleSegmentFilterChange: (text: string) => void;

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

@@ -16,7 +16,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
     const state = useAutocompleteState({
         conditions
     });
-    const { inputText, setInputText, menuState, setMenuState, selectedField, setSelectedField, selectedOperator, setSelectedOperator, isFocused, setIsFocused, buildingMultiValue, setBuildingMultiValue, insertIndex, setInsertIndex, insertAfterConnector, setInsertAfterConnector, effectiveInsertIndex, effectiveInsertIndexRef, conditionsRef, conditionsLengthRef, blurCommitRef, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, commitBuildingOnBlurRef, commitBuildingForceRef } = state;
+    const { inputText, setInputText, menuState, setMenuState, selectedField, setSelectedField, selectedOperator, setSelectedOperator, isFocused, setIsFocused, buildingMultiValue, setBuildingMultiValue, buildingSide, setBuildingSide, buildingBase, setBuildingBase, insertIndex, setInsertIndex, insertAfterConnector, setInsertAfterConnector, effectiveInsertIndex, effectiveInsertIndexRef, conditionsRef, conditionsLengthRef, blurCommitRef, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, commitBuildingOnBlurRef, commitBuildingForceRef } = state;
     const { menuPositioning, setMenuAnchor, resetMenuAnchor } = useMenuPositioning({
         containerRef,
         buildingChipRef,
@@ -47,6 +47,8 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setSelectedField,
         setSelectedOperator,
         setBuildingMultiValue,
+        setBuildingSide,
+        setBuildingBase,
         setInsertIndex,
         setInsertAfterConnector,
         setMenuState
@@ -67,7 +69,11 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setSelectedOperator,
         setInputText,
         setMenuState,
-        setBuildingMultiValue
+        setBuildingMultiValue,
+        buildingSide,
+        setBuildingSide,
+        buildingBase,
+        setBuildingBase
     });
     const { switchEditSegment, removeEditingChip, stepBackBuildingMenu } = useChipCascade({
         editing,
@@ -171,7 +177,10 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         conditions,
         buildingMultiValue,
         dateRangeFromValue: dateRange.fromValue,
-        segmentFilterText: editing.editingSegment === SEGMENT_VARIANT.value ? editing.segmentMenuFilterText : void 0
+        segmentFilterText: editing.editingSegment === SEGMENT_VARIANT.value ? editing.segmentMenuFilterText : void 0,
+        buildingSide,
+        buildingBase,
+        editingSide: editing.editingSide
     });
     return {
         inputText,
@@ -196,6 +205,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         handleMenuDiscard,
         resetAutocompleteState: resetState,
         handleChipClick: editing.handleChipClick,
+        handlePairChipClick: editing.handlePairChipClick,
         handleBuildingChipClick,
         switchEditSegment,
         removeEditingChip,
@@ -213,6 +223,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         insertAfterConnector,
         editingChipId: editing.editingChipId,
         editingSegment: editing.editingSegment,
+        editingSide: editing.editingSide,
         segmentFilterText: editing.segmentFilterText,
         segmentMenuFilterText: editing.segmentMenuFilterText,
         handleSegmentFilterChange,