@wallarm-org/design-system 0.41.0 → 0.42.0

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/{valueCommitHelpers.js → lib/valueResolution.js}

@@ -1,27 +1,5 @@
-import { MIN_DATE_STRING_LENGTH } from "../../FilterInputMenu/FilterInputDateValueMenu/constants.js";
-import { chipIdToConditionIndex, getFieldValues, hasStaticAllowlist, isDatePreset } from "../../lib/index.js";
-const findMatchingFieldValue = (fieldValues, text)=>fieldValues.find((v)=>v.label.toLowerCase() === text.toLowerCase() || String(v.value).toLowerCase() === text.toLowerCase());
-const isValidFieldValue = (fieldValues, v)=>fieldValues.some((opt)=>opt.value === v || String(opt.value).toLowerCase() === String(v).toLowerCase());
-const getInvalidValueIndices = (field, values)=>{
-    if (field.validate) return values.reduce((acc, v, idx)=>{
-        if (field.validate(v)) acc.push(idx);
-        return acc;
-    }, []);
-    if (!hasStaticAllowlist(field)) return [];
-    const fv = getFieldValues(field);
-    if (0 === fv.length) return [];
-    return values.reduce((acc, v, idx)=>{
-        if (!isValidFieldValue(fv, v)) acc.push(idx);
-        return acc;
-    }, []);
-};
-const validateValueForField = (field, value)=>{
-    if (null == value) return false;
-    const values = Array.isArray(value) ? value : [
-        value
-    ];
-    return getInvalidValueIndices(field, values).length > 0;
-};
+import { MIN_DATE_STRING_LENGTH } from "../../../FilterInputMenu/FilterInputDateValueMenu/constants.js";
+import { chipIdToConditionIndex, findMatchingFieldValue, getFieldValues, getInvalidValueIndices, hasStaticAllowlist, isDatePreset } from "../../../lib/index.js";
 const resolveFieldValue = (field, text)=>{
     const match = findMatchingFieldValue(getFieldValues(field), text);
     return match ? match.value : text;
@@ -90,4 +68,4 @@ const resolveDateValue = (trimmed, editingChipId, conditions)=>{
         dateOrigin
     };
 };
-export { displayDateToIso, getInvalidValueIndices, isValidFieldValue, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue, validateValueForField };
+export { displayDateToIso, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue };

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

@@ -0,0 +1,36 @@
+import type { Condition, FieldMetadata, FilterOperator, MenuState } from '../../types';
+interface UseAutocompleteStateOptions {
+    conditions: Condition[];
+}
+/**
+ * Owns the useState/useRef surface of the autocomplete hook. Refs mirror
+ * state so sub-hooks read synchronously without recreating callbacks.
+ */
+export declare const useAutocompleteState: ({ conditions }: UseAutocompleteStateOptions) => {
+    inputText: string;
+    setInputText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    menuState: MenuState;
+    setMenuState: import("react").Dispatch<import("react").SetStateAction<MenuState>>;
+    selectedField: FieldMetadata | null;
+    setSelectedField: import("react").Dispatch<import("react").SetStateAction<FieldMetadata | null>>;
+    selectedOperator: FilterOperator | null;
+    setSelectedOperator: import("react").Dispatch<import("react").SetStateAction<FilterOperator | null>>;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    buildingMultiValue: string | undefined;
+    setBuildingMultiValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    insertIndex: number | null;
+    setInsertIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    insertAfterConnector: boolean;
+    setInsertAfterConnector: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    effectiveInsertIndex: number;
+    effectiveInsertIndexRef: import("react").RefObject<number>;
+    conditionsRef: import("react").RefObject<Condition[]>;
+    conditionsLengthRef: import("react").RefObject<number>;
+    blurCommitRef: import("react").RefObject<(() => boolean) | null>;
+    segmentAttributeInputRef: import("react").RefObject<HTMLInputElement | null>;
+    segmentOperatorInputRef: import("react").RefObject<HTMLInputElement | null>;
+    segmentValueInputRef: import("react").RefObject<HTMLInputElement | null>;
+    commitBuildingOnBlurRef: import("react").RefObject<() => boolean>;
+};
+export {};

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

@@ -0,0 +1,53 @@
+import { useLayoutEffect, useRef, useState } from "react";
+const useAutocompleteState = ({ conditions })=>{
+    const [inputText, setInputText] = useState('');
+    const [menuState, setMenuState] = useState('closed');
+    const [selectedField, setSelectedField] = useState(null);
+    const [selectedOperator, setSelectedOperator] = useState(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [buildingMultiValue, setBuildingMultiValue] = useState(void 0);
+    const [insertIndex, setInsertIndex] = useState(null);
+    const [insertAfterConnector, setInsertAfterConnector] = useState(false);
+    const effectiveInsertIndex = insertIndex ?? conditions.length;
+    const effectiveInsertIndexRef = useRef(effectiveInsertIndex);
+    const conditionsRef = useRef(conditions);
+    const conditionsLengthRef = useRef(conditions.length);
+    useLayoutEffect(()=>{
+        effectiveInsertIndexRef.current = effectiveInsertIndex;
+        conditionsRef.current = conditions;
+        conditionsLengthRef.current = conditions.length;
+    });
+    const blurCommitRef = useRef(null);
+    const segmentAttributeInputRef = useRef(null);
+    const segmentOperatorInputRef = useRef(null);
+    const segmentValueInputRef = useRef(null);
+    const commitBuildingOnBlurRef = useRef(()=>false);
+    return {
+        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
+    };
+};
+export { useAutocompleteState };

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

@@ -9,25 +9,14 @@ interface UseBlurCommitDeps {
     handleCustomValueCommit: (text: string) => void;
     upsertCondition: UpsertCondition;
     resetState: () => void;
-    /**
-     * Indirection ref consumed by useMenuFlow to break the circular dependency
-     * useMenuFlow ↔ useBlurCommit. The hook writes the latest commit fn here
-     * each render; useMenuFlow calls through it via `() => ref.current()`.
-     */
+    /** Indirection ref breaking the useMenuFlow ↔ useBlurCommit cycle. */
     commitBuildingOnBlurRef: RefObject<() => boolean>;
 }
 /**
- * Commit logic for an incomplete "building" chip on blur or menu close.
- *
- * Instead of discarding the in-progress chip when the user blurs or the menu
- * closes, this either commits the typed text as a custom value (when there's an
- * operator + text) or persists it as an error chip (so it remains visible and
- * editable). Uses fresh refs to avoid stale closures.
- *
- * Re-entry guard: snapshots and clears the refs synchronously so concurrent
- * callers (two `onOpenChange(false)` from Ark UI menus during a state transition,
- * plus a blur in the same tick) short-circuit on re-entry instead of creating
- * duplicate error chips.
+ * Commit an incomplete building chip on blur/menu-close instead of discarding:
+ * commit typed text as custom value, or persist as an error chip so it stays
+ * 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, }: UseBlurCommitDeps) => {
     commitBuildingOnBlur: () => boolean;

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

@@ -1,12 +1,14 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 import { isBuildingComplete, isNoValueOperator } from "../../lib/index.js";
 const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, commitBuildingOnBlurRef })=>{
     const selectedFieldRef = useRef(selectedField);
-    selectedFieldRef.current = selectedField;
     const selectedOperatorRef = useRef(selectedOperator);
-    selectedOperatorRef.current = selectedOperator;
     const inputTextRef = useRef(inputText);
-    inputTextRef.current = inputText;
+    useLayoutEffect(()=>{
+        selectedFieldRef.current = selectedField;
+        selectedOperatorRef.current = selectedOperator;
+        inputTextRef.current = inputText;
+    });
     const committingRef = useRef(false);
     const commitBuildingOnBlur = useCallback(()=>{
         if (committingRef.current) return false;
@@ -39,7 +41,12 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
         resetState,
         effectiveInsertIndexRef
     ]);
-    commitBuildingOnBlurRef.current = commitBuildingOnBlur;
+    useLayoutEffect(()=>{
+        commitBuildingOnBlurRef.current = commitBuildingOnBlur;
+    }, [
+        commitBuildingOnBlur,
+        commitBuildingOnBlurRef
+    ]);
     const hasIncompleteBuilding = useCallback(()=>null !== selectedFieldRef.current && !editingChipId, [
         editingChipId
     ]);

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

@@ -5,7 +5,7 @@ interface UseChipActionsDeps {
     inputRef: RefObject<HTMLInputElement | null>;
     removeCondition: (chipId: string) => void;
     clearAll: () => void;
-    resetMenuOffset: () => void;
+    resetMenuAnchor: () => void;
     resetState: () => void;
     setInsertIndex: Dispatch<SetStateAction<number | null>>;
     setInsertAfterConnector: Dispatch<SetStateAction<boolean>>;
@@ -18,7 +18,7 @@ interface UseChipActionsDeps {
  * - clicking a gap between chips to insert a new condition there
  * - closing the menu (used by external consumers like the connector chip)
  */
-export declare const useChipActions: ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuOffset, resetState, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseChipActionsDeps) => {
+export declare const useChipActions: ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuAnchor, resetState, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseChipActionsDeps) => {
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;
     handleGapClick: (conditionIndex: number, afterConnector: boolean) => void;

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

@@ -1,17 +1,17 @@
 import { useCallback } from "react";
 import { flushSync } from "react-dom";
 import { chipIdToConditionIndex } from "../../lib/index.js";
-const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuOffset, resetState, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
+const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuAnchor, resetState, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
     const handleChipRemove = useCallback((chipId)=>{
         const chipCondIdx = chipIdToConditionIndex(chipId);
         if (null !== chipCondIdx && chipCondIdx < effectiveInsertIndexRef.current) setInsertIndex((prev)=>null != prev ? prev - 1 : prev);
         removeCondition(chipId);
-        resetMenuOffset();
+        resetMenuAnchor();
         setMenuState('closed');
         inputRef.current?.focus();
     }, [
         removeCondition,
-        resetMenuOffset,
+        resetMenuAnchor,
         inputRef,
         effectiveInsertIndexRef,
         setInsertIndex,
@@ -29,14 +29,14 @@ const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, cl
         flushSync(()=>{
             setInsertIndex(conditionIndex);
             setInsertAfterConnector(afterConnector);
-            resetMenuOffset();
+            resetMenuAnchor();
             setMenuState('closed');
         });
         setMenuState('field');
         inputRef.current?.focus();
     }, [
         resetState,
-        resetMenuOffset,
+        resetMenuAnchor,
         inputRef,
         setInsertIndex,
         setInsertAfterConnector,

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

@@ -0,0 +1,44 @@
+import type { MutableRefObject } from 'react';
+import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
+import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
+interface UseChipCascadeOptions {
+    editing: {
+        editingChipId: string | null;
+        editingSegment: ChipSegment | null;
+        isBuildingEdit: boolean;
+        startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
+        switchEditSegment: (segment: ChipSegment, currentText: string) => void;
+    };
+    chips: FilterInputChipData[];
+    fields: FieldMetadata[];
+    conditionsRef: MutableRefObject<Condition[]>;
+    selectedField: FieldMetadata | null;
+    selectedOperator: FilterOperator | null;
+    buildingMultiValue: string | undefined;
+    upsertCondition: UpsertCondition;
+    removeCondition: (chipId: string) => void;
+    resetState: (continueBuilding?: boolean) => void;
+    setInputText: (text: string) => void;
+    setMenuState: (state: MenuState) => void;
+    setSelectedOperator: (op: FilterOperator | null) => void;
+    setBuildingMultiValue: (val: string | undefined) => void;
+}
+/**
+ * Backspace-driven cascade for chip segments. Bundles three closely related
+ * actions so consumers don't have to wire them piecemeal:
+ *
+ * - `switchEditSegment` — walks inline-edit one segment to the left (value
+ *   → operator → attribute). The source segment's chip data is cleared so
+ *   the just-emptied text does not re-render after the switch.
+ * - `removeEditingChip` — drops the chip currently being edited (building
+ *   reset or committed `removeCondition` + insertIndex bookkeeping).
+ * - `stepBackBuildingMenu` — from the main input during building, enters
+ *   inline-edit on the previous segment with its text pre-selected, mirroring
+ *   the segment-click + cascade UX.
+ */
+export declare const useChipCascade: ({ editing, chips, fields, conditionsRef, selectedField, selectedOperator, buildingMultiValue, upsertCondition, removeCondition, resetState, setInputText, setMenuState, setSelectedOperator, setBuildingMultiValue, }: UseChipCascadeOptions) => {
+    switchEditSegment: (targetSegment: ChipSegment) => boolean;
+    removeEditingChip: () => void;
+    stepBackBuildingMenu: (current: "field" | "operator" | "value") => void;
+};
+export {};

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

@@ -0,0 +1,99 @@
+import { useCallback } from "react";
+import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
+import { SEGMENT_TO_MENU, chipIdToConditionIndex } from "../../lib/index.js";
+import { getInitialSegmentText } from "./lib/index.js";
+const useChipCascade = ({ editing, chips, fields, conditionsRef, selectedField, selectedOperator, buildingMultiValue, upsertCondition, removeCondition, resetState, setInputText, setMenuState, setSelectedOperator, setBuildingMultiValue })=>{
+    const { editingChipId, editingSegment, isBuildingEdit, startBuildingEdit, switchEditSegment: editingSwitchSegment } = editing;
+    const switchEditSegment = useCallback((targetSegment)=>{
+        const sourceSegment = editingSegment;
+        if (null === sourceSegment) return false;
+        if (isBuildingEdit) {
+            if (!selectedField) return false;
+            if (sourceSegment === SEGMENT_VARIANT.value) setBuildingMultiValue(void 0);
+            else if (sourceSegment === SEGMENT_VARIANT.operator) setSelectedOperator(null);
+            const initialText = getInitialSegmentText(targetSegment, selectedField, selectedOperator, buildingMultiValue);
+            startBuildingEdit(targetSegment, initialText);
+            setInputText('');
+            setMenuState(SEGMENT_TO_MENU[targetSegment]);
+            return true;
+        }
+        const editingId = editingChipId;
+        if (!editingId) return false;
+        const chip = chips.find((c)=>c.id === editingId);
+        if (!chip || 'chip' !== chip.variant) return false;
+        const idx = chipIdToConditionIndex(editingId);
+        const condition = null !== idx ? conditionsRef.current[idx] : null;
+        const field = condition ? fields.find((f)=>f.name === condition.field) : null;
+        if (condition && field) {
+            if (sourceSegment === SEGMENT_VARIANT.value) upsertCondition(field, condition.operator, null, editingId, void 0, void 0, condition.dateOrigin);
+            else if (sourceSegment === SEGMENT_VARIANT.operator) upsertCondition(field, void 0, condition.value, editingId, void 0, void 0, condition.dateOrigin);
+        }
+        const targetText = targetSegment === SEGMENT_VARIANT.attribute ? chip.attribute ?? '' : targetSegment === SEGMENT_VARIANT.operator ? chip.operator ?? '' : '';
+        editingSwitchSegment(targetSegment, targetText);
+        setMenuState(SEGMENT_TO_MENU[targetSegment]);
+        return true;
+    }, [
+        editingChipId,
+        editingSegment,
+        isBuildingEdit,
+        startBuildingEdit,
+        editingSwitchSegment,
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        chips,
+        fields,
+        conditionsRef,
+        upsertCondition,
+        setBuildingMultiValue,
+        setSelectedOperator,
+        setInputText,
+        setMenuState
+    ]);
+    const removeEditingChip = useCallback(()=>{
+        if (null === editingSegment) return;
+        if (!editingChipId) return void resetState();
+        removeCondition(editingChipId);
+        resetState();
+    }, [
+        editingChipId,
+        editingSegment,
+        removeCondition,
+        resetState
+    ]);
+    const stepBackBuildingMenu = useCallback((current)=>{
+        if (!selectedField) return void resetState();
+        if ('value' === current) {
+            setBuildingMultiValue(void 0);
+            setInputText('');
+            const operatorText = getInitialSegmentText(SEGMENT_VARIANT.operator, selectedField, selectedOperator, buildingMultiValue);
+            startBuildingEdit(SEGMENT_VARIANT.operator, operatorText);
+            setMenuState('operator');
+            return;
+        }
+        if ('operator' === current) {
+            setSelectedOperator(null);
+            setInputText('');
+            startBuildingEdit(SEGMENT_VARIANT.attribute, selectedField.label);
+            setMenuState('field');
+            return;
+        }
+        resetState();
+    }, [
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        startBuildingEdit,
+        resetState,
+        setBuildingMultiValue,
+        setInputText,
+        setMenuState,
+        setSelectedOperator
+    ]);
+    return {
+        switchEditSegment,
+        removeEditingChip,
+        stepBackBuildingMenu
+    };
+};
+export { useChipCascade };

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

@@ -1,32 +1,31 @@
-import type { RefObject } from 'react';
 import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
 import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
 interface UseChipEditingOptions {
     conditions: Condition[];
     chips: FilterInputChipData[];
     fields: FieldMetadata[];
-    containerRef: RefObject<HTMLElement | null>;
-    setMenuOffset: (offset: number) => void;
+    setMenuAnchor: (el: HTMLElement | null) => void;
     setSelectedField: (field: FieldMetadata | null) => void;
     setSelectedOperator: (op: FilterOperator | null) => void;
     setMenuState: (state: MenuState) => void;
     upsertCondition: UpsertCondition;
 }
 /**
- * Manages editing of existing filter chips.
- * Handles chip click → open appropriate menu based on segment,
- * then advances through the full flow (field → operator → value).
+ * Manages editing of existing filter chips. Chip click opens the appropriate
+ * menu based on segment, then advances through field → operator → value.
  */
-export declare const useChipEditing: ({ conditions, chips, fields, containerRef, setMenuOffset, setSelectedField, setSelectedOperator, setMenuState, upsertCondition, }: UseChipEditingOptions) => {
+export declare const useChipEditing: ({ conditions, chips, fields, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition, }: UseChipEditingOptions) => {
     editingChipId: string | null;
     editingSegment: import("../../FilterInputField/FilterInputChip").SegmentVariant | null;
+    isBuildingEdit: boolean;
     setEditingSegment: import("react").Dispatch<import("react").SetStateAction<import("../../FilterInputField/FilterInputChip").SegmentVariant | null>>;
     segmentFilterText: string;
     segmentMenuFilterText: string;
     setSegmentFilterText: (text: string) => void;
     resetSegmentTyping: () => void;
-    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
     startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
+    switchEditSegment: (segment: ChipSegment, currentText: string) => void;
     clearEditing: () => void;
 };
 export {};

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

@@ -1,15 +1,10 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { chipIdToConditionIndex, getOperatorFromLabel, isNoValueOperator } from "../../lib/index.js";
+import { SEGMENT_TO_MENU, chipIdToConditionIndex, getOperatorFromLabel, isNoValueOperator } from "../../lib/index.js";
 const getConditionByChipId = (chipId, conditions)=>{
     const idx = chipIdToConditionIndex(chipId);
     return null !== idx ? conditions[idx] ?? null : null;
 };
-const SEGMENT_TO_MENU = {
-    attribute: 'field',
-    operator: 'operator',
-    value: 'value'
-};
 const getFirstIncompleteSegment = (condition, fields)=>{
     const field = fields.find((f)=>f.name === condition.field);
     if (!field || condition.error === SEGMENT_VARIANT.attribute) return SEGMENT_VARIANT.attribute;
@@ -17,18 +12,20 @@ const getFirstIncompleteSegment = (condition, fields)=>{
     if (null === condition.value || '' === condition.value || condition.error === SEGMENT_VARIANT.value) return SEGMENT_VARIANT.value;
     return null;
 };
-const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset, setSelectedField, setSelectedOperator, setMenuState, upsertCondition })=>{
+const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition })=>{
     const [editingChipId, setEditingChipId] = useState(null);
     const [editingSegment, setEditingSegment] = useState(null);
     const [segmentFilterText, setSegmentFilterText] = useState('');
     const [userHasTyped, setUserHasTyped] = useState(false);
     const conditionsRef = useRef(conditions);
-    conditionsRef.current = conditions;
     const chipsRef = useRef(chips);
-    chipsRef.current = chips;
     const fieldsRef = useRef(fields);
-    fieldsRef.current = fields;
-    const handleChipClick = useCallback((chipId, segment, anchorRect)=>{
+    useLayoutEffect(()=>{
+        conditionsRef.current = conditions;
+        chipsRef.current = chips;
+        fieldsRef.current = fields;
+    });
+    const handleChipClick = useCallback((chipId, segment, anchorEl)=>{
         const condition = getConditionByChipId(chipId, conditionsRef.current);
         if (!condition) return;
         const field = fieldsRef.current.find((f)=>f.name === condition.field);
@@ -39,8 +36,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         const targetSegment = incompleteSegment ?? (isPlaceholderValueClick ? SEGMENT_VARIANT.operator : segment);
         if (!field && targetSegment !== SEGMENT_VARIANT.attribute) return;
         if (incompleteSegment && field) upsertCondition(field, condition.operator, condition.value, chipId);
-        const containerRect = containerRef.current?.getBoundingClientRect();
-        setMenuOffset(containerRect ? anchorRect.left - containerRect.left : 0);
+        setMenuAnchor(anchorEl);
         setEditingChipId(chipId);
         setSelectedField(field ?? null);
         const rawOperator = targetSegment === SEGMENT_VARIANT.value || targetSegment === SEGMENT_VARIANT.operator ? getOperatorFromLabel(chip.operator || '', field?.type ?? 'string') ?? condition.operator : null;
@@ -55,8 +51,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         setUserHasTyped(false);
         setMenuState(SEGMENT_TO_MENU[targetSegment]);
     }, [
-        containerRef,
-        setMenuOffset,
+        setMenuAnchor,
         setSelectedField,
         setSelectedOperator,
         setMenuState,
@@ -74,6 +69,11 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         setSegmentFilterText(currentText);
         setUserHasTyped(false);
     }, []);
+    const switchEditSegment = useCallback((segment, currentText)=>{
+        setEditingSegment(segment);
+        setSegmentFilterText(currentText);
+        setUserHasTyped(false);
+    }, []);
     const handleSegmentFilterChange = useCallback((text)=>{
         setSegmentFilterText(text);
         setUserHasTyped(true);
@@ -83,9 +83,11 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
     }, []);
     const segmentDisplayText = segmentFilterText;
     const segmentMenuFilterText = userHasTyped ? segmentFilterText : '';
+    const isBuildingEdit = null === editingChipId && null !== editingSegment;
     return useMemo(()=>({
             editingChipId,
             editingSegment,
+            isBuildingEdit,
             setEditingSegment,
             segmentFilterText: segmentDisplayText,
             segmentMenuFilterText,
@@ -93,16 +95,19 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
             resetSegmentTyping,
             handleChipClick,
             startBuildingEdit,
+            switchEditSegment,
             clearEditing
         }), [
         editingChipId,
         editingSegment,
+        isBuildingEdit,
         segmentDisplayText,
         segmentMenuFilterText,
         handleSegmentFilterChange,
         resetSegmentTyping,
         handleChipClick,
         startBuildingEdit,
+        switchEditSegment,
         clearEditing
     ]);
 };

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

@@ -1,6 +1,5 @@
 import type { RefObject } from 'react';
-import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
-import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
+import type { Condition, FieldMetadata, FilterInputChipData, UpsertCondition } from '../../types';
 interface UseFilterInputAutocompleteOptions {
     fields: FieldMetadata[];
     conditions: Condition[];
@@ -16,9 +15,9 @@ interface UseFilterInputAutocompleteOptions {
 }
 export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue, containerRef, buildingChipRef, inputRef, }: UseFilterInputAutocompleteOptions) => {
     inputText: string;
-    menuState: MenuState;
+    menuState: import("../../types").MenuState;
     selectedField: FieldMetadata | null;
-    selectedOperator: FilterOperator | null;
+    selectedOperator: import("../..").FilterOperator | null;
     isBuilding: boolean;
     buildingChipData: import("../../FilterInputContext").BuildingChipData | null;
     menuPositioning: {
@@ -41,19 +40,19 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     inputRef: RefObject<HTMLInputElement | null>;
     handleInputChange: (e: import("react").ChangeEvent<HTMLInputElement>) => void;
     handleFieldSelect: (field: FieldMetadata) => void;
-    handleOperatorSelect: (operator: FilterOperator) => void;
+    handleOperatorSelect: (operator: import("../..").FilterOperator) => void;
     handleValueSelect: (val: string | number | boolean) => void;
     handleMultiCommit: (values: Array<string | number | boolean>) => void;
     handleBuildingValueChange: (preview: string | undefined) => void;
     handleMultiSelectToggle: () => void;
     handleMenuClose: () => void;
     handleMenuDiscard: () => void;
-    /** Hard reset of autocomplete state — used by paste/clipboard flows where
-     *  the conditions array is replaced and any in-progress building must be
-     *  scrapped, regardless of inline-edit mode. */
+    /** Hard reset for paste/clipboard flows — scraps in-progress building. */
     resetAutocompleteState: (continueBuilding?: boolean) => void;
-    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
-    handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleChipClick: (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;
     handleConnectorChange: (connectorId: string, value: "and" | "or") => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;