@wallarm-org/design-system 0.40.0-rc-feature-AS-982.7 → 0.40.0

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

@@ -1,4 +1,4 @@
-import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../lib/index.js";
 const getEditingCondition = (editingChipId, conditions)=>{
     if (!editingChipId) return null;
     const idx = chipIdToConditionIndex(editingChipId);

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

@@ -9,14 +9,25 @@ interface UseBlurCommitDeps {
     handleCustomValueCommit: (text: string) => void;
     upsertCondition: UpsertCondition;
     resetState: () => void;
-    /** Indirection ref breaking the useMenuFlow ↔ useBlurCommit cycle. */
+    /**
+     * 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()`.
+     */
     commitBuildingOnBlurRef: RefObject<() => boolean>;
 }
 /**
- * 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.
+ * 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.
  */
 export declare const useBlurCommit: ({ selectedField, selectedOperator, inputText, editingChipId, effectiveInsertIndexRef, handleCustomValueCommit, upsertCondition, resetState, commitBuildingOnBlurRef, }: UseBlurCommitDeps) => {
     commitBuildingOnBlur: () => boolean;

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;
-    resetMenuAnchor: () => void;
+    resetMenuOffset: () => 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, resetMenuAnchor, resetState, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseChipActionsDeps) => {
+export declare const useChipActions: ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuOffset, 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, resetMenuAnchor, resetState, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
+const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuOffset, 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);
-        resetMenuAnchor();
+        resetMenuOffset();
         setMenuState('closed');
         inputRef.current?.focus();
     }, [
         removeCondition,
-        resetMenuAnchor,
+        resetMenuOffset,
         inputRef,
         effectiveInsertIndexRef,
         setInsertIndex,
@@ -29,14 +29,14 @@ const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, cl
         flushSync(()=>{
             setInsertIndex(conditionIndex);
             setInsertAfterConnector(afterConnector);
-            resetMenuAnchor();
+            resetMenuOffset();
             setMenuState('closed');
         });
         setMenuState('field');
         inputRef.current?.focus();
     }, [
         resetState,
-        resetMenuAnchor,
+        resetMenuOffset,
         inputRef,
         setInsertIndex,
         setInsertAfterConnector,

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

@@ -1,31 +1,32 @@
+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[];
-    setMenuAnchor: (el: HTMLElement | null) => void;
+    containerRef: RefObject<HTMLElement | null>;
+    setMenuOffset: (offset: number) => void;
     setSelectedField: (field: FieldMetadata | null) => void;
     setSelectedOperator: (op: FilterOperator | null) => void;
     setMenuState: (state: MenuState) => void;
     upsertCondition: UpsertCondition;
 }
 /**
- * Manages editing of existing filter chips. Chip click opens the appropriate
- * menu based on segment, then advances through field → operator → value.
+ * Manages editing of existing filter chips.
+ * Handles chip click → open appropriate menu based on segment,
+ * then advances through the full flow (field → operator → value).
  */
-export declare const useChipEditing: ({ conditions, chips, fields, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition, }: UseChipEditingOptions) => {
+export declare const useChipEditing: ({ conditions, chips, fields, containerRef, setMenuOffset, 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, anchorEl: HTMLElement) => void;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => 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,10 +1,15 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { SEGMENT_TO_MENU, chipIdToConditionIndex, getOperatorFromLabel, isNoValueOperator } from "../../lib/index.js";
+import { 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;
@@ -12,7 +17,7 @@ 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, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition })=>{
+const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset, setSelectedField, setSelectedOperator, setMenuState, upsertCondition })=>{
     const [editingChipId, setEditingChipId] = useState(null);
     const [editingSegment, setEditingSegment] = useState(null);
     const [segmentFilterText, setSegmentFilterText] = useState('');
@@ -23,7 +28,7 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
     chipsRef.current = chips;
     const fieldsRef = useRef(fields);
     fieldsRef.current = fields;
-    const handleChipClick = useCallback((chipId, segment, anchorEl)=>{
+    const handleChipClick = useCallback((chipId, segment, anchorRect)=>{
         const condition = getConditionByChipId(chipId, conditionsRef.current);
         if (!condition) return;
         const field = fieldsRef.current.find((f)=>f.name === condition.field);
@@ -34,7 +39,8 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
         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);
-        setMenuAnchor(anchorEl);
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        setMenuOffset(containerRect ? anchorRect.left - containerRect.left : 0);
         setEditingChipId(chipId);
         setSelectedField(field ?? null);
         const rawOperator = targetSegment === SEGMENT_VARIANT.value || targetSegment === SEGMENT_VARIANT.operator ? getOperatorFromLabel(chip.operator || '', field?.type ?? 'string') ?? condition.operator : null;
@@ -49,7 +55,8 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
         setUserHasTyped(false);
         setMenuState(SEGMENT_TO_MENU[targetSegment]);
     }, [
-        setMenuAnchor,
+        containerRef,
+        setMenuOffset,
         setSelectedField,
         setSelectedOperator,
         setMenuState,
@@ -67,11 +74,6 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
         setSegmentFilterText(currentText);
         setUserHasTyped(false);
     }, []);
-    const switchEditSegment = useCallback((segment, currentText)=>{
-        setEditingSegment(segment);
-        setSegmentFilterText(currentText);
-        setUserHasTyped(false);
-    }, []);
     const handleSegmentFilterChange = useCallback((text)=>{
         setSegmentFilterText(text);
         setUserHasTyped(true);
@@ -81,11 +83,9 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
     }, []);
     const segmentDisplayText = segmentFilterText;
     const segmentMenuFilterText = userHasTyped ? segmentFilterText : '';
-    const isBuildingEdit = null === editingChipId && null !== editingSegment;
     return useMemo(()=>({
             editingChipId,
             editingSegment,
-            isBuildingEdit,
             setEditingSegment,
             segmentFilterText: segmentDisplayText,
             segmentMenuFilterText,
@@ -93,19 +93,16 @@ const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedF
             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,5 +1,6 @@
 import type { RefObject } from 'react';
-import type { Condition, FieldMetadata, FilterInputChipData, UpsertCondition } from '../../types';
+import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
+import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
 interface UseFilterInputAutocompleteOptions {
     fields: FieldMetadata[];
     conditions: Condition[];
@@ -15,9 +16,9 @@ interface UseFilterInputAutocompleteOptions {
 }
 export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue, containerRef, buildingChipRef, inputRef, }: UseFilterInputAutocompleteOptions) => {
     inputText: string;
-    menuState: import("../../types").MenuState;
+    menuState: MenuState;
     selectedField: FieldMetadata | null;
-    selectedOperator: import("../..").FilterOperator | null;
+    selectedOperator: FilterOperator | null;
     isBuilding: boolean;
     buildingChipData: import("../../FilterInputContext").BuildingChipData | null;
     menuPositioning: {
@@ -40,19 +41,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: import("../..").FilterOperator) => void;
+    handleOperatorSelect: (operator: 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 for paste/clipboard flows — scraps in-progress building. */
+    /** 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. */
     resetAutocompleteState: (continueBuilding?: boolean) => 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;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
     handleConnectorChange: (connectorId: string, value: "and" | "or") => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;

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

@@ -1,36 +1,50 @@
+import { useCallback, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
-import { deriveAutocompleteValues } from "./lib/index.js";
-import { useAutocompleteState } from "./useAutocompleteState.js";
+import { applyAcceptChar, getOperatorLabel } from "../../lib/index.js";
+import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
 import { useBlurCommit } from "./useBlurCommit.js";
 import { useChipActions } from "./useChipActions.js";
-import { useChipCascade } from "./useChipCascade.js";
 import { useChipEditing } from "./useChipEditing.js";
 import { useFocusManagement } from "./useFocusManagement.js";
 import { useInputHandlers } from "./useInputHandlers.js";
-import { useMenuFlow } from "./useMenuFlow/index.js";
+import { useMenuFlow } from "./useMenuFlow.js";
 import { useMenuPositioning } from "./useMenuPositioning.js";
 import { useResetState } from "./useResetState.js";
-import { useSegmentEditFlow } from "./useSegmentEditFlow.js";
 const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue, containerRef, buildingChipRef, inputRef })=>{
-    const state = useAutocompleteState({
-        conditions
-    });
-    const { inputText, setInputText, menuState, setMenuState, selectedField, setSelectedField, selectedOperator, setSelectedOperator, isFocused, setIsFocused, buildingMultiValue, setBuildingMultiValue, insertIndex, setInsertIndex, insertAfterConnector, setInsertAfterConnector, effectiveInsertIndex, effectiveInsertIndexRef, conditionsRef, conditionsLengthRef, blurCommitRef, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, commitBuildingOnBlurRef } = state;
-    const { menuPositioning, setMenuAnchor, resetMenuAnchor } = useMenuPositioning({
+    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);
+    effectiveInsertIndexRef.current = effectiveInsertIndex;
+    const conditionsRef = useRef(conditions);
+    conditionsRef.current = conditions;
+    const conditionsLengthRef = useRef(conditions.length);
+    conditionsLengthRef.current = conditions.length;
+    const blurCommitRef = useRef(null);
+    const segmentAttributeInputRef = useRef(null);
+    const segmentOperatorInputRef = useRef(null);
+    const segmentValueInputRef = useRef(null);
+    const commitBuildingOnBlurRef = useRef(()=>false);
+    const { menuPositioning, setMenuOffset, resetMenuOffset } = useMenuPositioning({
         containerRef,
         buildingChipRef,
         inputRef,
         isBuilding: null !== selectedField,
-        insertIndex: effectiveInsertIndex,
-        chipsCount: chips.length,
-        isMenuOpen: 'closed' !== menuState
+        insertIndex: effectiveInsertIndex
     });
     const editing = useChipEditing({
         conditions,
         chips,
         fields,
-        setMenuAnchor,
+        containerRef,
+        setMenuOffset,
         setSelectedField,
         setSelectedOperator,
         setMenuState,
@@ -42,7 +56,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         dateRange,
         containerRef,
         inputRef,
-        resetMenuAnchor,
+        resetMenuOffset,
         setInputText,
         setSelectedField,
         setSelectedOperator,
@@ -69,24 +83,6 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setMenuState,
         setBuildingMultiValue
     });
-    const { switchEditSegment, removeEditingChip, stepBackBuildingMenu } = useChipCascade({
-        editing,
-        chips,
-        fields,
-        conditionsRef,
-        effectiveInsertIndexRef,
-        selectedField,
-        selectedOperator,
-        buildingMultiValue,
-        upsertCondition,
-        removeCondition,
-        resetState,
-        setInputText,
-        setMenuState,
-        setSelectedOperator,
-        setBuildingMultiValue,
-        setInsertIndex
-    });
     const { handleInputChange, handleInputClick, handleKeyDown, menuRef } = useInputHandlers({
         inputText,
         menuState,
@@ -101,12 +97,11 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setInputText,
         setMenuState,
         setInsertIndex,
-        resetMenuAnchor,
+        resetMenuOffset,
         removeConditionAtIndex,
         handleFieldSelect,
         handleOperatorSelect,
-        handleCustomValueCommit,
-        stepBackBuildingMenu
+        handleCustomValueCommit
     });
     const { commitBuildingOnBlur, hasIncompleteBuilding } = useBlurCommit({
         selectedField,
@@ -137,7 +132,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         hasIncompleteBuilding,
         setIsFocused,
         setMenuState,
-        resetMenuAnchor,
+        resetMenuOffset,
         resetState
     });
     const { handleChipRemove, handleClear, handleGapClick, closeAutocompleteMenu } = useChipActions({
@@ -145,24 +140,12 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         inputRef,
         removeCondition,
         clearAll,
-        resetMenuAnchor,
+        resetMenuOffset,
         resetState,
         setInsertIndex,
         setInsertAfterConnector,
         setMenuState
     });
-    const { handleSegmentFilterChange, cancelSegmentEdit, handleMenuDiscard, handleBuildingChipClick } = useSegmentEditFlow({
-        editing,
-        selectedField,
-        selectedOperator,
-        buildingMultiValue,
-        resetState,
-        setSelectedField,
-        setSelectedOperator,
-        setInputText,
-        setMenuState,
-        setMenuAnchor
-    });
     const { isBuilding, buildingChipData, editingMultiValues, editingSingleValue, editingDateRange } = deriveAutocompleteValues({
         editingChipId: editing.editingChipId,
         selectedField,
@@ -172,6 +155,56 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         dateRangeFromValue: dateRange.fromValue,
         segmentFilterText: editing.editingSegment === SEGMENT_VARIANT.value ? editing.segmentMenuFilterText : void 0
     });
+    const handleSegmentFilterChange = useCallback((text)=>{
+        const accept = selectedField?.acceptChar;
+        const next = editing.editingSegment === SEGMENT_VARIANT.value && accept ? applyAcceptChar(text, accept) : text;
+        editing.setSegmentFilterText(next);
+    }, [
+        selectedField,
+        editing
+    ]);
+    const cancelSegmentEdit = useCallback(()=>{
+        const isBuildingEdit = !editing.editingChipId && null !== editing.editingSegment;
+        if (isBuildingEdit) {
+            editing.clearEditing();
+            setMenuState('closed');
+            return;
+        }
+        setSelectedField(null);
+        setSelectedOperator(null);
+        editing.clearEditing();
+        setMenuState('closed');
+    }, [
+        editing
+    ]);
+    const handleMenuDiscard = useCallback(()=>{
+        const isBuildingEdit = !editing.editingChipId && null !== editing.editingSegment;
+        if (isBuildingEdit) {
+            editing.clearEditing();
+            setMenuState('closed');
+            return;
+        }
+        resetState();
+    }, [
+        editing,
+        resetState
+    ]);
+    const handleBuildingChipClick = useCallback((segment, anchorRect)=>{
+        if (!selectedField) return;
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        setMenuOffset(containerRect ? anchorRect.left - containerRect.left : 0);
+        const initialText = segment === SEGMENT_VARIANT.attribute ? selectedField.label : segment === SEGMENT_VARIANT.operator ? selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : '' : buildingMultiValue ?? '';
+        editing.startBuildingEdit(segment, initialText);
+        setInputText('');
+        setMenuState(segment === SEGMENT_VARIANT.attribute ? 'field' : segment === SEGMENT_VARIANT.operator ? 'operator' : 'value');
+    }, [
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        containerRef,
+        setMenuOffset,
+        editing
+    ]);
     return {
         inputText,
         menuState,
@@ -196,8 +229,6 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         resetAutocompleteState: resetState,
         handleChipClick: editing.handleChipClick,
         handleBuildingChipClick,
-        switchEditSegment,
-        removeEditingChip,
         handleConnectorChange: setConnectorValue,
         handleChipRemove,
         handleClear,

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

@@ -6,30 +6,32 @@ interface UseFocusManagementDeps {
     isFocused: boolean;
     conditionsLength: number;
     inputText: string;
-    /** In-progress building-chip state — refocus resumes at next missing segment. */
+    /** In-progress building-chip state — needed so refocus resumes at the next
+     *  missing segment instead of (incorrectly) reopening the field menu. */
     selectedField: FieldMetadata | null;
     selectedOperator: FilterOperator | null;
     containerRef: RefObject<HTMLElement | null>;
     inputRef: RefObject<HTMLInputElement | null>;
     editingSegment: ChipSegment | null;
-    /** Direct ref to the attribute segment input when editing. */
+    /** Direct ref to the attribute segment <input> when editing — avoids querySelector. */
     segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the operator segment input when editing. */
+    /** Direct ref to the operator segment <input> when editing — avoids querySelector. */
     segmentOperatorInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the value segment input when editing. */
+    /** Direct ref to the value segment <input> when editing — avoids querySelector. */
     segmentValueInputRef: RefObject<HTMLInputElement | null>;
-    /** Set by FilterInputValueMenu — commits multi-select checked values on blur. */
+    /** Ref set by FilterInputValueMenu — calls commitChecked() for multi-select before blur reset. Returns true if committed. */
     blurCommitRef: RefObject<(() => boolean) | null>;
-    /** Commits a building chip's freeform value on blur. Returns true if committed. */
+    /** Tries to commit a building chip's freeform value on blur. Returns true if committed. */
     commitBuildingOnBlur: () => boolean;
-    /** In-progress building chip exists — blur/close must preserve it (skip resetState). */
+    /** True if there's an in-progress building chip that the blur/close path
+     *  must preserve (skip resetState). */
     hasIncompleteBuilding: () => boolean;
     setIsFocused: (focused: boolean) => void;
     setMenuState: (state: MenuState) => void;
-    resetMenuAnchor: () => void;
+    resetMenuOffset: () => void;
     resetState: (continueBuilding?: boolean) => void;
 }
-export declare const useFocusManagement: ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuAnchor, resetState, }: UseFocusManagementDeps) => {
+export declare const useFocusManagement: ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuOffset, resetState, }: UseFocusManagementDeps) => {
     handleFocus: (e: FocusEvent) => void;
     handleBlur: (e: FocusEvent) => void;
 };

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

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { isMenuRelated, nextBuildingMenu } from "../../lib/index.js";
-const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuAnchor, resetState })=>{
+const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuOffset, resetState })=>{
     const handleFocus = useCallback((e)=>{
         if (e.target?.closest?.('[data-slot="filter-input-connector-chip"]')) return;
         setIsFocused(true);
@@ -46,10 +46,10 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
             return;
         }
         if (selectedField) {
-            resetMenuAnchor();
+            resetMenuOffset();
             setMenuState(nextBuildingMenu(selectedField, selectedOperator));
         } else if (0 === conditionsLength && '' === inputText) {
-            resetMenuAnchor();
+            resetMenuOffset();
             setMenuState('field');
         }
         prevFocusedRef.current = isFocused;
@@ -60,18 +60,9 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         selectedField,
         selectedOperator,
         editingSegment,
-        resetMenuAnchor,
+        resetMenuOffset,
         setMenuState
     ]);
-    const segmentInputRefsMap = useMemo(()=>({
-            [SEGMENT_VARIANT.attribute]: segmentAttributeInputRef,
-            [SEGMENT_VARIANT.operator]: segmentOperatorInputRef,
-            [SEGMENT_VARIANT.value]: segmentValueInputRef
-        }), [
-        segmentAttributeInputRef,
-        segmentOperatorInputRef,
-        segmentValueInputRef
-    ]);
     useEffect(()=>{
         if ('closed' === menuState) return;
         if (!isFocused) return;
@@ -83,11 +74,18 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
                 if (!container) return;
                 const active = document.activeElement;
                 if (active && !container.contains(active) && !isMenuRelated(active)) return;
-                const dest = editingSegment ? segmentInputRefsMap[editingSegment]?.current ?? null : inputRef.current;
-                if (!dest) return;
-                if (document.activeElement === dest) return;
-                dest.focus();
-                if (editingSegment) dest.select();
+                if (editingSegment) {
+                    const segmentInputRefs = {
+                        [SEGMENT_VARIANT.attribute]: segmentAttributeInputRef,
+                        [SEGMENT_VARIANT.operator]: segmentOperatorInputRef,
+                        [SEGMENT_VARIANT.value]: segmentValueInputRef
+                    };
+                    const segmentInput = segmentInputRefs[editingSegment]?.current ?? null;
+                    if (segmentInput && document.activeElement !== segmentInput) {
+                        segmentInput.focus();
+                        segmentInput.select();
+                    }
+                } else if (document.activeElement !== inputRef.current) inputRef.current?.focus();
             });
         });
         return ()=>{
@@ -100,34 +98,9 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         inputRef,
         editingSegment,
         containerRef,
-        segmentInputRefsMap
-    ]);
-    useEffect(()=>{
-        if ('closed' === menuState) return;
-        if (!isFocused) return;
-        const handleFocusIn = (e)=>{
-            const targetEl = e.target;
-            if (!targetEl) return;
-            const menu = targetEl.closest('[data-filter-input-menu]');
-            if (!menu) return;
-            if (menu.querySelector('[data-scope="date-picker"]')) return;
-            const tag = targetEl.tagName;
-            if ('BUTTON' === tag || 'INPUT' === tag || 'TEXTAREA' === tag || 'SELECT' === tag) return;
-            const dest = editingSegment ? segmentInputRefsMap[editingSegment]?.current : inputRef.current;
-            if (!dest) return;
-            if (document.activeElement === dest) return;
-            dest.focus({
-                preventScroll: true
-            });
-        };
-        document.addEventListener('focusin', handleFocusIn);
-        return ()=>document.removeEventListener('focusin', handleFocusIn);
-    }, [
-        menuState,
-        isFocused,
-        editingSegment,
-        inputRef,
-        segmentInputRefsMap
+        segmentAttributeInputRef,
+        segmentOperatorInputRef,
+        segmentValueInputRef
     ]);
     return {
         handleFocus,