@wallarm-org/design-system 0.70.0 → 0.71.0

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

@@ -1,11 +1,10 @@
 import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
-import { getFieldValues, hasStaticAllowlist, isNoValueOperator, isValidFieldValue } from "../lib/index.js";
+import { getFieldValues, hasStaticAllowlist, incompleteTripletError, isEmptyFilterValue, 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;
+    return isEmptyFilterValue(pair.value);
 };
 const parseFilterInputErrors = (conditions, fields)=>{
     const errors = [];
@@ -13,9 +12,12 @@ const parseFilterInputErrors = (conditions, fields)=>{
         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){
+        if (field && !field.pairedField && !condition.error && incompleteTripletError(condition.operator, condition.value)) {
+            errors.push(`${label} is incomplete`);
+            continue;
+        }
+        if (condition.error) switch(condition.error){
             case SEGMENT_VARIANT.attribute:
                 errors.push(`Unknown field ${condition.field}`);
                 break;

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

@@ -20,6 +20,7 @@ const ChipSearchInput = ()=>{
                 ref: inputRef,
                 type: "text",
                 role: "combobox",
+                size: 1,
                 "aria-expanded": menuOpen,
                 "aria-invalid": error,
                 "aria-label": "Filter value",
@@ -31,7 +32,7 @@ const ChipSearchInput = ()=>{
                 style: {
                     width: `${inputWidth}px`
                 },
-                className: "h-22 border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0"
+                className: "h-22 min-w-0 border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0"
             }),
             /*#__PURE__*/ jsx("span", {
                 ref: sizerRef,

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

@@ -2,7 +2,7 @@ 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 { chipVariants, emptyValueHitTarget } from "./classes.js";
 import { useEditingContext } from "./context/EditingContext.js";
 import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
 import { PairSeparator } from "./PairSeparator.js";
@@ -10,11 +10,13 @@ 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, pair, onRemove, onSegmentClick, onPairSegmentClick, className, ...props })=>{
     const interactive = !disabled;
-    const hasError = !!error;
     const internalRef = useRef(null);
     const editing = useEditingContext();
     const isEditingThisChip = null != editing && null != editing.editingSegment && (building ? null == editing.editingChipId : null != chipId && editing.editingChipId === chipId);
     const activeSegment = isEditingThisChip ? editing.editingSegment : null;
+    const effectiveError = isEditingThisChip ? false : error;
+    const effectivePairError = isEditingThisChip ? void 0 : pair?.error;
+    const hasError = !!effectiveError || !!effectivePairError;
     const handleSegmentClick = useCallback((segment, e)=>{
         if (!onSegmentClick) return;
         if (activeSegment === segment) return;
@@ -62,7 +64,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
             interactive,
             disabled,
             building
-        }), 'max-w-[320px]', className),
+        }), pair ? 'max-w-[380px]' : 'max-w-[320px]', className),
         "data-slot": "filter-input-condition-chip",
         ...building && {
             'data-building': ''
@@ -72,7 +74,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
             /*#__PURE__*/ jsx(Segment, {
                 variant: SEGMENT_VARIANT.attribute,
                 className: "shrink-0",
-                error: true === error || error === SEGMENT_VARIANT.attribute,
+                error: true === effectiveError || effectiveError === SEGMENT_VARIANT.attribute,
                 onClick: interactive ? (e)=>handleSegmentClick(SEGMENT_VARIANT.attribute, e) : void 0,
                 onMouseDown: interactive && building ? handleSegmentMouseDown : void 0,
                 ...segmentEditProps(SEGMENT_VARIANT.attribute),
@@ -86,10 +88,10 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                 ...segmentEditProps(SEGMENT_VARIANT.operator),
                 children: operator ?? ''
             }),
-            (value || baseActiveSegment === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
+            (value || baseActiveSegment === SEGMENT_VARIANT.value || !pair && effectiveError === SEGMENT_VARIANT.value) && /*#__PURE__*/ jsx(Segment, {
                 variant: SEGMENT_VARIANT.value,
-                className: "min-w-0",
-                error: baseActiveSegment !== SEGMENT_VARIANT.value && (true === error || error === SEGMENT_VARIANT.value),
+                className: value || pair ? pair ? 'max-w-[90px] shrink-0' : 'min-w-0' : emptyValueHitTarget,
+                error: baseActiveSegment !== SEGMENT_VARIANT.value && (true === effectiveError || effectiveError === SEGMENT_VARIANT.value),
                 valueParts: valueParts,
                 valueSeparator: valueSeparator,
                 errorValueIndices: errorValueIndices,
@@ -104,6 +106,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                     /*#__PURE__*/ jsx(Segment, {
                         variant: SEGMENT_VARIANT.attribute,
                         className: "shrink-0",
+                        onClick: interactive && pair.error ? (e)=>handlePairSegmentClick(pair.operator ? SEGMENT_VARIANT.value : SEGMENT_VARIANT.operator, e) : void 0,
                         children: pair.attribute
                     }),
                     (pair.operator || pairActiveSegment === SEGMENT_VARIANT.operator) && /*#__PURE__*/ jsx(Segment, {
@@ -115,8 +118,8 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
                     }),
                     (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),
+                        className: pair.value ? 'min-w-0' : emptyValueHitTarget,
+                        error: pairActiveSegment !== SEGMENT_VARIANT.value && (true === effectivePairError || effectivePairError === SEGMENT_VARIANT.value),
                         onClick: interactive ? (e)=>handlePairSegmentClick('value', e) : void 0,
                         ...segmentEditProps(SEGMENT_VARIANT.value, 1),
                         children: pair.value ?? ''

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

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
 import { FilterInputContext } from "../../FilterInputContext/FilterInputContext.js";
-import { segmentContainer, segmentTextVariants } from "./classes.js";
+import { editingValueMinWidth, segmentContainer, segmentTextVariants } from "./classes.js";
 import { CHAR_WIDTH_PX } from "./constants.js";
 import { MultiValueSegment } from "./MultiValueSegment.js";
 import { useSizerWidth } from "./model/useSizerWidth.js";
@@ -78,7 +78,7 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
                     className: cn(segmentTextVariants({
                         variant,
                         error
-                    }), 'bg-transparent outline-none p-0 m-0'),
+                    }), 'bg-transparent outline-none p-0 m-0', variant === SEGMENT_VARIANT.value && editingValueMinWidth),
                     style: {
                         width: `${inputWidth}px`
                     }

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

@@ -7,12 +7,19 @@ export declare const chipVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Segment container */
 export declare const segmentContainer = "flex flex-col justify-center overflow-hidden leading-none";
+/** Hit target for an empty required value: a small full-height box so the value
+ *  is clickable and the trailing × can't sit on top of it (AS-1192). */
+export declare const emptyValueHitTarget = "min-w-[4px] self-stretch";
+/** Min width for the value edit input so an empty freeform value stays clickable. */
+export declare const editingValueMinWidth = "min-w-[3.5rem]";
 /** Segment text styles by variant */
 export declare const segmentTextVariants: (props?: ({
     variant?: "value" | "operator" | "attribute" | null | undefined;
     error?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/** Remove button styles — hidden by default, shown on chip hover or button focus */
+/** Remove button styles — hidden by default, shown on chip hover or button focus.
+ *  `pointer-events-none` while invisible stops it swallowing clicks meant for the
+ *  chip/input and silently deleting the chip (AS-1179). */
 export declare const removeButtonVariants: (props?: ({
     error?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -35,6 +35,8 @@ const chipVariants = cva(`h-22 group/chip relative flex items-center justify-cen
     }
 });
 const segmentContainer = 'flex flex-col justify-center overflow-hidden leading-none';
+const emptyValueHitTarget = 'min-w-[4px] self-stretch';
+const editingValueMinWidth = 'min-w-[3.5rem]';
 const segmentTextVariants = cva('truncate text-sm', {
     variants: {
         variant: {
@@ -68,7 +70,7 @@ const segmentTextVariants = cva('truncate text-sm', {
         error: false
     }
 });
-const removeButtonVariants = cva(`absolute -right-[13px] top-[-1px] bottom-[-1px] flex items-center justify-center p-0 cursor-pointer w-[18px] border border-solid border-l-0 rounded-r-8 opacity-0 group-hover/chip:opacity-100 focus:opacity-100 transition-opacity ${hiddenWhenSelected}`, {
+const removeButtonVariants = cva(`absolute -right-[13px] top-[-1px] bottom-[-1px] flex items-center justify-center p-0 cursor-pointer w-[18px] border border-solid border-l-0 rounded-r-8 opacity-0 pointer-events-none group-hover/chip:opacity-100 group-hover/chip:pointer-events-auto focus:opacity-100 focus:pointer-events-auto transition-opacity ${hiddenWhenSelected}`, {
     variants: {
         error: {
             true: 'border-border-danger bg-bg-light-danger text-text-danger',
@@ -79,4 +81,4 @@ const removeButtonVariants = cva(`absolute -right-[13px] top-[-1px] bottom-[-1px
         error: false
     }
 });
-export { chipVariants, removeButtonVariants, segmentContainer, segmentTextVariants };
+export { chipVariants, editingValueMinWidth, emptyValueHitTarget, removeButtonVariants, segmentContainer, segmentTextVariants };

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

@@ -1,5 +1,8 @@
 /** Minimum input width in px */
 export declare const MIN_INPUT_WIDTH = 4;
+/** Maximum input width in px — caps the content-sized input so a long value
+ *  can't grow it past the chip; beyond this it scrolls content natively. */
+export declare const MAX_INPUT_WIDTH = 280;
 /** Extra pixels added to measured width to prevent text clipping */
 export declare const WIDTH_OFFSET = 1;
 /** Approximate width of a single character in px (text-sm fallback) */

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

@@ -1,4 +1,5 @@
 const MIN_INPUT_WIDTH = 4;
+const MAX_INPUT_WIDTH = 280;
 const WIDTH_OFFSET = 1;
 const CHAR_WIDTH_PX = 8;
-export { CHAR_WIDTH_PX, MIN_INPUT_WIDTH, WIDTH_OFFSET };
+export { CHAR_WIDTH_PX, MAX_INPUT_WIDTH, MIN_INPUT_WIDTH, WIDTH_OFFSET };

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

@@ -6,11 +6,14 @@ interface UseSizerWidthOptions {
     text: string;
     /** Minimum width floor (defaults to MIN_INPUT_WIDTH) */
     minWidth?: number;
+    /** Maximum width ceiling (defaults to MAX_INPUT_WIDTH) */
+    maxWidth?: number;
 }
 /**
  * Measures input width from a hidden sizer span.
  * Falls back to character count * CHAR_WIDTH_PX when the DOM element is unavailable.
- * Returns the measured width + WIDTH_OFFSET to prevent text clipping.
+ * Returns the measured width + WIDTH_OFFSET to prevent text clipping, clamped to
+ * [minWidth, maxWidth] so a long value can't widen the input past the chip.
  */
-export declare const useSizerWidth: ({ sizerRef, text, minWidth, }: UseSizerWidthOptions) => number;
+export declare const useSizerWidth: ({ sizerRef, text, minWidth, maxWidth, }: UseSizerWidthOptions) => number;
 export {};

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

@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react";
-import { CHAR_WIDTH_PX, MIN_INPUT_WIDTH, WIDTH_OFFSET } from "../constants.js";
-const useSizerWidth = ({ sizerRef, text, minWidth = MIN_INPUT_WIDTH })=>{
+import { CHAR_WIDTH_PX, MAX_INPUT_WIDTH, MIN_INPUT_WIDTH, WIDTH_OFFSET } from "../constants.js";
+const useSizerWidth = ({ sizerRef, text, minWidth = MIN_INPUT_WIDTH, maxWidth = MAX_INPUT_WIDTH })=>{
     const [width, setWidth] = useState(minWidth);
     useEffect(()=>{
         const sizerWidth = sizerRef.current?.getBoundingClientRect().width ?? text.length * CHAR_WIDTH_PX;
-        setWidth(Math.max(minWidth, sizerWidth));
+        setWidth(Math.min(maxWidth, Math.max(minWidth, sizerWidth)));
     }, [
         text,
-        minWidth
+        minWidth,
+        maxWidth
     ]);
     return width + WIDTH_OFFSET;
 };

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

@@ -7,6 +7,8 @@ export interface ValueOption {
         color: BadgeColor;
         text: string;
     };
+    /** Muted secondary line rendered beneath the bold `label`. Display-only. */
+    description?: string;
     hasSubmenu?: boolean;
 }
 type ConditionValue = string | number | boolean;

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

@@ -8,11 +8,9 @@ import { useValueMenuDisplayValues } from "./useValueMenuDisplayValues.js";
 import { useValueMenuState } from "./useValueMenuState.js";
 import { ValueMenuFooter } from "./ValueMenuFooter.js";
 import { ValueMenuItem } from "./ValueMenuItem.js";
+import { valueOptionSearchText } from "./valueOptionSearchText.js";
 const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], highlightValue, width = 'standard', positioning, onBuildingValueChange, onItemToggle, inputRef, filterText = '', menuRef, blurCommitRef, className })=>{
-    const filteredValues = useMemo(()=>filterAndSort(values, filterText, (v)=>[
-                v.label,
-                String(v.value)
-            ]), [
+    const filteredValues = useMemo(()=>filterAndSort(values, filterText, valueOptionSearchText), [
         values,
         filterText
     ]);

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

@@ -15,13 +15,21 @@ const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect, re
                 type: "secondary",
                 variant: "default",
                 children: option.badge.text
-            }) : /*#__PURE__*/ jsx("div", {
+            }) : /*#__PURE__*/ jsxs("div", {
                 className: "min-w-0",
-                children: /*#__PURE__*/ jsx(Text, {
-                    size: "sm",
-                    truncate: true,
-                    children: option.label
-                })
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        truncate: true,
+                        children: option.label
+                    }),
+                    option.description && /*#__PURE__*/ jsx(Text, {
+                        size: "xs",
+                        color: "secondary",
+                        truncate: true,
+                        children: option.description
+                    })
+                ]
             }),
             multiSelect ? /*#__PURE__*/ jsx("div", {
                 className: "flex shrink-0 items-start justify-end py-2 ml-auto",

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

@@ -0,0 +1,7 @@
+import type { ValueOption } from './FilterInputValueMenu';
+/**
+ * Searchable strings for a value option: its label, its stringified value, and
+ * its optional `description` (so a path fragment finds the row). Fed to
+ * `filterAndSort`. The description entry is omitted when absent.
+ */
+export declare const valueOptionSearchText: (option: Pick<ValueOption, "value" | "label" | "description">) => string[];

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

@@ -0,0 +1,9 @@
+const valueOptionSearchText = (option)=>{
+    const text = [
+        option.label,
+        String(option.value)
+    ];
+    if (option.description) text.push(option.description);
+    return text;
+};
+export { valueOptionSearchText };

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

@@ -1,5 +1,6 @@
 import type { RefObject } from 'react';
 import type { FieldMetadata, FilterOperator, UpsertCondition } from '../../types';
+import type { BuildingBase } from './useAutocompleteState';
 interface UseBlurCommitDeps {
     selectedField: FieldMetadata | null;
     selectedOperator: FilterOperator | null;
@@ -9,6 +10,12 @@ interface UseBlurCommitDeps {
     handleCustomValueCommit: (text: string) => void;
     upsertCondition: UpsertCondition;
     resetState: () => 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;
     /** Indirection ref breaking the useMenuFlow ↔ useBlurCommit cycle. */
     commitBuildingOnBlurRef: RefObject<() => boolean>;
     /** Same indirection for force-commit (area-click → incomplete becomes error). */
@@ -20,7 +27,7 @@ interface UseBlurCommitDeps {
  * editable. Re-entry-guarded: refs cleared synchronously so concurrent callers
  * (multiple onOpenChange + blur in one tick) don't create duplicate chips.
  */
-export declare const useBlurCommit: ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, commitBuildingOnBlurRef, commitBuildingForceRef, }: UseBlurCommitDeps) => {
+export declare const useBlurCommit: ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, buildingSide, setBuildingSide, buildingBase, setBuildingBase, commitBuildingOnBlurRef, commitBuildingForceRef, }: UseBlurCommitDeps) => {
     commitBuildingOnBlur: () => boolean;
     hasIncompleteBuilding: () => boolean;
 };

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

@@ -1,16 +1,34 @@
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { isBuildingComplete, isNoValueOperator } from "../../lib/index.js";
-const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, commitBuildingOnBlurRef, commitBuildingForceRef })=>{
+const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, buildingSide, setBuildingSide, buildingBase, setBuildingBase, commitBuildingOnBlurRef, commitBuildingForceRef })=>{
     const selectedFieldRef = useRef(selectedField);
     const selectedOperatorRef = useRef(selectedOperator);
     const inputTextRef = useRef(inputText);
+    const buildingSideRef = useRef(buildingSide);
+    const buildingBaseRef = useRef(buildingBase);
     useLayoutEffect(()=>{
         selectedFieldRef.current = selectedField;
         selectedOperatorRef.current = selectedOperator;
         inputTextRef.current = inputText;
+        buildingSideRef.current = buildingSide;
+        buildingBaseRef.current = buildingBase;
     });
     const committingRef = useRef(false);
+    const commitPairedBaseWithErroredValue = useCallback((base, field, operator)=>{
+        upsertCondition(base.field, base.operator, base.value, null, effectiveInsertIndexRef.current);
+        const pairError = operator ? SEGMENT_VARIANT.value : true;
+        upsertCondition(field, operator ?? void 0, null, void 0, void 0, pairError, void 0, 1);
+        setBuildingBase(null);
+        setBuildingSide(0);
+        resetState();
+    }, [
+        upsertCondition,
+        resetState,
+        effectiveInsertIndexRef,
+        setBuildingBase,
+        setBuildingSide
+    ]);
     const commitBuildingOnBlur = useCallback(()=>{
         if (committingRef.current) return false;
         const field = selectedFieldRef.current;
@@ -19,6 +37,19 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
         if (!field) return false;
         if (editingChipId) return false;
         const hasTypedValue = !!operator && !isNoValueOperator(operator) && text.length > 0;
+        if (!hasTypedValue && 1 === buildingSideRef.current && buildingBaseRef.current) {
+            committingRef.current = true;
+            try {
+                const base = buildingBaseRef.current;
+                selectedFieldRef.current = null;
+                selectedOperatorRef.current = null;
+                inputTextRef.current = '';
+                commitPairedBaseWithErroredValue(base, field, operator);
+                return true;
+            } finally{
+                committingRef.current = false;
+            }
+        }
         if (!isBuildingComplete(field, operator, null) && !hasTypedValue) return false;
         committingRef.current = true;
         try {
@@ -40,7 +71,8 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
         handleCustomValueCommit,
         upsertCondition,
         resetState,
-        effectiveInsertIndexRef
+        effectiveInsertIndexRef,
+        commitPairedBaseWithErroredValue
     ]);
     useLayoutEffect(()=>{
         commitBuildingOnBlurRef.current = commitBuildingOnBlur;
@@ -68,6 +100,10 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
                 handleCustomValueCommit(text);
                 return true;
             }
+            if (1 === buildingSideRef.current && buildingBaseRef.current) {
+                commitPairedBaseWithErroredValue(buildingBaseRef.current, field, operator);
+                return true;
+            }
             if (isBuildingComplete(field, operator, null)) {
                 upsertCondition(field, operator, null, void 0, effectiveInsertIndexRef.current);
                 resetState();
@@ -85,7 +121,8 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
         handleCustomValueCommit,
         upsertCondition,
         resetState,
-        effectiveInsertIndexRef
+        effectiveInsertIndexRef,
+        commitPairedBaseWithErroredValue
     ]);
     useLayoutEffect(()=>{
         commitBuildingForceRef.current = commitBuildingForce;

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

@@ -64,17 +64,18 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
         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;
+        if (!condition || !pairedField || !chip?.pair) return;
+        const rawOperator = getOperatorFromLabel(chip.pair.operator || '', pairedField.type) ?? condition.pair?.operator ?? null;
+        const targetSegment = segment !== SEGMENT_VARIANT.value || rawOperator ? segment : SEGMENT_VARIANT.operator;
         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 ?? '');
+        setSelectedOperator(targetSegment === SEGMENT_VARIANT.value ? rawOperator : null);
+        setEditingSegment(targetSegment);
+        setSegmentFilterText(targetSegment === SEGMENT_VARIANT.operator ? chip.pair.operator ?? '' : chip.pair.value ?? '');
         setUserHasTyped(false);
-        setMenuState(SEGMENT_TO_MENU[segment]);
+        setMenuState(SEGMENT_TO_MENU[targetSegment]);
     }, [
         setMenuAnchor,
         setSelectedField,

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, UpsertCondition } from '../../types';
 interface UseFilterInputAutocompleteOptions {
     fields: FieldMetadata[];
@@ -49,10 +50,10 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     handleMenuDiscard: () => void;
     /** 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;
+    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;
     handleConnectorChange: (connectorId: string, value: "and" | "or") => void;
     handleChipRemove: (chipId: string) => void;

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

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
 import { deriveAutocompleteValues } from "./lib/index.js";
@@ -11,6 +12,7 @@ import { useInputHandlers } from "./useInputHandlers.js";
 import { useMenuFlow } from "./useMenuFlow/index.js";
 import { useMenuPositioning } from "./useMenuPositioning.js";
 import { useResetState } from "./useResetState.js";
+import { useResumeBuilding } from "./useResumeBuilding.js";
 import { useSegmentEditFlow } from "./useSegmentEditFlow.js";
 const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue, containerRef, buildingChipRef, inputRef })=>{
     const state = useAutocompleteState({
@@ -123,6 +125,10 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         handleCustomValueCommit,
         upsertCondition,
         resetState,
+        buildingSide,
+        setBuildingSide,
+        buildingBase,
+        setBuildingBase,
         commitBuildingOnBlurRef,
         commitBuildingForceRef
     });
@@ -170,6 +176,36 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setMenuState,
         setMenuAnchor
     });
+    const tryResumeBuilding = useResumeBuilding({
+        conditions,
+        fields,
+        removeConditionAtIndex,
+        setInsertIndex,
+        setBuildingBase,
+        setBuildingSide,
+        setSelectedField,
+        setSelectedOperator,
+        setBuildingMultiValue,
+        setInputText,
+        setMenuState,
+        resetMenuAnchor,
+        clearEditing: editing.clearEditing,
+        inputRef
+    });
+    const handleChipClick = useCallback((chipId, segment, anchorEl)=>{
+        if (tryResumeBuilding(chipId, segment, 0)) return;
+        editing.handleChipClick(chipId, segment, anchorEl);
+    }, [
+        tryResumeBuilding,
+        editing.handleChipClick
+    ]);
+    const handlePairChipClick = useCallback((chipId, segment, anchorEl)=>{
+        if (tryResumeBuilding(chipId, segment, 1)) return;
+        editing.handlePairChipClick(chipId, segment, anchorEl);
+    }, [
+        tryResumeBuilding,
+        editing.handlePairChipClick
+    ]);
     const { isBuilding, buildingChipData, editingMultiValues, editingSingleValue, editingDateRange } = deriveAutocompleteValues({
         editingChipId: editing.editingChipId,
         selectedField,
@@ -204,8 +240,8 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         handleMenuClose,
         handleMenuDiscard,
         resetAutocompleteState: resetState,
-        handleChipClick: editing.handleChipClick,
-        handlePairChipClick: editing.handlePairChipClick,
+        handleChipClick,
+        handlePairChipClick,
         handleBuildingChipClick,
         switchEditSegment,
         removeEditingChip,

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

@@ -0,0 +1,32 @@
+import type { RefObject } from 'react';
+import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
+import type { Condition, FieldMetadata, FilterOperator, MenuState } from '../../types';
+import type { BuildingBase } from './useAutocompleteState';
+interface UseResumeBuildingDeps {
+    conditions: Condition[];
+    fields: FieldMetadata[];
+    removeConditionAtIndex: (index: number) => void;
+    setInsertIndex: (index: number | null) => void;
+    setBuildingBase: (base: BuildingBase | null) => void;
+    setBuildingSide: (side: 0 | 1) => void;
+    setSelectedField: (field: FieldMetadata | null) => void;
+    setSelectedOperator: (op: FilterOperator | null) => void;
+    setBuildingMultiValue: (val: string | undefined) => void;
+    setInputText: (text: string) => void;
+    setMenuState: (state: MenuState) => void;
+    resetMenuAnchor: () => void;
+    /** Exit any inline-edit so the resumed flow is a clean building chip. */
+    clearEditing: () => void;
+    inputRef: RefObject<HTMLInputElement | null>;
+}
+/**
+ * Resume building a committed-but-incomplete chip instead of inline-editing it,
+ * reopening the menu at the first missing step so the building cascade — incl.
+ * the paired second triplet — carries on. Makes "press anywhere → red chip →
+ * click to continue" work for paired fields (AS-1179).
+ *
+ * Returns `true` when it took over (caller must skip inline-edit), `false` when
+ * the chip is complete (edit it normally).
+ */
+export declare const useResumeBuilding: ({ conditions, fields, removeConditionAtIndex, setInsertIndex, setBuildingBase, setBuildingSide, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInputText, setMenuState, resetMenuAnchor, clearEditing, inputRef, }: UseResumeBuildingDeps) => (chipId: string, segment?: ChipSegment, side?: 0 | 1) => boolean;
+export {};

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

@@ -0,0 +1,75 @@
+import { useCallback } from "react";
+import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
+import { chipIdToConditionIndex, isEmptyFilterValue, isNoValueOperator } from "../../lib/index.js";
+const useResumeBuilding = ({ conditions, fields, removeConditionAtIndex, setInsertIndex, setBuildingBase, setBuildingSide, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInputText, setMenuState, resetMenuAnchor, clearEditing, inputRef })=>useCallback((chipId, segment, side = 0)=>{
+        const idx = chipIdToConditionIndex(chipId);
+        if (null === idx) return false;
+        const condition = conditions[idx];
+        if (!condition || condition.disabled) return false;
+        const field = fields.find((f)=>f.name === condition.field);
+        if (!field) return false;
+        const baseOperatorMissing = !condition.operator;
+        const baseOperatorTakesValue = null != condition.operator && !isNoValueOperator(condition.operator);
+        const baseValueMissing = baseOperatorTakesValue && isEmptyFilterValue(condition.value);
+        const startBuilding = (params)=>{
+            clearEditing();
+            removeConditionAtIndex(idx);
+            setInsertIndex(idx);
+            setBuildingBase(params.base);
+            setBuildingSide(params.side);
+            setSelectedField(params.selectedField);
+            setSelectedOperator(params.selectedOperator);
+            setBuildingMultiValue(void 0);
+            setInputText('');
+            resetMenuAnchor();
+            setMenuState(params.menuState);
+            requestAnimationFrame(()=>inputRef.current?.focus());
+        };
+        if (baseOperatorMissing) return false;
+        if (baseValueMissing) {
+            if (!field.pairedField && segment !== SEGMENT_VARIANT.value) return false;
+            startBuilding({
+                base: null,
+                side: 0,
+                selectedField: field,
+                selectedOperator: condition.operator ?? null,
+                menuState: 'value'
+            });
+            return true;
+        }
+        if (1 === side && segment === SEGMENT_VARIANT.value && field.pairedField && !isNoValueOperator(condition.operator)) {
+            const pairOperator = condition.pair?.operator;
+            const pairValueMissing = null != pairOperator && !isNoValueOperator(pairOperator) && isEmptyFilterValue(condition.pair?.value);
+            if (pairValueMissing) {
+                startBuilding({
+                    base: {
+                        field,
+                        operator: condition.operator,
+                        value: condition.value
+                    },
+                    side: 1,
+                    selectedField: field.pairedField,
+                    selectedOperator: pairOperator,
+                    menuState: 'value'
+                });
+                return true;
+            }
+        }
+        return false;
+    }, [
+        conditions,
+        fields,
+        removeConditionAtIndex,
+        setInsertIndex,
+        setBuildingBase,
+        setBuildingSide,
+        setSelectedField,
+        setSelectedOperator,
+        setBuildingMultiValue,
+        setInputText,
+        setMenuState,
+        resetMenuAnchor,
+        clearEditing,
+        inputRef
+    ]);
+export { useResumeBuilding };

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

@@ -1,5 +1,5 @@
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { NO_VALUE_PLACEHOLDER, canBorrowCrossFieldLabel, findOptionByValue, findValueLabelInFields, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, canBorrowCrossFieldLabel, findOptionByValue, findValueLabelInFields, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, incompleteTripletError, isEmptyFilterValue, isNoValueOperator } from "../../lib/index.js";
 const INVALID_DATE = 'Invalid Date';
 const DATE_RANGE_SEPARATOR = ' – ';
 const MULTI_VALUE_SEPARATOR = ', ';
@@ -84,23 +84,35 @@ const buildMultiValueChip = (baseChip, condition, field, fields, chipError)=>{
     };
 };
 const buildPairChip = (condition, field, fields)=>{
-    if (!condition.pair || !field?.pairedField) return;
+    if (!field?.pairedField) return;
+    if (null != condition.operator && isNoValueOperator(condition.operator)) return;
     const pf = field.pairedField;
+    if (!condition.pair) {
+        const baseComplete = null != condition.operator && !isEmptyFilterValue(condition.value);
+        if (!baseComplete) return;
+        return {
+            attribute: pf.label || pf.name,
+            value: '',
+            error: SEGMENT_VARIANT.value
+        };
+    }
     const { operator, value, error } = condition.pair;
     const displayValue = operator && isNoValueOperator(operator) ? NO_VALUE_PLACEHOLDER : resolveValueLabel(value, pf, fields) ?? String(value ?? '');
+    const valueRequiredButMissing = !(operator && isNoValueOperator(operator)) && isEmptyFilterValue(value);
+    const pairError = error || (valueRequiredButMissing ? SEGMENT_VARIANT.value : void 0);
     return {
         attribute: pf.label || pf.name,
         operator: operator ? getOperatorLabel(operator, pf.type || DEFAULT_FIELD_TYPE) : void 0,
         value: displayValue,
-        ...error && {
-            error
+        ...pairError && {
+            error: pairError
         }
     };
 };
 const makeConditionChipBase = (i, conditions, fields, error)=>{
     const condition = conditions[i];
     if (!condition) return makeEmptyChip(i, error);
-    const chipError = condition.error || (error ? true : void 0);
+    const chipError = condition.error || (error ? true : void 0) || incompleteTripletError(condition.operator, condition.value);
     const field = fields.find((f)=>f.name === condition.field);
     const baseChip = buildBaseChip(i, condition, field);
     if (condition.operator && isNoValueOperator(condition.operator)) return {

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

@@ -155,6 +155,11 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
             return;
         }
         const condition = buildCondition(field, operator, val, error, dateOrigin);
+        if (editingChipId) {
+            const idx = chipIdToConditionIndex(editingChipId);
+            const prevCondition = null !== idx ? prev.conditions[idx] : void 0;
+            if (prevCondition?.pair && prevCondition.field === condition.field) condition.pair = prevCondition.pair;
+        }
         const newConditions = applyCondition(prev.conditions, condition, editingChipId, atIndex);
         const newConnectors = addConnectorIfNeeded(prev.connectors, newConditions.length, editingChipId, atIndex, prev.conditions.length);
         applyState({

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

@@ -1,6 +1,14 @@
-import type { FilterInputChipData } from '../types';
+import type { ChipErrorSegment, Condition, FilterInputChipData, FilterOperator } from '../types';
 /** Map a chip ID (e.g. "chip-2") back to condition index */
 export declare const chipIdToConditionIndex: (chipId: string) => number | null;
+/** A filter value is empty when null/undefined, '', or an empty array. */
+export declare const isEmptyFilterValue: (value: Condition["value"] | undefined) => boolean;
+/**
+ * Error segment for an incomplete triplet, or `undefined` when complete:
+ * missing operator → whole triplet (`true`); value-bearing operator with an
+ * empty value → the value segment; no-value operator ("is set") → complete.
+ */
+export declare const incompleteTripletError: (operator: FilterOperator | null | undefined, value: Condition["value"] | undefined) => ChipErrorSegment | undefined;
 /**
  * Convert a condition-level insert index to a position in the chips array.
  * When `afterConnector` is true, split AFTER the connector preceding the target chip.

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

@@ -1,8 +1,12 @@
+import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/segmentVariant.js";
 import { CHIP_ID_PATTERN } from "./constants.js";
+import { isNoValueOperator } from "./operators.js";
 const chipIdToConditionIndex = (chipId)=>{
     const match = chipId.match(CHIP_ID_PATTERN);
     return match ? Number(match[1]) : null;
 };
+const isEmptyFilterValue = (value)=>null == value || '' === value || Array.isArray(value) && 0 === value.length;
+const incompleteTripletError = (operator, value)=>operator ? isNoValueOperator(operator) ? void 0 : isEmptyFilterValue(value) ? SEGMENT_VARIANT.value : void 0 : true;
 const findChipSplitIndex = (chips, conditionInsertIndex, afterConnector = false)=>{
     let conditionCount = 0;
     for(let i = 0; i < chips.length; i++)if ('chip' === chips[i].variant) {
@@ -15,4 +19,4 @@ const findChipSplitIndex = (chips, conditionInsertIndex, afterConnector = false)
     }
     return chips.length;
 };
-export { chipIdToConditionIndex, findChipSplitIndex };
+export { chipIdToConditionIndex, findChipSplitIndex, incompleteTripletError, isEmptyFilterValue };

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

@@ -3,7 +3,7 @@ export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } f
 export { applyAcceptChar } from './applyAcceptChar';
 export { applyFieldValueTransforms } from './applyFieldValueTransforms';
 export { applyKnownFieldHelpers, getKnownFieldSerializer } from './applyKnownFieldHelpers';
-export { chipIdToConditionIndex, findChipSplitIndex } from './conditions';
+export { chipIdToConditionIndex, findChipSplitIndex, incompleteTripletError, isEmptyFilterValue, } from './conditions';
 export { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
 export { COUNTRY_OPTIONS } from './country';
 export { type AnchorBounds, buildAnchoredRect, isMenuRelated, toAnchorBounds } from './dom';

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

@@ -2,7 +2,7 @@ import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } fr
 import { applyAcceptChar } from "./applyAcceptChar.js";
 import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
 import { applyKnownFieldHelpers, getKnownFieldSerializer } from "./applyKnownFieldHelpers.js";
-import { chipIdToConditionIndex, findChipSplitIndex } from "./conditions.js";
+import { chipIdToConditionIndex, findChipSplitIndex, incompleteTripletError, isEmptyFilterValue } from "./conditions.js";
 import { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
 import { COUNTRY_OPTIONS } from "./country/index.js";
 import { buildAnchoredRect, isMenuRelated, toAnchorBounds } from "./dom.js";
@@ -15,4 +15,4 @@ import { SEGMENT_TO_MENU } from "./segmentMenu.js";
 import { serializeExpression } from "./serializeExpression.js";
 import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
 import { canBorrowCrossFieldLabel, findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField } from "./validation.js";
-export { CONNECTOR_ID_PATTERN, COUNTRY_OPTIONS, DATE_PRESETS, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, NO_VALUE_PLACEHOLDER, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, SEGMENT_TO_MENU, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildAnchoredRect, canBorrowCrossFieldLabel, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findMatchingFieldValue, findOptionByValue, findValueLabelInFields, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getInvalidValueIndices, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValidFieldValue, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression, toAnchorBounds, validateValueForField };
+export { CONNECTOR_ID_PATTERN, COUNTRY_OPTIONS, DATE_PRESETS, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, NO_VALUE_PLACEHOLDER, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, SEGMENT_TO_MENU, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildAnchoredRect, canBorrowCrossFieldLabel, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findMatchingFieldValue, findOptionByValue, findValueLabelInFields, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getInvalidValueIndices, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, incompleteTripletError, isBetweenOperator, isBuildingComplete, isDatePreset, isEmptyFilterValue, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValidFieldValue, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression, toAnchorBounds, validateValueForField };

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

@@ -59,6 +59,14 @@ export interface FieldValueOption {
         color: BadgeColor;
         text: string;
     };
+    /**
+     * Optional secondary text rendered as a muted line beneath the bold `label`
+     * in the value dropdown (e.g. a backend path that explains or disambiguates
+     * the option). Display-only — never committed as a filter value. Because the
+     * bold `label` need not be unique, this line is what distinguishes rows that
+     * share a label (two `request-id` rows with different paths).
+     */
+    description?: string;
 }
 /**
  * Field Metadata Interface

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.69.0",
-  "generatedAt": "2026-07-02T05:34:16.725Z",
+  "version": "0.70.0",
+  "generatedAt": "2026-07-02T11:59:11.867Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

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