@wallarm-org/design-system 0.41.0 → 0.42.0

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

@@ -0,0 +1,20 @@
+import type { MenuFlowDeps } from './types';
+/**
+ * Aggregates the segment-specific flow hooks (`useFieldFlow`,
+ * `useOperatorFlow`, `useValueFlow`) and adds the cross-cutting
+ * `handleMenuClose` handler. Sub-hooks share a single fresh-conditions ref so
+ * none of them re-create callbacks on every keystroke that mutates conditions.
+ */
+export declare const useMenuFlow: (deps: MenuFlowDeps) => {
+    handleMenuClose: () => void;
+    handleFieldSelect: (field: import("../../..").FieldMetadata) => 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;
+    handleRangeSelect: (from: string, to: string) => void;
+    handleCustomValueCommit: (customText: string) => void;
+    handleCustomOperatorCommit: (customText: string) => void;
+    handleCustomAttributeCommit: (customText: string) => void;
+};

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

@@ -0,0 +1,47 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { useFieldFlow } from "./useFieldFlow.js";
+import { useOperatorFlow } from "./useOperatorFlow.js";
+import { useValueFlow } from "./useValueFlow.js";
+const useMenuFlow = (deps)=>{
+    const { editing, selectedField, inputRef, conditions, resetState, commitBuildingOnBlur, setMenuState } = deps;
+    const conditionsRef = useRef(conditions);
+    useLayoutEffect(()=>{
+        conditionsRef.current = conditions;
+    });
+    const internalDeps = {
+        ...deps,
+        conditionsRef
+    };
+    const { handleFieldSelect, handleCustomAttributeCommit } = useFieldFlow(internalDeps);
+    const { handleOperatorSelect, handleCustomOperatorCommit } = useOperatorFlow(internalDeps);
+    const { handleValueSelect, handleMultiCommit, handleBuildingValueChange, handleMultiSelectToggle, handleRangeSelect, handleCustomValueCommit } = useValueFlow(internalDeps);
+    const handleMenuClose = useCallback(()=>{
+        if (document.activeElement === inputRef.current) return;
+        if (document.activeElement?.closest?.('[data-slot^="segment-"]')) return;
+        if (commitBuildingOnBlur()) return;
+        const hasIncompleteBuilding = null !== selectedField && !editing.editingChipId;
+        if (hasIncompleteBuilding) return void setMenuState('closed');
+        resetState();
+    }, [
+        commitBuildingOnBlur,
+        resetState,
+        inputRef,
+        selectedField,
+        editing.editingChipId,
+        setMenuState
+    ]);
+    return {
+        handleMenuClose,
+        handleFieldSelect,
+        handleOperatorSelect,
+        handleValueSelect,
+        handleMultiCommit,
+        handleBuildingValueChange,
+        handleMultiSelectToggle,
+        handleRangeSelect,
+        handleCustomValueCommit,
+        handleCustomOperatorCommit,
+        handleCustomAttributeCommit
+    };
+};
+export { useMenuFlow };

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

@@ -0,0 +1,11 @@
+import type { FilterOperator } from '../../../types';
+import type { MenuFlowInternalDeps } from './types';
+/**
+ * Operator-segment handlers. `handleOperatorSelect` is the menu-click path,
+ * `handleCustomOperatorCommit` is the keyboard-typed path — it resolves the
+ * typed text to a known operator (label / raw key / symbol) and delegates.
+ */
+export declare const useOperatorFlow: ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, setSelectedOperator, setMenuState, setBuildingMultiValue, setInputText, }: MenuFlowInternalDeps) => {
+    handleOperatorSelect: (operator: FilterOperator) => void;
+    handleCustomOperatorCommit: (customText: string) => void;
+};

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

@@ -0,0 +1,87 @@
+import { useCallback } from "react";
+import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
+import { OPERATOR_SYMBOLS, chipIdToConditionIndex, getFieldOperators, getOperatorFromLabel, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible } from "../../../lib/index.js";
+const useOperatorFlow = ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, setSelectedOperator, setMenuState, setBuildingMultiValue, setInputText })=>{
+    const { editingChipId, editingSegment, isBuildingEdit, setEditingSegment, setSegmentFilterText, clearEditing } = editing;
+    const handleOperatorSelect = useCallback((operator)=>{
+        if (!selectedField) return;
+        if (isBuildingEdit && editingSegment === SEGMENT_VARIANT.operator) {
+            const shapeCompatible = isValueShapeCompatible(selectedOperator, operator);
+            if (!shapeCompatible) setBuildingMultiValue(void 0);
+            setSelectedOperator(operator);
+            clearEditing();
+            if (isNoValueOperator(operator)) {
+                upsertCondition(selectedField, operator, null, null, insertIndex);
+                resetState(true);
+                return;
+            }
+            setMenuState('value');
+            return;
+        }
+        if (isNoValueOperator(operator)) {
+            const isEditing = !!editingChipId;
+            upsertCondition(selectedField, operator, null, editingChipId, isEditing ? void 0 : insertIndex);
+            resetState(!isEditing);
+            return;
+        }
+        if (editingChipId && editingSegment === SEGMENT_VARIANT.operator) {
+            const idx = chipIdToConditionIndex(editingChipId);
+            const condition = null !== idx ? conditionsRef.current[idx] : null;
+            if (condition) {
+                const hasValue = null !== condition.value && '' !== condition.value;
+                if (hasValue) {
+                    upsertCondition(selectedField, operator, condition.value, editingChipId, void 0, void 0, condition.dateOrigin);
+                    resetState();
+                    return;
+                }
+                upsertCondition(selectedField, operator, null, editingChipId);
+                setEditingSegment(SEGMENT_VARIANT.value);
+                setSegmentFilterText('');
+            }
+        }
+        setSelectedOperator(operator);
+        setInputText('');
+        setMenuState('value');
+    }, [
+        editingChipId,
+        editingSegment,
+        isBuildingEdit,
+        setEditingSegment,
+        setSegmentFilterText,
+        clearEditing,
+        selectedField,
+        selectedOperator,
+        insertIndex,
+        conditionsRef,
+        upsertCondition,
+        resetState,
+        setSelectedOperator,
+        setMenuState,
+        setBuildingMultiValue,
+        setInputText
+    ]);
+    const handleCustomOperatorCommit = useCallback((customText)=>{
+        if (!selectedField || !customText.trim()) return;
+        const trimmed = customText.trim();
+        const allowed = getFieldOperators(selectedField);
+        let matched = getOperatorFromLabel(trimmed, selectedField.type);
+        if (!matched) {
+            const symbolMatch = allowed.find((op)=>OPERATOR_SYMBOLS[op].toLowerCase() === trimmed.toLowerCase());
+            if (symbolMatch) matched = symbolMatch;
+        }
+        if (!matched) {
+            const rawMatch = allowed.find((op)=>op.toLowerCase() === trimmed.toLowerCase());
+            if (rawMatch) matched = rawMatch;
+        }
+        if (!matched || !isOperatorAllowedForField(selectedField, matched)) return;
+        handleOperatorSelect(matched);
+    }, [
+        selectedField,
+        handleOperatorSelect
+    ]);
+    return {
+        handleOperatorSelect,
+        handleCustomOperatorCommit
+    };
+};
+export { useOperatorFlow };

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

@@ -0,0 +1,14 @@
+import type { MenuFlowInternalDeps } from './types';
+/**
+ * Value-segment handlers: single/multi/range select from the menu and the
+ * keyboard-typed custom-value commit (which routes through the field-type
+ * specific resolver). Also handles multi-select preview/toggle plumbing.
+ */
+export declare const useValueFlow: ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, dateRange, setBuildingMultiValue, setInputText, }: MenuFlowInternalDeps) => {
+    handleValueSelect: (val: string | number | boolean) => void;
+    handleMultiCommit: (values: Array<string | number | boolean>) => void;
+    handleBuildingValueChange: (preview: string | undefined) => void;
+    handleMultiSelectToggle: () => void;
+    handleRangeSelect: (from: string, to: string) => void;
+    handleCustomValueCommit: (customText: string) => void;
+};

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

@@ -0,0 +1,107 @@
+import { useCallback } from "react";
+import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
+import { isBetweenOperator, isMultiSelectOperator } from "../../../lib/index.js";
+import { resolveDateRangeValue, resolveDateValue, resolveMultiValues, resolveSingleValue } from "../lib/index.js";
+const useValueFlow = ({ editing, selectedField, selectedOperator, insertIndex, upsertCondition, conditionsRef, resetState, dateRange, setBuildingMultiValue, setInputText })=>{
+    const { editingChipId, editingSegment, resetSegmentTyping } = editing;
+    const handleValueSelect = useCallback((val)=>{
+        if (!selectedField || !selectedOperator) return;
+        if (isBetweenOperator(selectedOperator) && 'date' === selectedField.type) {
+            const result = dateRange.selectValue(String(val));
+            if (!result) return;
+            upsertCondition(selectedField, selectedOperator, result, editingChipId);
+            resetState(!editingChipId);
+            return;
+        }
+        const isEditing = !!editingChipId;
+        upsertCondition(selectedField, selectedOperator, val, editingChipId, isEditing ? void 0 : insertIndex);
+        resetState(!isEditing);
+    }, [
+        selectedField,
+        selectedOperator,
+        editingChipId,
+        dateRange,
+        insertIndex,
+        upsertCondition,
+        resetState
+    ]);
+    const handleMultiCommit = useCallback((values)=>{
+        if (!selectedField || !selectedOperator || 0 === values.length) return;
+        const isEditing = !!editingChipId;
+        upsertCondition(selectedField, selectedOperator, values, editingChipId, isEditing ? void 0 : insertIndex);
+        resetState(!isEditing);
+    }, [
+        selectedField,
+        selectedOperator,
+        editingChipId,
+        insertIndex,
+        upsertCondition,
+        resetState
+    ]);
+    const handleBuildingValueChange = useCallback((preview)=>{
+        setBuildingMultiValue(preview);
+    }, [
+        setBuildingMultiValue
+    ]);
+    const handleMultiSelectToggle = useCallback(()=>{
+        if (editingSegment === SEGMENT_VARIANT.value) resetSegmentTyping();
+        else setInputText('');
+    }, [
+        editingSegment,
+        resetSegmentTyping,
+        setInputText
+    ]);
+    const handleRangeSelect = useCallback((from, to)=>{
+        if (!selectedField || !selectedOperator) return;
+        const isEditing = !!editingChipId;
+        upsertCondition(selectedField, selectedOperator, [
+            from,
+            to
+        ], editingChipId, isEditing ? void 0 : insertIndex);
+        resetState(!isEditing);
+    }, [
+        selectedField,
+        selectedOperator,
+        editingChipId,
+        insertIndex,
+        upsertCondition,
+        resetState
+    ]);
+    const handleCustomValueCommit = useCallback((customText)=>{
+        if (!selectedField || !selectedOperator || !customText.trim()) return;
+        const trimmed = customText.trim();
+        const isEditing = !!editingChipId;
+        if (isMultiSelectOperator(selectedOperator)) {
+            const { resolved, error } = resolveMultiValues(selectedField, trimmed);
+            upsertCondition(selectedField, selectedOperator, resolved, editingChipId, isEditing ? void 0 : insertIndex, error ? SEGMENT_VARIANT.value : void 0);
+        } else if ('date' === selectedField.type) if (isBetweenOperator(selectedOperator)) {
+            const rangeValue = resolveDateRangeValue(trimmed);
+            upsertCondition(selectedField, selectedOperator, rangeValue ?? trimmed, editingChipId, isEditing ? void 0 : insertIndex, rangeValue ? void 0 : SEGMENT_VARIANT.value, 'absolute');
+        } else {
+            const { error, dateOrigin } = resolveDateValue(trimmed, editingChipId, conditionsRef.current);
+            upsertCondition(selectedField, selectedOperator, trimmed, editingChipId, isEditing ? void 0 : insertIndex, error ? SEGMENT_VARIANT.value : void 0, dateOrigin);
+        }
+        else {
+            const { resolved, error } = resolveSingleValue(selectedField, trimmed);
+            upsertCondition(selectedField, selectedOperator, resolved, editingChipId, isEditing ? void 0 : insertIndex, error ? SEGMENT_VARIANT.value : void 0);
+        }
+        resetState(!isEditing);
+    }, [
+        selectedField,
+        selectedOperator,
+        editingChipId,
+        insertIndex,
+        conditionsRef,
+        upsertCondition,
+        resetState
+    ]);
+    return {
+        handleValueSelect,
+        handleMultiCommit,
+        handleBuildingValueChange,
+        handleMultiSelectToggle,
+        handleRangeSelect,
+        handleCustomValueCommit
+    };
+};
+export { useValueFlow };

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

@@ -5,15 +5,32 @@ interface UseMenuPositioningOptions {
     inputRef?: RefObject<HTMLElement | null>;
     isBuilding: boolean;
     insertIndex: number;
+    /** Committed chip count — recompute trigger for sibling reflow (ResizeObserver
+     *  misses it; without this the dropdown sticks at the old position). */
+    chipsCount: number;
+    /** Menu is currently visible — gates the synthetic resize so a chip add/remove
+     *  while the menu is closed doesn't wake page-wide resize listeners. */
+    isMenuOpen: boolean;
 }
 /**
- * Manages dropdown menu positioning relative to the active chip or input.
- * Computes a horizontal offset lazily in getAnchorRect so the dropdown aligns with:
- * - The input element (when selecting a field, before building chip exists)
- * - The building chip (when selecting operator/value during chip creation)
- * - The clicked chip segment (when editing — offset set externally via setMenuOffset)
+ * Manages dropdown menu positioning relative to the active chip / segment / input.
+ *
+ * Anchor resolution (highest priority first):
+ *   1. Explicit element passed via `setMenuAnchor` — set when a chip segment is
+ *      clicked, including the Backspace cascade.
+ *   2. Building chip ref (for operator/value menus while a chip is being built).
+ *   3. Input ref — only when chips are already committed (the input has shifted
+ *      past them, so the dropdown follows the input's live position).
+ *   4. Container rect — the empty/initial state, flush with the field's border.
+ *
+ * Three signal sources keep Ark UI in sync with the live anchor:
+ *   - `useResizeTracker` — width changes inside a segment as the user types.
+ *   - `useFloatingRecomputeOn(chipsCount)` — sibling reflow when chips are
+ *     added/removed (no element resized, so the resize observer is silent).
+ *   - `useAutoCleanupDetachedElement` — drops the captured anchor as soon as
+ *     its DOM node leaves the tree (e.g. controlled-value prop removed it).
  */
-export declare const useMenuPositioning: ({ containerRef, buildingChipRef, inputRef, isBuilding, insertIndex, }: UseMenuPositioningOptions) => {
+export declare const useMenuPositioning: ({ containerRef, buildingChipRef, inputRef, isBuilding, insertIndex, chipsCount, isMenuOpen, }: UseMenuPositioningOptions) => {
     menuPositioning: {
         placement: "bottom-start";
         gutter: number;
@@ -28,7 +45,7 @@ export declare const useMenuPositioning: ({ containerRef, buildingChipRef, input
             right: number;
         } | null;
     };
-    setMenuOffset: (offset: number) => void;
-    resetMenuOffset: () => void;
+    setMenuAnchor: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    resetMenuAnchor: () => void;
 };
 export {};

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

@@ -1,36 +1,52 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
+import { MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, QUERY_BAR_SELECTOR, toAnchorBounds } from "../../lib/index.js";
+import { useAutoCleanupDetachedElement } from "../useAutoCleanupDetachedElement.js";
 import { useFilterInputPositioning } from "../useFilterInputPositioning.js";
-const useMenuPositioning = ({ containerRef, buildingChipRef, inputRef, isBuilding, insertIndex })=>{
-    const editingOffsetRef = useRef(null);
-    const setMenuOffset = useCallback((offset)=>{
-        editingOffsetRef.current = offset;
-    }, []);
-    const resetMenuOffset = useCallback(()=>{
-        editingOffsetRef.current = null;
-    }, []);
-    const getAnchorLeft = useCallback((containerRect)=>{
-        if (null !== editingOffsetRef.current) return containerRect.left + editingOffsetRef.current;
-        if (isBuilding) {
-            const chipRect = buildingChipRef.current?.getBoundingClientRect();
-            if (chipRect) return chipRect.left;
-        }
-        if (inputRef?.current) return inputRef.current.getBoundingClientRect().left;
-        return containerRect.left;
-    }, [
+import { useFloatingRecomputeOn } from "../useFloatingRecomputeOn.js";
+import { useResizeTracker } from "../useResizeTracker.js";
+const useMenuPositioning = ({ containerRef, buildingChipRef, inputRef, isBuilding, insertIndex, chipsCount, isMenuOpen })=>{
+    const [editingEl, setMenuAnchor] = useState(null);
+    const resetMenuAnchor = useCallback(()=>setMenuAnchor(null), []);
+    useAutoCleanupDetachedElement(editingEl, resetMenuAnchor);
+    useFloatingRecomputeOn(chipsCount, isMenuOpen);
+    const tick = useResizeTracker(editingEl, buildingChipRef.current, containerRef.current);
+    const anchorStateRef = useRef({
+        editingEl,
+        isBuilding,
+        chipsCount
+    });
+    anchorStateRef.current = {
+        editingEl,
         isBuilding,
+        chipsCount
+    };
+    const getAnchorBounds = useCallback((containerRect)=>{
+        const { editingEl: el, isBuilding: building, chipsCount: count } = anchorStateRef.current;
+        const chipAnchor = el?.isConnected ? toAnchorBounds(el.getBoundingClientRect()) : building && buildingChipRef.current ? toAnchorBounds(buildingChipRef.current.getBoundingClientRect()) : count > 0 && inputRef?.current ? toAnchorBounds(inputRef.current.getBoundingClientRect()) : null;
+        if (chipAnchor) return {
+            ...chipAnchor,
+            bottom: chipAnchor.bottom + MENU_CHIP_GUTTER_OFFSET
+        };
+        const fieldEl = containerRef.current?.querySelector(QUERY_BAR_SELECTOR) ?? null;
+        return toAnchorBounds(fieldEl?.getBoundingClientRect() ?? containerRect);
+    }, [
+        containerRef,
         buildingChipRef,
         inputRef
     ]);
     const menuPositioning = useFilterInputPositioning({
         containerRef,
-        getAnchorLeft
+        getAnchorBounds,
+        gutter: MENU_BASE_GUTTER
     }, [
-        insertIndex
+        insertIndex,
+        chipsCount,
+        tick
     ]);
     return {
         menuPositioning,
-        setMenuOffset,
-        resetMenuOffset
+        setMenuAnchor,
+        resetMenuAnchor
     };
 };
 export { useMenuPositioning };

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

@@ -9,7 +9,7 @@ interface UseResetStateDeps {
     };
     containerRef: RefObject<HTMLElement | null>;
     inputRef: RefObject<HTMLInputElement | null>;
-    resetMenuOffset: () => void;
+    resetMenuAnchor: () => void;
     setInputText: Dispatch<SetStateAction<string>>;
     setSelectedField: Dispatch<SetStateAction<FieldMetadata | null>>;
     setSelectedOperator: Dispatch<SetStateAction<FilterOperator | null>>;
@@ -19,24 +19,15 @@ interface UseResetStateDeps {
     setMenuState: Dispatch<SetStateAction<MenuState>>;
 }
 /**
- * Resets all autocomplete state and conditionally returns focus to the main input.
+ * Resets all autocomplete state and refocuses the input.
  *
- * ── Body-focus policy (READ THIS) ─────────────────────────────────────────────
- * `document.activeElement === document.body` is treated **as "stayed inside"** here
- * — i.e. we DO refocus the main input. The reasoning: state mutations in
- * `doReset()` (e.g. `editing.clearEditing()`) can synchronously unmount the
- * element that previously had focus (a chip's inline input, a menu item), and
- * the browser drops focus to body in that case. We want to honor "user is still
- * working in the FilterInput" intent and put the caret back in the input.
- *
- * The opposite policy lives in `useFocusManagement.ts`'s rAF effect: there,
- * body-focus means "user clicked outside" (e.g. tenant switcher) and we MUST
- * NOT recapture. The two policies coexist because the triggers are different
- * (state-driven re-render vs. genuine outside click).
- *
- * If you find yourself unifying these — make sure the "DOM dropped focus on
- * re-render" case still refocuses, otherwise resetState during commit chains
- * breaks. AS-882.
+ * Body-focus policy: here, activeElement===body is treated as "stayed inside"
+ * (refocus the input) because doReset()'s state mutations can synchronously
+ * unmount the element that had focus, and the browser drops to body. The
+ * opposite policy in useFocusManagement treats body-focus as "user clicked
+ * outside" — both coexist because the triggers differ (state-driven re-render
+ * vs. genuine outside click). If unifying these, preserve the re-render
+ * refocus case or commit chains break. AS-882.
  */
-export declare const useResetState: ({ editing, dateRange, containerRef, inputRef, resetMenuOffset, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseResetStateDeps) => (continueBuilding?: boolean) => void;
+export declare const useResetState: ({ editing, dateRange, containerRef, inputRef, resetMenuAnchor, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseResetStateDeps) => (continueBuilding?: boolean) => void;
 export {};

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

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { flushSync } from "react-dom";
 import { isMenuRelated } from "../../lib/index.js";
-const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuOffset, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
+const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuAnchor, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
     const resetState = useCallback((continueBuilding = false)=>{
         const doReset = ()=>{
             setInputText('');
@@ -12,7 +12,7 @@ const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuOf
             setBuildingMultiValue(void 0);
             setInsertIndex(null);
             setInsertAfterConnector(false);
-            resetMenuOffset();
+            resetMenuAnchor();
             setMenuState('closed');
         };
         if (continueBuilding) {
@@ -27,7 +27,7 @@ const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuOf
         dateRange,
         inputRef,
         containerRef,
-        resetMenuOffset,
+        resetMenuAnchor,
         setInputText,
         setSelectedField,
         setSelectedOperator,

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

@@ -0,0 +1,36 @@
+import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
+import type { FieldMetadata, FilterOperator, MenuState } from '../../types';
+interface UseSegmentEditFlowOptions {
+    editing: {
+        editingChipId: string | null;
+        editingSegment: ChipSegment | null;
+        isBuildingEdit: boolean;
+        setSegmentFilterText: (text: string) => void;
+        startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
+        clearEditing: () => void;
+    };
+    selectedField: FieldMetadata | null;
+    selectedOperator: FilterOperator | null;
+    buildingMultiValue: string | undefined;
+    resetState: (continueBuilding?: boolean) => void;
+    setSelectedField: (f: FieldMetadata | null) => void;
+    setSelectedOperator: (op: FilterOperator | null) => void;
+    setInputText: (text: string) => void;
+    setMenuState: (state: MenuState) => void;
+    setMenuAnchor: (el: HTMLElement | null) => void;
+}
+/**
+ * Cross-cutting inline-segment handlers that don't fit any single segment flow:
+ * - `handleSegmentFilterChange` — apply field-level acceptChar to value-segment text
+ * - `cancelSegmentEdit` — full state reset on blur-cancel of a committed-chip edit;
+ *   preserves selectedField/Operator when bailing out of a building-chip edit (AS-929)
+ * - `handleMenuDiscard` — Escape from a menu (preserve building state, reset otherwise)
+ * - `handleBuildingChipClick` — enter inline-edit on a building-chip segment
+ */
+export declare const useSegmentEditFlow: ({ editing, selectedField, selectedOperator, buildingMultiValue, resetState, setSelectedField, setSelectedOperator, setInputText, setMenuState, setMenuAnchor, }: UseSegmentEditFlowOptions) => {
+    handleSegmentFilterChange: (text: string) => void;
+    cancelSegmentEdit: () => void;
+    handleMenuDiscard: () => void;
+    handleBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
+};
+export {};

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

@@ -0,0 +1,69 @@
+import { useCallback } from "react";
+import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
+import { SEGMENT_TO_MENU, applyAcceptChar } from "../../lib/index.js";
+import { getInitialSegmentText } from "./lib/index.js";
+const useSegmentEditFlow = ({ editing, selectedField, selectedOperator, buildingMultiValue, resetState, setSelectedField, setSelectedOperator, setInputText, setMenuState, setMenuAnchor })=>{
+    const { editingSegment, isBuildingEdit, setSegmentFilterText, startBuildingEdit, clearEditing } = editing;
+    const handleSegmentFilterChange = useCallback((text)=>{
+        const accept = selectedField?.acceptChar;
+        const next = editingSegment === SEGMENT_VARIANT.value && accept ? applyAcceptChar(text, accept) : text;
+        setSegmentFilterText(next);
+    }, [
+        selectedField,
+        editingSegment,
+        setSegmentFilterText
+    ]);
+    const cancelSegmentEdit = useCallback(()=>{
+        if (isBuildingEdit) {
+            clearEditing();
+            setMenuState('closed');
+            return;
+        }
+        setSelectedField(null);
+        setSelectedOperator(null);
+        clearEditing();
+        setMenuState('closed');
+    }, [
+        isBuildingEdit,
+        clearEditing,
+        setSelectedField,
+        setSelectedOperator,
+        setMenuState
+    ]);
+    const handleMenuDiscard = useCallback(()=>{
+        if (isBuildingEdit) {
+            clearEditing();
+            setMenuState('closed');
+            return;
+        }
+        resetState();
+    }, [
+        isBuildingEdit,
+        clearEditing,
+        resetState,
+        setMenuState
+    ]);
+    const handleBuildingChipClick = useCallback((segment, anchorEl)=>{
+        if (!selectedField) return;
+        setMenuAnchor(anchorEl);
+        const initialText = getInitialSegmentText(segment, selectedField, selectedOperator, buildingMultiValue);
+        startBuildingEdit(segment, initialText);
+        setInputText('');
+        setMenuState(SEGMENT_TO_MENU[segment]);
+    }, [
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        setMenuAnchor,
+        startBuildingEdit,
+        setInputText,
+        setMenuState
+    ]);
+    return {
+        handleSegmentFilterChange,
+        cancelSegmentEdit,
+        handleMenuDiscard,
+        handleBuildingChipClick
+    };
+};
+export { useSegmentEditFlow };

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

@@ -1,6 +1,5 @@
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { NO_VALUE_PLACEHOLDER, findOptionByValue, getDateDisplayLabel, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
-import { getInvalidValueIndices } from "../useFilterInputAutocomplete/valueCommitHelpers.js";
+import { NO_VALUE_PLACEHOLDER, findOptionByValue, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, isNoValueOperator } from "../../lib/index.js";
 const INVALID_DATE = 'Invalid Date';
 const DATE_RANGE_SEPARATOR = ' – ';
 const MULTI_VALUE_SEPARATOR = ', ';

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

@@ -1,18 +1,23 @@
 import type { RefObject } from 'react';
+import { type AnchorBounds } from '../lib';
 interface UseFilterInputPositioningProps {
     /** Ref to the trigger element (used for X anchor and container lookup via closest) */
     anchorRef?: RefObject<HTMLElement | null>;
     /** Explicit container ref (skips closest lookup) */
     containerRef?: RefObject<HTMLElement | null>;
-    /** Override horizontal anchor calculation (receives containerRect, returns left px) */
-    getAnchorLeft?: (containerRect: DOMRect) => number;
+    /** Override anchor calculation (receives containerRect, returns vertical/left bounds) */
+    getAnchorBounds?: (containerRect: DOMRect) => AnchorBounds;
+    /** Vertical gap below the anchor. Defaults to 12. */
+    gutter?: number;
 }
 /**
  * Shared positioning hook for all FilterInput dropdowns.
- * Anchors vertically to the query bar container and horizontally to the trigger element.
+ * Anchors the dropdown to the active element (chip segment, building chip, input
+ * or trigger) so it sits flush below the element being interacted with. Falls
+ * back to the trigger element's rect, then to the query bar container.
  * @param deps - extra values that force positioning recalculation (e.g. insertIndex)
  */
-export declare const useFilterInputPositioning: ({ anchorRef, containerRef, getAnchorLeft }: UseFilterInputPositioningProps, deps?: unknown[]) => {
+export declare const useFilterInputPositioning: ({ anchorRef, containerRef, getAnchorBounds, gutter }: UseFilterInputPositioningProps, deps?: unknown[]) => {
     placement: "bottom-start";
     gutter: number;
     getAnchorRect: () => {