@wallarm-org/design-system 0.41.0 → 0.42.0

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

@@ -1,50 +1,36 @@
-import { useCallback, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
-import { applyAcceptChar, getOperatorLabel } from "../../lib/index.js";
-import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
+import { deriveAutocompleteValues } from "./lib/index.js";
+import { useAutocompleteState } from "./useAutocompleteState.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.js";
+import { useMenuFlow } from "./useMenuFlow/index.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 [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({
+    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({
         containerRef,
         buildingChipRef,
         inputRef,
         isBuilding: null !== selectedField,
-        insertIndex: effectiveInsertIndex
+        insertIndex: effectiveInsertIndex,
+        chipsCount: chips.length,
+        isMenuOpen: 'closed' !== menuState
     });
     const editing = useChipEditing({
         conditions,
         chips,
         fields,
-        containerRef,
-        setMenuOffset,
+        setMenuAnchor,
         setSelectedField,
         setSelectedOperator,
         setMenuState,
@@ -56,7 +42,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         dateRange,
         containerRef,
         inputRef,
-        resetMenuOffset,
+        resetMenuAnchor,
         setInputText,
         setSelectedField,
         setSelectedOperator,
@@ -83,6 +69,22 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setMenuState,
         setBuildingMultiValue
     });
+    const { switchEditSegment, removeEditingChip, stepBackBuildingMenu } = useChipCascade({
+        editing,
+        chips,
+        fields,
+        conditionsRef,
+        selectedField,
+        selectedOperator,
+        buildingMultiValue,
+        upsertCondition,
+        removeCondition,
+        resetState,
+        setInputText,
+        setMenuState,
+        setSelectedOperator,
+        setBuildingMultiValue
+    });
     const { handleInputChange, handleInputClick, handleKeyDown, menuRef } = useInputHandlers({
         inputText,
         menuState,
@@ -97,11 +99,12 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         setInputText,
         setMenuState,
         setInsertIndex,
-        resetMenuOffset,
+        resetMenuAnchor,
         removeConditionAtIndex,
         handleFieldSelect,
         handleOperatorSelect,
-        handleCustomValueCommit
+        handleCustomValueCommit,
+        stepBackBuildingMenu
     });
     const { commitBuildingOnBlur, hasIncompleteBuilding } = useBlurCommit({
         selectedField,
@@ -132,7 +135,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         hasIncompleteBuilding,
         setIsFocused,
         setMenuState,
-        resetMenuOffset,
+        resetMenuAnchor,
         resetState
     });
     const { handleChipRemove, handleClear, handleGapClick, closeAutocompleteMenu } = useChipActions({
@@ -140,12 +143,24 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         inputRef,
         removeCondition,
         clearAll,
-        resetMenuOffset,
+        resetMenuAnchor,
         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,
@@ -155,56 +170,6 @@ 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,
@@ -229,6 +194,8 @@ 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,32 +6,30 @@ interface UseFocusManagementDeps {
     isFocused: boolean;
     conditionsLength: number;
     inputText: string;
-    /** In-progress building-chip state — needed so refocus resumes at the next
-     *  missing segment instead of (incorrectly) reopening the field menu. */
+    /** In-progress building-chip state — refocus resumes at next missing segment. */
     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 — avoids querySelector. */
+    /** Direct ref to the attribute segment input when editing. */
     segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the operator segment <input> when editing — avoids querySelector. */
+    /** Direct ref to the operator segment input when editing. */
     segmentOperatorInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the value segment <input> when editing — avoids querySelector. */
+    /** Direct ref to the value segment input when editing. */
     segmentValueInputRef: RefObject<HTMLInputElement | null>;
-    /** Ref set by FilterInputValueMenu — calls commitChecked() for multi-select before blur reset. Returns true if committed. */
+    /** Set by FilterInputValueMenu — commits multi-select checked values on blur. */
     blurCommitRef: RefObject<(() => boolean) | null>;
-    /** Tries to commit a building chip's freeform value on blur. Returns true if committed. */
+    /** Commits a building chip's freeform value on blur. Returns true if committed. */
     commitBuildingOnBlur: () => boolean;
-    /** True if there's an in-progress building chip that the blur/close path
-     *  must preserve (skip resetState). */
+    /** In-progress building chip exists — blur/close must preserve it (skip resetState). */
     hasIncompleteBuilding: () => boolean;
     setIsFocused: (focused: boolean) => void;
     setMenuState: (state: MenuState) => void;
-    resetMenuOffset: () => void;
+    resetMenuAnchor: () => 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, resetMenuOffset, resetState, }: UseFocusManagementDeps) => {
+export declare const useFocusManagement: ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuAnchor, 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, useRef } from "react";
+import { useCallback, useEffect, useMemo, 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, resetMenuOffset, resetState })=>{
+const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, selectedField, selectedOperator, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentOperatorInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, hasIncompleteBuilding, setIsFocused, setMenuState, resetMenuAnchor, 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) {
-            resetMenuOffset();
+            resetMenuAnchor();
             setMenuState(nextBuildingMenu(selectedField, selectedOperator));
         } else if (0 === conditionsLength && '' === inputText) {
-            resetMenuOffset();
+            resetMenuAnchor();
             setMenuState('field');
         }
         prevFocusedRef.current = isFocused;
@@ -60,9 +60,18 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         selectedField,
         selectedOperator,
         editingSegment,
-        resetMenuOffset,
+        resetMenuAnchor,
         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;
@@ -74,18 +83,11 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
                 if (!container) return;
                 const active = document.activeElement;
                 if (active && !container.contains(active) && !isMenuRelated(active)) return;
-                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();
+                const dest = editingSegment ? segmentInputRefsMap[editingSegment]?.current ?? null : inputRef.current;
+                if (!dest) return;
+                if (document.activeElement === dest) return;
+                dest.focus();
+                if (editingSegment) dest.select();
             });
         });
         return ()=>{
@@ -98,9 +100,34 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         inputRef,
         editingSegment,
         containerRef,
-        segmentAttributeInputRef,
-        segmentOperatorInputRef,
-        segmentValueInputRef
+        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
     ]);
     return {
         handleFocus,

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

@@ -1,11 +1,11 @@
 import type { ChangeEvent, KeyboardEvent, MutableRefObject, RefObject } from 'react';
 import type { Condition, FieldMetadata, FilterOperator, MenuState } from '../../types';
+type BuildingStep = 'field' | 'operator' | 'value';
 interface UseInputHandlersDeps {
     inputText: string;
     menuState: MenuState;
     selectedField: FieldMetadata | null;
-    /** Needed so a click into the main input while a building chip is alive
-     *  resumes at the next missing segment instead of doing nothing. */
+    /** Lets click resume at the next missing segment of a live building chip. */
     selectedOperator: FilterOperator | null;
     isFocused: boolean;
     fields: FieldMetadata[];
@@ -16,13 +16,15 @@ interface UseInputHandlersDeps {
     setInputText: (text: string) => void;
     setMenuState: (state: MenuState) => void;
     setInsertIndex: (fn: (prev: number | null) => number) => void;
-    resetMenuOffset: () => void;
+    resetMenuAnchor: () => void;
     removeConditionAtIndex: (index: number) => void;
     handleFieldSelect: (field: FieldMetadata) => void;
     handleOperatorSelect: (operator: FilterOperator) => void;
     handleCustomValueCommit: (text: string) => void;
+    /** Step building chip back one segment; tears it down at the field step. */
+    stepBackBuildingMenu: (current: BuildingStep) => void;
 }
-export declare const useInputHandlers: ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, }: UseInputHandlersDeps) => {
+export declare const useInputHandlers: ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuAnchor, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, stepBackBuildingMenu, }: UseInputHandlersDeps) => {
     handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
     handleInputClick: () => void;
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;

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

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 import { OPERATOR_SYMBOLS, applyAcceptChar, getOperatorFromLabel, hasFieldValues, nextBuildingMenu } from "../../lib/index.js";
-const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit })=>{
+const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuAnchor, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, stepBackBuildingMenu })=>{
     const menuRef = useRef(null);
     const handleInputChange = useCallback((e)=>{
         let text = e.target.value;
@@ -22,18 +22,24 @@ const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperato
     const handleInputClick = useCallback(()=>{
         inputRef.current?.focus();
         if ('closed' !== menuState) return;
-        resetMenuOffset();
+        resetMenuAnchor();
         setMenuState(nextBuildingMenu(selectedField, selectedOperator));
     }, [
         menuState,
         selectedField,
         selectedOperator,
-        resetMenuOffset,
+        resetMenuAnchor,
         inputRef,
         setMenuState
     ]);
     const handleKeyDown = useCallback((e)=>{
-        if ('ArrowDown' === e.key && 'closed' !== menuState) {
+        if ('ArrowDown' === e.key) {
+            if ('closed' === menuState) {
+                e.preventDefault();
+                resetMenuAnchor();
+                setMenuState(nextBuildingMenu(selectedField, selectedOperator));
+                return;
+            }
             e.preventDefault();
             menuRef.current?.focus();
             return;
@@ -72,23 +78,32 @@ const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperato
             handleCustomValueCommit(inputText);
             return;
         }
-        if ('Backspace' === e.key && !e.repeat && '' === inputText && conditionsLengthRef.current > 0) {
-            e.preventDefault();
-            const removeIdx = effectiveInsertIndexRef.current - 1;
-            if (removeIdx >= 0 && !conditionsRef.current[removeIdx]?.disabled) {
-                removeConditionAtIndex(removeIdx);
-                setInsertIndex((prev)=>{
-                    const eff = prev ?? conditionsLengthRef.current;
-                    return eff > 0 ? eff - 1 : 0;
-                });
+        if ('Backspace' === e.key && !e.repeat && '' === inputText) {
+            if (selectedField && ('value' === menuState || 'operator' === menuState || 'field' === menuState)) {
+                e.preventDefault();
+                stepBackBuildingMenu(menuState);
+                return;
+            }
+            if (conditionsLengthRef.current > 0) {
+                e.preventDefault();
+                const removeIdx = effectiveInsertIndexRef.current - 1;
+                if (removeIdx >= 0 && !conditionsRef.current[removeIdx]?.disabled) {
+                    removeConditionAtIndex(removeIdx);
+                    setInsertIndex((prev)=>{
+                        const eff = prev ?? conditionsLengthRef.current;
+                        return eff > 0 ? eff - 1 : 0;
+                    });
+                }
+                resetMenuAnchor();
+                setMenuState('field');
             }
-            setMenuState('closed');
         }
     }, [
         inputText,
         removeConditionAtIndex,
         menuState,
         selectedField,
+        selectedOperator,
         fields,
         handleFieldSelect,
         handleOperatorSelect,
@@ -98,7 +113,9 @@ const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperato
         setInsertIndex,
         conditionsRef,
         conditionsLengthRef,
-        effectiveInsertIndexRef
+        effectiveInsertIndexRef,
+        stepBackBuildingMenu,
+        resetMenuAnchor
     ]);
     return {
         handleInputChange,

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

@@ -0,0 +1 @@
+export { useMenuFlow } from './useMenuFlow';

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

@@ -0,0 +1,2 @@
+import { useMenuFlow } from "./useMenuFlow.js";
+export { useMenuFlow };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/{useMenuFlow.d.ts → useMenuFlow/types.d.ts}

@@ -1,13 +1,19 @@
 import type { RefObject } from 'react';
-import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
-import type { Condition, FieldMetadata, FilterOperator, MenuState, UpsertCondition } from '../../types';
-interface MenuFlowDeps {
+import type { ChipSegment } from '../../../FilterInputField/FilterInputChip';
+import type { Condition, FieldMetadata, FilterOperator, MenuState, UpsertCondition } from '../../../types';
+export interface MenuFlowDeps {
     editing: {
         editingChipId: string | null;
-        editingSegment: string | null;
+        editingSegment: ChipSegment | null;
+        /** Pre-derived chipId === null && segment !== null marker — single source
+         *  of truth, avoids re-deriving in every consumer. */
+        isBuildingEdit: boolean;
         setEditingSegment: (segment: ChipSegment | null) => void;
         setSegmentFilterText: (text: string) => void;
         resetSegmentTyping: () => void;
+        /** Switch inline-edit to another segment of the same committed chip,
+         *  loading its text and resetting the user-typed flag in one step. */
+        switchEditSegment: (segment: ChipSegment, currentText: string) => void;
         /** Exit inline-edit and the building-edit marker. Called when switching
          *  filter/operator in the building chip lands on the next menu. */
         clearEditing: () => void;
@@ -31,17 +37,8 @@ interface MenuFlowDeps {
     setMenuState: (state: MenuState) => void;
     setBuildingMultiValue: (val: string | undefined) => void;
 }
-export declare const useMenuFlow: ({ editing, selectedField, selectedOperator, fields, inputRef, insertIndex, upsertCondition, conditions, resetState, commitBuildingOnBlur, dateRange, setSelectedField, setSelectedOperator, setInputText, setMenuState, setBuildingMultiValue, }: MenuFlowDeps) => {
-    handleMenuClose: () => void;
-    handleFieldSelect: (field: FieldMetadata) => 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;
-    handleRangeSelect: (from: string, to: string) => void;
-    handleCustomValueCommit: (customText: string) => void;
-    handleCustomOperatorCommit: (customText: string) => void;
-    handleCustomAttributeCommit: (customText: string) => void;
-};
-export {};
+/** Shared shape: each sub-hook receives the same deps plus a ref to `conditions`
+ *  that stays fresh without forcing callbacks to recreate on every keystroke. */
+export interface MenuFlowInternalDeps extends MenuFlowDeps {
+    conditionsRef: RefObject<Condition[]>;
+}

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

@@ -0,0 +1,11 @@
+import type { FieldMetadata } from '../../../types';
+import type { MenuFlowInternalDeps } from './types';
+/**
+ * Attribute-segment handlers. `handleFieldSelect` is the menu-click path,
+ * `handleCustomAttributeCommit` is the keyboard-typed path — they share
+ * post-cascade and shape-preservation logic via mutual delegation.
+ */
+export declare const useFieldFlow: ({ editing, selectedOperator, fields, upsertCondition, conditionsRef, resetState, setSelectedField, setSelectedOperator, setInputText, setMenuState, }: MenuFlowInternalDeps) => {
+    handleFieldSelect: (field: FieldMetadata) => void;
+    handleCustomAttributeCommit: (customText: string) => void;
+};

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

@@ -0,0 +1,95 @@
+import { useCallback } from "react";
+import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
+import { chipIdToConditionIndex, isOperatorAllowedForField, validateValueForField } from "../../../lib/index.js";
+const useFieldFlow = ({ editing, selectedOperator, fields, upsertCondition, conditionsRef, resetState, setSelectedField, setSelectedOperator, setInputText, setMenuState })=>{
+    const { editingChipId, editingSegment, isBuildingEdit, switchEditSegment, clearEditing } = editing;
+    const handleFieldSelect = useCallback((field)=>{
+        if (editingChipId && editingSegment === SEGMENT_VARIANT.attribute) {
+            const idx = chipIdToConditionIndex(editingChipId);
+            const condition = null !== idx ? conditionsRef.current[idx] : null;
+            if (condition) {
+                if (!condition.operator) {
+                    upsertCondition(field, void 0, condition.value, editingChipId, void 0, void 0, condition.dateOrigin);
+                    setSelectedField(field);
+                    setSelectedOperator(null);
+                    switchEditSegment(SEGMENT_VARIANT.operator, '');
+                    setMenuState('operator');
+                    return;
+                }
+                const hasValueError = validateValueForField(field, condition.value);
+                upsertCondition(field, condition.operator, condition.value, editingChipId, void 0, hasValueError ? SEGMENT_VARIANT.value : void 0, condition.dateOrigin);
+            }
+            resetState();
+            return;
+        }
+        if (isBuildingEdit && editingSegment === SEGMENT_VARIANT.attribute) {
+            setSelectedField(field);
+            const keepOperator = selectedOperator ? isOperatorAllowedForField(field, selectedOperator) : false;
+            if (!keepOperator) setSelectedOperator(null);
+            clearEditing();
+            setMenuState(keepOperator ? 'value' : 'operator');
+            return;
+        }
+        setSelectedField(field);
+        setInputText('');
+        setMenuState('operator');
+    }, [
+        editingChipId,
+        editingSegment,
+        isBuildingEdit,
+        switchEditSegment,
+        clearEditing,
+        selectedOperator,
+        conditionsRef,
+        upsertCondition,
+        resetState,
+        setSelectedField,
+        setSelectedOperator,
+        setInputText,
+        setMenuState
+    ]);
+    const handleCustomAttributeCommit = useCallback((customText)=>{
+        if (!customText.trim()) return;
+        const trimmed = customText.trim();
+        const matchedField = fields.find((f)=>f.label.toLowerCase() === trimmed.toLowerCase() || f.name.toLowerCase() === trimmed.toLowerCase());
+        if (!editingChipId) {
+            if (matchedField) handleFieldSelect(matchedField);
+            return;
+        }
+        const idx = chipIdToConditionIndex(editingChipId);
+        const condition = null !== idx ? conditionsRef.current[idx] : null;
+        if (!condition) return;
+        if (matchedField) return void handleFieldSelect(matchedField);
+        const syntheticField = {
+            name: trimmed,
+            label: trimmed,
+            type: 'string'
+        };
+        if (!condition.operator) {
+            upsertCondition(syntheticField, void 0, condition.value, editingChipId, void 0, SEGMENT_VARIANT.attribute, condition.dateOrigin);
+            setSelectedField(syntheticField);
+            setSelectedOperator(null);
+            switchEditSegment(SEGMENT_VARIANT.operator, '');
+            setMenuState('operator');
+            return;
+        }
+        upsertCondition(syntheticField, condition.operator, condition.value, editingChipId, void 0, SEGMENT_VARIANT.attribute, condition.dateOrigin);
+        resetState();
+    }, [
+        editingChipId,
+        switchEditSegment,
+        fields,
+        conditionsRef,
+        upsertCondition,
+        resetState,
+        handleFieldSelect,
+        setSelectedField,
+        setSelectedOperator,
+        setMenuState
+    ]);
+    return {
+        handleFieldSelect,
+        handleCustomAttributeCommit
+    };
+};
+export { useFieldFlow };