@wallarm-org/design-system 0.68.2 → 0.68.3-rc-feature-AS-1179.1

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

@@ -13,9 +13,16 @@ 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) {
+            const operatorMissing = !condition.operator;
+            const valueMissing = !baseIsNoValue && !operatorMissing && (null == condition.value || '' === condition.value || Array.isArray(condition.value) && 0 === condition.value.length);
+            if (operatorMissing || valueMissing) {
+                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

@@ -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),
@@ -88,8 +90,8 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
             }),
             (value || baseActiveSegment === 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: pair ? 'max-w-[90px] shrink-0' : 'min-w-0',
+                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(SEGMENT_VARIANT.value, e) : void 0,
                         children: pair.attribute
                     }),
                     (pair.operator || pairActiveSegment === SEGMENT_VARIANT.operator) && /*#__PURE__*/ jsx(Segment, {
@@ -116,7 +119,7 @@ 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),
+                        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/classes.d.ts

@@ -12,7 +12,11 @@ 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.
+ *  It is `opacity-0` until hover/focus, but sits over the chip's right edge and the
+ *  field area just past it; `pointer-events-none` while invisible stops it from
+ *  swallowing clicks meant for the chip/input and silently deleting the chip
+ *  (AS-1179). Hover/focus restore both visibility and clickability. */
 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

@@ -68,7 +68,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',

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

@@ -1,5 +1,12 @@
 /** Minimum input width in px */
 export declare const MIN_INPUT_WIDTH = 4;
+/**
+ * Maximum input width in px. Caps the content-sized edit/search input so a long
+ * value can't grow the input past the chip (`max-w-[320px]`) and spill its text
+ * outside the chip border. Beyond this width the input scrolls its content
+ * natively instead of widening.
+ */
+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/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,14 +1,18 @@
 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 commitBuildingOnBlur = useCallback(()=>{
@@ -68,6 +72,16 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
                 handleCustomValueCommit(text);
                 return true;
             }
+            if (1 === buildingSideRef.current && buildingBaseRef.current) {
+                const base = buildingBaseRef.current;
+                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();
+                return true;
+            }
             if (isBuildingComplete(field, operator, null)) {
                 upsertCondition(field, operator, null, void 0, effectiveInsertIndexRef.current);
                 resetState();
@@ -85,7 +99,9 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
         handleCustomValueCommit,
         upsertCondition,
         resetState,
-        effectiveInsertIndexRef
+        effectiveInsertIndexRef,
+        setBuildingBase,
+        setBuildingSide
     ]);
     useLayoutEffect(()=>{
         commitBuildingForceRef.current = commitBuildingForce;

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)) return;
+        editing.handleChipClick(chipId, segment, anchorEl);
+    }, [
+        tryResumeBuilding,
+        editing.handleChipClick
+    ]);
+    const handlePairChipClick = useCallback((chipId, segment, anchorEl)=>{
+        if (tryResumeBuilding(chipId)) 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,35 @@
+import type { RefObject } from 'react';
+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.
+ *
+ * A chip left half-built (e.g. force-committed via an area click) keeps its
+ * triplets but lacks a required value. Clicking it converts the committed
+ * condition back into a building chip and reopens the menu at the first missing
+ * step, so the normal building cascade carries on — including the paired
+ * second triplet for two-step fields. This is what makes "press anywhere → red
+ * chip → click to continue" work for paired fields (AS-1179).
+ *
+ * Returns a predicate: `true` when it took over (caller must not also run the
+ * inline-edit handler), `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) => boolean;
+export {};

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

@@ -0,0 +1,77 @@
+import { useCallback } from "react";
+import { chipIdToConditionIndex, isNoValueOperator } from "../../lib/index.js";
+const isEmptyValue = (value)=>null == value || '' === value || Array.isArray(value) && 0 === value.length;
+const useResumeBuilding = ({ conditions, fields, removeConditionAtIndex, setInsertIndex, setBuildingBase, setBuildingSide, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInputText, setMenuState, resetMenuAnchor, clearEditing, inputRef })=>useCallback((chipId)=>{
+        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 && isEmptyValue(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) return false;
+            startBuilding({
+                base: null,
+                side: 0,
+                selectedField: field,
+                selectedOperator: condition.operator ?? null,
+                menuState: 'value'
+            });
+            return true;
+        }
+        if (field.pairedField && !isNoValueOperator(condition.operator)) {
+            const pairOperator = condition.pair?.operator;
+            const pairOperatorMissing = !pairOperator;
+            const pairOperatorTakesValue = null != pairOperator && !isNoValueOperator(pairOperator);
+            const pairValueMissing = pairOperatorTakesValue && isEmptyValue(condition.pair?.value);
+            if (pairOperatorMissing || pairValueMissing) {
+                startBuilding({
+                    base: {
+                        field,
+                        operator: condition.operator,
+                        value: condition.value
+                    },
+                    side: 1,
+                    selectedField: field.pairedField,
+                    selectedOperator: pairOperator ?? null,
+                    menuState: pairOperatorMissing ? 'operator' : '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

@@ -84,23 +84,36 @@ 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 && null != condition.value && '' !== condition.value && !(Array.isArray(condition.value) && 0 === condition.value.length);
+        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)) && (null == value || '' === value || Array.isArray(value) && 0 === value.length);
+    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 incompleteError = condition.operator ? isNoValueOperator(condition.operator) ? void 0 : null == condition.value || '' === condition.value || Array.isArray(condition.value) && 0 === condition.value.length ? SEGMENT_VARIANT.value : void 0 : true;
+    const chipError = condition.error || (error ? true : void 0) || incompleteError;
     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/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.68.1",
-  "generatedAt": "2026-06-29T10:19:12.580Z",
+  "version": "0.68.2",
+  "generatedAt": "2026-06-29T12:17:10.042Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

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