@wallarm-org/design-system 0.41.0 → 0.42.0

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

@@ -2,18 +2,17 @@ import type { FC, HTMLAttributes } from 'react';
 import type { ExprNode, FieldMetadata } from './types';
 export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
     /**
-     * Filter-field configurations driving the autocomplete. Most fields are
-     * passed through as-is, but a few names are **reserved** and auto-wired
-     * with design-system helpers (`acceptChar` / `normalize` / `getSuggestions`
-     * / `validate`). Current reserved names:
+     * Filter-field configurations driving the autocomplete. A few names are
+     * **reserved** and auto-wired with design-system helpers — DS-supplied
+     * callbacks **override** consumer values for the reserved slots, because
+     * the field semantics (mask range, accepted chars, backend form) are fixed
+     * by DS:
      *
      *   - `status_code` — HTTP status code field (mask suggestions, format
      *     validation, digit-or-X input filter, partial-input normalization).
      *
-     * Consumer-supplied callbacks always override the auto-wiring, so you can
-     * opt out per-field. For the same helpers on a field with a different
-     * `name`, import the factories (`createStatusCodeSuggestions`, …) and
-     * attach them manually.
+     * To opt out, use a different `name` and attach the factories
+     * (`createStatusCodeSuggestions`, …) manually.
      */
     fields?: FieldMetadata[];
     value?: ExprNode | null;

package/dist/components/FilterInput/FilterInputContext/types.d.ts

@@ -22,10 +22,13 @@ export interface FilterInputContextValue {
     onInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
     onInputClick: () => void;
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
-    onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
-    /** Click on a segment of the *building* (in-progress) chip — re-opens the
-     *  corresponding menu and enters inline-edit without committing the chip. */
-    onBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
+    /** Click on a building-chip segment — reopens its menu and enters inline-edit. */
+    onBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
+    /** Move inline-edit to another segment of the edited chip (Backspace cascade). */
+    onSwitchEditSegment: (targetSegment: ChipSegment) => boolean;
+    /** Remove the inline-edited chip — Backspace on empty attribute w/o op/value. */
+    onRemoveEditingChip: () => void;
     onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     onChipRemove: (chipId: string) => void;
     onClear: () => void;
@@ -39,14 +42,14 @@ export interface FilterInputContextValue {
     onCustomOperatorCommit: (customText: string) => void;
     /** Ref to the currently open menu content element */
     menuRef: RefObject<HTMLDivElement | null>;
-    /** Close autocomplete menu (used by connector chip to enforce single-dropdown constraint) */
+    /** Close autocomplete menu (connector chip enforces single-dropdown). */
     closeAutocompleteMenu: () => void;
-    /** Register/unregister a chip DOM element for selection tracking */
+    /** Register/unregister a chip DOM element for selection tracking. */
     registerChipRef: (id: string, el: HTMLElement | null) => void;
-    /** Direct ref to the attribute segment <input> — attached by Segment when editing. */
+    /** Attribute segment input ref — set by Segment when editing. */
     segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the operator segment <input> — attached by Segment when editing. */
+    /** Operator segment input ref — set by Segment when editing. */
     segmentOperatorInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the value segment <input> — attached by Segment when editing. */
+    /** Value segment input ref — set by Segment when editing. */
     segmentValueInputRef: RefObject<HTMLInputElement | null>;
 }

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.d.ts

@@ -9,8 +9,10 @@ interface AutocompleteForContext {
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleInputClick: () => void;
-    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
-    handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
+    handleBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
+    switchEditSegment: (targetSegment: ChipSegment) => boolean;
+    removeEditingChip: () => void;
     handleConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.js

@@ -17,6 +17,8 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onInputClick: autocomplete.handleInputClick,
             onChipClick: autocomplete.handleChipClick,
             onBuildingChipClick: autocomplete.handleBuildingChipClick,
+            onSwitchEditSegment: autocomplete.switchEditSegment,
+            onRemoveEditingChip: autocomplete.removeEditingChip,
             onConnectorChange: autocomplete.handleConnectorChange,
             onChipRemove: autocomplete.handleChipRemove,
             onClear: autocomplete.handleClear,
@@ -47,6 +49,8 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleInputClick,
         autocomplete.handleChipClick,
         autocomplete.handleBuildingChipClick,
+        autocomplete.switchEditSegment,
+        autocomplete.removeEditingChip,
         autocomplete.handleConnectorChange,
         autocomplete.handleChipRemove,
         autocomplete.handleClear,

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

@@ -1,6 +1,5 @@
 import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
-import { isValidFieldValue } from "../hooks/useFilterInputAutocomplete/valueCommitHelpers.js";
-import { getFieldValues, hasStaticAllowlist } from "../lib/index.js";
+import { getFieldValues, hasStaticAllowlist, isValidFieldValue } from "../lib/index.js";
 const parseFilterInputErrors = (conditions, fields)=>{
     const errors = [];
     for (const condition of conditions){

package/dist/components/FilterInput/FilterInputField/ChipsWithGaps.d.ts

@@ -5,7 +5,7 @@ interface ChipsWithGapsProps {
     chips: FilterInputChipData[];
     hideLeadingGap?: boolean;
     hideTrailingGap?: boolean;
-    onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
     onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     onChipRemove: (chipId: string) => void;
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;

package/dist/components/FilterInput/FilterInputField/ChipsWithGaps.js

@@ -30,7 +30,7 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
                 errorValueIndices: chip.errorValueIndices,
                 disabled: chip.disabled,
                 onRemove: chip.disabled ? void 0 : ()=>onChipRemove(chip.id),
-                onSegmentClick: chip.disabled ? void 0 : (segment, anchorRect)=>onChipClick(chip.id, segment, anchorRect)
+                onSegmentClick: chip.disabled ? void 0 : (segment, anchorEl)=>onChipClick(chip.id, segment, anchorEl)
             })
         }, chip.id));
         else if (isConnector) {

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

@@ -16,6 +16,6 @@ export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement
     /** When true, the chip cannot be edited or removed (dimmed appearance) */
     disabled?: boolean;
     onRemove?: () => void;
-    onSegmentClick?: (segment: ChipSegment, anchorRect: DOMRect) => void;
+    onSegmentClick?: (segment: ChipSegment, anchorEl: HTMLElement) => void;
 }
 export declare const FilterInputChip: FC<FilterInputChipProps>;

package/dist/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.js

@@ -18,9 +18,9 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
         if (!onSegmentClick) return;
         if (activeSegment === segment) return;
         e.stopPropagation();
-        const anchorEl = segment === SEGMENT_VARIANT.attribute ? internalRef.current : e.currentTarget;
+        const anchorEl = internalRef.current;
         if (!anchorEl) return;
-        onSegmentClick(segment, anchorEl.getBoundingClientRect());
+        onSegmentClick(segment, anchorEl);
     }, [
         onSegmentClick,
         activeSegment

package/dist/components/FilterInput/FilterInputField/FilterInputField.js

@@ -1,21 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
 import { cn } from "../../../utils/cn.js";
 import { inputVariants } from "../../Input/classes.js";
 import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
 import { useFilterInputContext } from "../FilterInputContext/index.js";
-import { isMenuRelated } from "../lib/index.js";
 import { ChipsWithGaps, TrailingGap } from "./ChipsWithGaps.js";
 import { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, filterInputContainerVariants, filterInputInnerVariants } from "./classes.js";
 import { EditingProvider } from "./FilterInputChip/context/EditingContext.js";
 import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
-import { SEGMENT_VARIANT } from "./FilterInputChip/segmentVariant.js";
 import { FilterInputFieldActions } from "./FilterInputFieldActions.js";
 import { FilterInputSearch } from "./FilterInputSearch.js";
 import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
 import { useExpandCollapse } from "./hooks/useExpandCollapse.js";
+import { useSegmentEditKeyboard } from "./hooks/useSegmentEditKeyboard.js";
 const FilterInputField = ({ className, ...props })=>{
-    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, menuRef } = useFilterInputContext();
+    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, menuRef } = useFilterInputContext();
     const hasContent = chips.length > 0 || null != buildingChipData;
     const { isExpanded, isOverflowing, innerRef, toggleExpand, multiRow } = useExpandCollapse();
     const { chipsBefore, chipsAfter, hideTrailingGap, hideLeadingGap } = useChipsSplitting(chips, insertIndex, insertAfterConnector);
@@ -25,47 +23,20 @@ const FilterInputField = ({ className, ...props })=>{
         onChipRemove,
         onGapClick
     };
-    const handleSegmentEditKeyDown = useCallback((e)=>{
-        if ('Escape' === e.key) {
-            e.preventDefault();
-            onCancelSegmentEdit();
-            return;
-        }
-        if ('Enter' === e.key && !e.defaultPrevented) {
-            if (editingSegment === SEGMENT_VARIANT.value) {
-                e.preventDefault();
-                onCustomValueCommit(segmentFilterText);
-                return;
-            }
-            if (editingSegment === SEGMENT_VARIANT.attribute) {
-                e.preventDefault();
-                onCustomAttributeCommit(segmentFilterText);
-                return;
-            }
-            if (editingSegment === SEGMENT_VARIANT.operator) {
-                e.preventDefault();
-                onCustomOperatorCommit(segmentFilterText);
-                return;
-            }
-        }
-        if ('ArrowDown' === e.key) {
-            e.preventDefault();
-            menuRef.current?.focus();
-        }
-    }, [
-        onCancelSegmentEdit,
+    const { handleSegmentEditKeyDown, handleSegmentEditBlur } = useSegmentEditKeyboard({
+        editingChipId,
         editingSegment,
         segmentFilterText,
+        chips,
+        buildingChipData,
+        menuRef,
+        onCancelSegmentEdit,
         onCustomValueCommit,
         onCustomAttributeCommit,
         onCustomOperatorCommit,
-        menuRef
-    ]);
-    const handleSegmentEditBlur = useCallback((e)=>{
-        if (!isMenuRelated(e.relatedTarget)) onCancelSegmentEdit();
-    }, [
-        onCancelSegmentEdit
-    ]);
+        onSwitchEditSegment,
+        onRemoveEditingChip
+    });
     return /*#__PURE__*/ jsx(EditingProvider, {
         editingChipId: editingChipId,
         editingSegment: editingSegment,

package/dist/components/FilterInput/FilterInputField/hooks/useSegmentEditKeyboard.d.ts

@@ -0,0 +1,37 @@
+import type { FocusEvent, KeyboardEvent, RefObject } from 'react';
+import type { BuildingChipData } from '../../FilterInputContext/types';
+import type { FilterInputChipData } from '../../types';
+import { type ChipSegment } from '../FilterInputChip';
+interface UseSegmentEditKeyboardOptions {
+    editingChipId: string | null;
+    editingSegment: ChipSegment | null;
+    segmentFilterText: string;
+    chips: FilterInputChipData[];
+    buildingChipData: BuildingChipData | null;
+    menuRef: RefObject<HTMLDivElement | null>;
+    onCancelSegmentEdit: () => void;
+    onCustomValueCommit: (text: string) => void;
+    onCustomAttributeCommit: (text: string) => void;
+    onCustomOperatorCommit: (text: string) => void;
+    onSwitchEditSegment: (target: ChipSegment) => boolean;
+    onRemoveEditingChip: () => void;
+}
+/**
+ * Keyboard handlers for a chip segment's inline-edit input:
+ *
+ * - Escape cancels.
+ * - Backspace on an empty input walks the cascade (value → operator →
+ *   attribute) and, if the attribute is empty with no operator/value left,
+ *   removes the chip.
+ * - Enter commits the typed text via the segment-specific commit callback.
+ * - ArrowDown is intercepted (preventDefault) but focus stays on the input —
+ *   highlight navigation runs through useKeyboardNav's window-capture listener.
+ *
+ * Returns the keydown + blur handlers fed to `EditingProvider` so every
+ * segment input dispatches through the same logic.
+ */
+export declare const useSegmentEditKeyboard: ({ editingChipId, editingSegment, segmentFilterText, chips, buildingChipData, menuRef, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, }: UseSegmentEditKeyboardOptions) => {
+    handleSegmentEditKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleSegmentEditBlur: (e: FocusEvent<HTMLInputElement>) => void;
+};
+export {};

package/dist/components/FilterInput/FilterInputField/hooks/useSegmentEditKeyboard.js

@@ -0,0 +1,78 @@
+import { useCallback } from "react";
+import { isMenuRelated } from "../../lib/index.js";
+import { SEGMENT_VARIANT } from "../FilterInputChip/index.js";
+const useSegmentEditKeyboard = ({ editingChipId, editingSegment, segmentFilterText, chips, buildingChipData, menuRef, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip })=>{
+    const handleSegmentEditKeyDown = useCallback((e)=>{
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            onCancelSegmentEdit();
+            return;
+        }
+        if ('Backspace' === e.key && '' === segmentFilterText) {
+            if (e.nativeEvent.isComposing || e.repeat) return;
+            if (editingSegment === SEGMENT_VARIANT.attribute) {
+                const chipForEdit = editingChipId ? chips.find((c)=>c.id === editingChipId && 'chip' === c.variant) : null;
+                const operator = chipForEdit?.operator ?? buildingChipData?.operator ?? '';
+                if (!operator) {
+                    e.preventDefault();
+                    onRemoveEditingChip();
+                }
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.operator) {
+                e.preventDefault();
+                onSwitchEditSegment(SEGMENT_VARIANT.attribute);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.value) {
+                e.preventDefault();
+                onSwitchEditSegment(SEGMENT_VARIANT.operator);
+                return;
+            }
+        }
+        if ('Enter' === e.key && !e.defaultPrevented) {
+            if (editingSegment === SEGMENT_VARIANT.value) {
+                e.preventDefault();
+                onCustomValueCommit(segmentFilterText);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.attribute) {
+                e.preventDefault();
+                onCustomAttributeCommit(segmentFilterText);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.operator) {
+                e.preventDefault();
+                onCustomOperatorCommit(segmentFilterText);
+                return;
+            }
+        }
+        if ('ArrowDown' === e.key) {
+            e.preventDefault();
+            menuRef.current?.focus();
+        }
+    }, [
+        onCancelSegmentEdit,
+        editingSegment,
+        segmentFilterText,
+        onCustomValueCommit,
+        onCustomAttributeCommit,
+        onCustomOperatorCommit,
+        onSwitchEditSegment,
+        onRemoveEditingChip,
+        editingChipId,
+        chips,
+        buildingChipData,
+        menuRef
+    ]);
+    const handleSegmentEditBlur = useCallback((e)=>{
+        if (!isMenuRelated(e.relatedTarget)) onCancelSegmentEdit();
+    }, [
+        onCancelSegmentEdit
+    ]);
+    return {
+        handleSegmentEditKeyDown,
+        handleSegmentEditBlur
+    };
+};
+export { useSegmentEditKeyboard };

package/dist/components/FilterInput/FilterInputMenu/FilterInputDateValueMenu/constants.d.ts

@@ -10,8 +10,8 @@ export interface DatePreset {
 export declare const DATE_PRESETS: DatePreset[];
 /** Check if a value string is a relative date preset (e.g. "30m", "7d") */
 export declare const isDatePreset: (value: string) => boolean;
-/** Format a date string for chip display (e.g. "Mar 4, 2026").
- *  Handles both ISO (YYYY-MM-DD, parsed as UTC) and locale formats (parsed as local time). */
+/** Format a date string for chip display (e.g. "Mar 4, 2026"). ISO parsed as
+ *  UTC, locale strings as local time. */
 export declare const formatDateForChip: (value: string) => string;
 /** Get display label for a date value — preset label or formatted date */
 export declare const getDateDisplayLabel: (value: string) => string;

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FilterInputFieldMenu.d.ts

@@ -16,7 +16,7 @@ export interface FilterInputFieldMenuProps {
     positioning?: Record<string, unknown>;
     /** Ref to the query bar input — ArrowUp on first item returns focus here */
     inputRef?: RefObject<HTMLInputElement | null>;
-    /** Ref to the menu content element — shared across menus for focus management */
+    /** Ref to the menu content (shared across menus for focus management). */
     menuRef?: RefObject<HTMLDivElement | null>;
     className?: string;
 }

package/dist/components/FilterInput/FilterInputMenu/FilterInputMenu.d.ts

@@ -24,7 +24,7 @@ export interface FilterInputAutocompleteState {
     segmentFilterText: string;
     segmentMenuFilterText: string;
     editingSegment: ChipSegment | null;
-    /** Ref for multi-select blur commit — set by value menu, called by blur handler */
+    /** Multi-select blur commit; set by value menu, called by blur handler. */
     blurCommitRef: RefObject<(() => boolean) | null>;
 }
 export interface FilterInputMenuProps {

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/FilterInputValueMenu.d.ts

@@ -23,16 +23,15 @@ export interface FilterInputValueMenuProps {
     width?: 'standard' | 'compact' | number;
     positioning?: Record<string, unknown>;
     onBuildingValueChange?: (preview: string | undefined) => void;
-    /** Fires on explicit multi-select toggle (click or keyboard) — use to react
-     *  only to user-initiated toggles, not to initialization. */
+    /** Fires only on user-initiated multi-select toggle (not on init). */
     onItemToggle?: () => void;
-    /** Ref to the query bar input — ArrowUp on first item returns focus here */
+    /** Query bar input — ArrowUp on first item returns focus here. */
     inputRef?: RefObject<HTMLInputElement | null>;
-    /** Text to filter values by label */
+    /** Filter values by label. */
     filterText?: string;
-    /** Ref to the menu content element — shared across menus for focus management */
+    /** Menu content ref (shared across menus for focus management). */
     menuRef?: RefObject<HTMLDivElement | null>;
-    /** Ref set by this component to allow blur handler to commit multi-select values */
+    /** Set here so blur handler can commit multi-select values. */
     blurCommitRef?: RefObject<(() => boolean) | null>;
     className?: string;
 }

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useValueMenuDisplayValues.d.ts

@@ -12,20 +12,10 @@ interface UseValueMenuDisplayValuesOptions {
     highlightValue?: ConditionValue;
 }
 /**
- * Compose the final dropdown list shown to the user.
- *
- * The parent helper (`values`) is free to change shape between renders — for
- * instance a dynamic `getSuggestions` may narrow its result after a selection
- * is made. This hook keeps the user's currently-selected entries pinned at
- * the top of the list with a stable presentation:
- *
- *  1. Every option the menu has ever rendered is remembered in a `Map` keyed
- *     by value. When a selected entry is no longer in the current `values`,
- *     the remembered option (with its original label/badge) is used.
- *  2. If nothing has been seen for that value either, a plain-text option is
- *     fabricated so the user can still see and toggle it.
- *  3. Unchecked items come from `filteredValues` (already filter-sorted) so
- *     the search query still applies to them.
+ * Compose the dropdown list, pinning selected entries at the top.
+ * Remembers every option ever rendered so a narrowed `values` (e.g. dynamic
+ * getSuggestions) can still display the selected label/badge; fabricates a
+ * plain-text option as last resort. Unselected items still respect the filter.
  */
 export declare const useValueMenuDisplayValues: ({ values, filteredValues, multiSelect, checkedValues, highlightValue, }: UseValueMenuDisplayValuesOptions) => ValueOption[];
 export {};

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useValueMenuState.d.ts

@@ -13,14 +13,12 @@ interface UseValueMenuStateOptions {
     onEscape?: () => void;
     onOpenChange?: (open: boolean) => void;
     onBuildingValueChange?: (preview: string | undefined) => void;
-    /** Fires whenever the user explicitly toggles an item in multi-select mode
-     *  (click or keyboard). Distinct from onBuildingValueChange, which also fires
-     *  on mount with the initial preview — use this when you need to react only
-     *  to actual user-initiated toggles. */
+    /** Fires only on user-initiated toggles in multi-select (unlike
+     *  onBuildingValueChange which also fires on mount). */
     onItemToggle?: () => void;
     inputRef?: RefObject<HTMLInputElement | null>;
     menuRef?: RefObject<HTMLDivElement | null>;
-    /** Ref to register blur commit function — called by blur handler before state reset. Returns true if committed. */
+    /** Register blur commit fn — called by blur handler before state reset. */
     blurCommitRef?: RefObject<(() => boolean) | null>;
 }
 export declare const useValueMenuState: ({ values, open, multiSelect, initialValues, highlightValue, onSelect, onCommit, onEscape, onOpenChange, onBuildingValueChange, onItemToggle, inputRef, menuRef, blurCommitRef, }: UseValueMenuStateOptions) => {

package/dist/components/FilterInput/FilterInputMenu/hooks/useKeyboardNav.d.ts

@@ -12,7 +12,7 @@ interface UseKeyboardNavOptions {
     arrowRightSelectsActive?: boolean;
     /** When provided, ArrowUp on the first item returns focus to this input */
     inputRef?: RefObject<HTMLInputElement | null>;
-    /** Ref to the menu content element — used for scoped queries and focus management */
+    /** Ref to the menu content element for scoped queries. */
     menuRef?: RefObject<HTMLDivElement | null>;
 }
 /**

package/dist/components/FilterInput/FilterInputMenu/hooks/useKeyboardNav.js

@@ -141,7 +141,11 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
                 return;
             }
             const isSegmentInput = e.target?.closest?.('[data-slot^="segment-"]');
-            if (isSegmentInput && 'Escape' !== e.key && 'ArrowDown' !== e.key && 'ArrowUp' !== e.key) return;
+            if (isSegmentInput) {
+                const isEnterWithHighlight = 'Enter' === e.key && activeIndexRef.current >= 0;
+                const isNavOrClose = 'Escape' === e.key || 'ArrowDown' === e.key || 'ArrowUp' === e.key;
+                if (!isNavOrClose && !isEnterWithHighlight) return;
+            }
             const { items: list, onSelect: select, onClose: close, onArrowRight: arrowRight } = stateRef.current;
             if (0 === list.length) return;
             switch(e.key){
@@ -154,7 +158,6 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
                     e.preventDefault();
                     e.stopPropagation();
                     navigate('ArrowDown' === e.key ? 1 : -1);
-                    stateRef.current.menuRef?.current?.focus();
                     break;
                 case 'Enter':
                     {

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

@@ -0,0 +1,13 @@
+/**
+ * Watches a captured DOM element and runs `onDetached` as soon as the element
+ * leaves the document tree. Useful for state that stores a reference to a
+ * conditionally rendered element (e.g. a clicked chip) — if the parent removes
+ * the element via a controlled prop change while the state still holds it,
+ * downstream consumers can otherwise read a stale rect from a detached node.
+ *
+ * The MutationObserver is scoped to `el.parentElement` (subtree+childList) so
+ * unrelated mutations elsewhere on the page don't wake the callback. If the
+ * parent itself is removed in the same tick `el.parentElement` is null and we
+ * fall back to `documentElement` to keep the safety net.
+ */
+export declare const useAutoCleanupDetachedElement: (el: HTMLElement | null, onDetached: () => void) => void;

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

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+const useAutoCleanupDetachedElement = (el, onDetached)=>{
+    useEffect(()=>{
+        if (!el) return;
+        if (!el.isConnected) return void onDetached();
+        if ("u" < typeof MutationObserver) return;
+        const root = el.parentElement ?? el.ownerDocument?.documentElement;
+        if (!root) return;
+        const observer = new MutationObserver(()=>{
+            if (!el.isConnected) onDetached();
+        });
+        observer.observe(root, {
+            childList: true,
+            subtree: true
+        });
+        return ()=>observer.disconnect();
+    }, [
+        el,
+        onDetached
+    ]);
+};
+export { useAutoCleanupDetachedElement };

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

@@ -1,5 +1,5 @@
-import type { BuildingChipData } from '../../FilterInputContext/types';
-import type { Condition, FieldMetadata, FilterOperator } from '../../types';
+import type { BuildingChipData } from '../../../FilterInputContext/types';
+import type { Condition, FieldMetadata, FilterOperator } from '../../../types';
 interface DeriveOptions {
     editingChipId: string | null;
     selectedField: FieldMetadata | null;
@@ -7,7 +7,7 @@ interface DeriveOptions {
     conditions: Condition[];
     buildingMultiValue: string | undefined;
     dateRangeFromValue: string | null | undefined;
-    /** Segment text when inline-editing a value — used to derive checked values from text */
+    /** Segment text when inline-editing a value. */
     segmentFilterText?: string;
 }
 export interface DerivedAutocompleteValues {

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/{deriveAutocompleteValues.js → lib/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/lib/getInitialSegmentText.d.ts

@@ -0,0 +1,9 @@
+import { type ChipSegment } from '../../../FilterInputField/FilterInputChip';
+import type { FieldMetadata, FilterOperator } from '../../../types';
+/**
+ * Initial text shown in a building chip's inline-edit input for the given
+ * segment. Mirrors what the chip is currently displaying so the user can
+ * backspace through it (segment-click reopen + Backspace cascade share this
+ * derivation, hence the standalone helper).
+ */
+export declare const getInitialSegmentText: (segment: ChipSegment, selectedField: FieldMetadata, selectedOperator: FilterOperator | null, buildingMultiValue: string | undefined) => string;

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

@@ -0,0 +1,8 @@
+import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
+import { getOperatorLabel } from "../../../lib/index.js";
+const getInitialSegmentText = (segment, selectedField, selectedOperator, buildingMultiValue)=>{
+    if (segment === SEGMENT_VARIANT.attribute) return selectedField.label;
+    if (segment === SEGMENT_VARIANT.operator) return selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : '';
+    return buildingMultiValue ?? '';
+};
+export { getInitialSegmentText };

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

@@ -0,0 +1,3 @@
+export { deriveAutocompleteValues } from './deriveAutocompleteValues';
+export { getInitialSegmentText } from './getInitialSegmentText';
+export { displayDateToIso, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue, } from './valueResolution';

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

@@ -0,0 +1,4 @@
+import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
+import { getInitialSegmentText } from "./getInitialSegmentText.js";
+import { displayDateToIso, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue } from "./valueResolution.js";
+export { deriveAutocompleteValues, displayDateToIso, getInitialSegmentText, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue };

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

@@ -1,10 +1,4 @@
-import type { Condition, FieldMetadata, FieldValueOption } from '../../types';
-/** Check if a single value matches any option in the field's values list */
-export declare const isValidFieldValue: (fieldValues: FieldValueOption[], v: string | number | boolean) => boolean;
-/** Return indices of values that don't match any field option. Empty array = all valid. */
-export declare const getInvalidValueIndices: (field: FieldMetadata, values: Array<string | number | boolean>) => number[];
-/** Check if condition value(s) are valid for the given field. Returns true if error. */
-export declare const validateValueForField: (field: FieldMetadata, value: Condition["value"]) => boolean;
+import type { Condition, FieldMetadata } from '../../../types';
 /** Resolve a text input to the actual field value (e.g. label "Active" → value "active") */
 export declare const resolveFieldValue: (field: FieldMetadata, text: string) => string | number | boolean;
 /** Resolve and validate a single-select value from text */